vite does not build tailwind css - html

Question

I installed tailwind and other tools using npm install -D tailwindcss postcss autoprefixer vite
I created tailwind and postcss config files using npx tailwindcss init -p
tailwind.config.js contains:
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js contains:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
My CSS file exits in css\tailwind.css and contains:
#tailwind base;
#tailwind components;
#tailwind utilities;
The CSS file is linked to my HTMl page using <link href="/css/tailwind.css" rel="stylesheet" >
When I run vite, my app starts without build errors but tailwind output is not generated.

Answer 1

You need to adjust a few settings, feels like you're pretty close.
Edit Tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Start Vite building script with 'npm run dev' command.
// Open terminal
npm run dev
(Optional) Copy demo h1 property into your index file and test
<h1 class="text-3xl text-blue-700">Testing</h1>

Answer 2

This works for me. Once you've done what Tailwindcss says in its docs, in your vite.config.js (I tried this on JavaScript file. I am not sure if this works on TypeScript in the same way) import tailwindcss:
import tailwindcss from 'tailwindcss'
Then add tailwindcss as a PostCSS plugin like this:
css: {
postcss: {
plugins: [tailwindcss],
},
}
Once you've done that your vite.config.js will look like this:
/*Other imports*/
import tailwindcss from 'tailwindcss'
export default defineConfig({
plugins: [],
resolve: {
/*something*/
},
css: {
postcss: {
plugins: [tailwindcss],
},
},
});