Esta es la primera vez que trato de usar Tailwind CSS y ha sido una molestia intentar configurarlo durante días sin éxito, seguí un video de YouTube para principiantes absolutos hasta el final, todo estuvo bien hasta el momento de cargar el servidor en vivo y las clases simplemente no funcionaron. reflexiona Permítanme mencionar que no he aprendido ningún marco js solo vainilla. También probé la configuración oficial de viento de cola de sus sitios web y sus videos oficiales de YouTube que usan vite, pero aún no tuve suerte.
mi archivo postcss.config.js
module.exports = { plugins: [require("tailwindcss"), require("autoprefixer")], };mi configuración de viento de cola
module.exports = { content: [], theme: { extend: {}, }, variants: {}, plugins: [], };también tengo esto en css que se refleja en los archivos de salida, agregué esta importación porque alguien lo recomendó aquí y todavía no funcionó
@import "tailwind/base"; @import "tailwind/components"; @import "tailwind utilities";Debe decirle a tailwind.config.js a qué contenido debe distribuir. content: ["./src/pages/*.{html,js}"], por ejemplo. La ruta debe ser relativa a donde se encuentra tailwind.config.js.
También necesitará usar el modo de visualización de compilación en vivo de Tailwind, que analiza el content: archivos para todas las clases de CSS usadas, los compila en output.css. En su HTML, solo tendrá que incluir ese output.css
El comando es así: npx tailwindcss -i /path/to/input.css -o /path/to/output.css --watch
input.css es su archivo css original (donde ha puesto @import), y output.css es el archivo que generará cada vez con las clases utilizadas, por lo que cargará el archivo en su HTML.