I created a vanilla js project with Vite and installed Tailwind as the docs says. When I run in dev mode the classes works, but when I build the dist folder and serve that build it doesn't.
My postcss.config.js is this
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
And my tailwind config is this
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.js',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
You can follow these steps to resolve the issue:
Remove the code from your main.js file (part of Vite's template).
You may also want to remove the #app block from the styles.css (part of Vite's template).
Add the following line to your index.html:
<link rel="stylesheet" href="/style.css">
Now in the <body>, you can use Tailwind like this:
<div class="text-2xl">Hello, World!</div>
PS: thanks to this video (from 6:11 to 7:36) for the solution.