tailwind not build with vite netlify – how to exit tailwind script when compiles

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

>Solution :

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:

1. tailwind
2. vite build

and the end 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 code you tell us before)