I'm trying to generate tailwindcss to last.css file with npx on Ubuntu.
Npx version --> 6.14.4
Ubuntu ---> 20.04
However it isn't working.
My code it's the next:
npx tailwindcss build src/styles.css -o public/last.css
This it's the mistake I'm receiving.
Invalid or unexpected token
Thanks!
try this:
npx tailwindcss -i src/styles.css -o public/last.css
this will generate a css file from src/styles.css to public/last.css
if you want to minify try this:
npx tailwindcss -i src/styles.css -o public/last.css --minify
and if you want it to purge unused styles you can try Purgecss
Related
everything work fine, but this time I want to push my code to production
using netlify, which is ok in development
but in production isn't get shown
and I know also why:
this is happening because the dist folder is inside .gitignore
but I want to ask if there is way to generate tailwind inside "scripts"
now I have this:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"twcss": "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch"
},
is there a way to npm run build with npm run twcss && vite build
but && means the same time run two scripts.
but I want to do first the tailwind then vite build
another problem is that tailwind don't exit but continue infinitely
so is will never compile the build if the twcss don't finish
for now the script should run on the build time netlify and not on the development.
and I have this netlify config
that is config correctly CSS js svelte to compile but not tailwind
this happen to me also before.
I believe that in the script of tailwind, delete the --watch flag
❌
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch
✅
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css
this edit will make a tailwind exit when compiles everything, and will not wait for upcoming changes.
so it will make this the best choice for production!
in netlify write this command
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css && vite build
so with && (that it will not give bugs anymore now)
with this order:
tailwind
vite build
attention: vite build need to be always at the end
now also the CSS of the tailwind will be minified (inside the same CSS file of svelte),
so it is also production ready. (like the svelte/JS code you tell us before)
why you have --flag without knowing?
yes you have it because you used the example on the tailwind docs,
which is good for development or static websites
because of reloading on every change/class added in html
but like you said is impossible to stop (in netlify)
I'd like to know what that error is and how to fix it. I'm simply following Tailwind's official installation guide (yarn add -D tailwindcss and then yarn tailwindcss init) and my tailwind config file cannot be created.
Context: I need to run a command every time Tailwind's just-in-time compiler ran a new build in watch mode. To be more specific, I need to rebuild Drupal's cache for the changes to take effect.
Unfortunately, watching for modifications of output.css with inotifywait doesn't work because the JIT compiler doesn't recreate output.css in all circumstances. For example, if you add the border-2 class for the first time, a new version of output.css is built. However, if you remove border-2 again, the compiler won't recreate output.css for legitimate reasons. See JIT compilation doesn't remove unused classes when the DOM changes · Issue #57 · tailwindlabs/tailwindcss-jit.
I also tried using tee and watching the output file with inotifywait without success. npx tailwindcss -i input.css -o output.css --watch | tee tailwind-built doesn't write to tailwind-built for reasons I don't get.
I found a solution based on tee finally.
Problem was that Tailwind's CLI at the time of writing uses console.error (see here) to report
Rebuilding...
Done in 33ms.
So npx tailwindcss -i input.css -o output.css --watch 2>&1 | tee tailwind-built (added 2>&1) and watching tailwind-built with inotifywait does the trick.
When I run:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
My output.css gets mostly deleted, and only contains a handful of tailwind css, see image:
I have to run:
npx tailwindcss-cli#latest build ./src/input.css -o ./dist/output.css
to rebuild the file which gets all the tailwind css see:
But when I run:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
it deletes the output.css again!
I've cleared the NPM cache, re-installed Tailwindcss on a new project and it produces the same issue.
Any help would be welcome, just starting out with backend programming!
If you use the build command tailwind iterate over your content and check which styles you are use. The other styles are purged. That is a feature of tailwind and makes sure you don't load all the overhead styles you don't use into the CSS file.
I would like to work in IntelliJ with SCSS files.
I see tutorial and I try to follow it. But for some reason this is not working for me.
WHAT I DID:
(I have a mac computer)
I download the node sass library : npm install -g sass
I add file watcher :
Scope : All Places
Program : usr/local/bin/node-sass
Arguments : --no-cache --update $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
But if I create .scss file and save it, it doesn't create any .css file.
Arguments you have specified are valid neither for Sass nor for node-sass.
For Sass (npm install -g sass) the most simple setup is:
For node-sass (npm install -g node-sass), it would be: