Creé un proyecto vanilla js con Vite e instalé Tailwind como dice la documentación. Cuando ejecuto en modo dev, las clases funcionan, pero cuando construyo la carpeta dist y sirvo esa compilación, no funciona.
Mi postcss.config.js es este
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }Y mi configuración de viento de cola es esta
module.exports = { purge: [ './src/**/*.html', './src/**/*.js', ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }Puede seguir estos pasos para resolver el problema:
Elimina el código de tu archivo main.js (parte de la plantilla de Vite).
También puede eliminar el bloque #app de styles.css (parte de la plantilla de Vite).
Agrega la siguiente línea a tu index.html :
<link rel="stylesheet" href="/style.css"> Ahora en el <body> , puedes usar Tailwind así:
<div class="text-2xl">Hello, World!</div>PD: gracias a este video (del 6:11 al 7:36) por la solución.