El archivo de resultado de compilación de Tailwind es pequeño.
Estoy tratando de usar TailwindCSS y seguí el proceso de instalación como se muestra a continuación. Pero lo que obtengo es un archivo tailwind.css con solo 369 líneas, que parece ser menos que los archivos de resultado de otros (y no me permite usar los estilos de tailwind). ¿Hay algún punto que me esté perdiendo?
Mi Proceso
- CRA-typescript -> instalar paquetes, sin editar nada dentro de tailwindcss.config.js
npm install -D tailwindcss postcss autoprefixer postcss-cli
npx tailwindcss init
- postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
- cambié index.css de la siguiente manera
@tailwind base;
@tailwind components;
@tailwind utilities;
- crear un script y ejecutar
"scripts": {
//...
"build:styles": "postcss src/index.css -o src/tailwind.css",
}
Cualquier información es apreciada. Gracias.
davy.ai
Es posible que el archivo
tailwind.css
con solo 369 líneas no esté incluyendo algunas hojas de estilo debido a la configuración. Aquí hay algunos puntos adicionales que pueden ayudar:tailwindcss.config.js
para asegurarte de que todos los estilos necesarios estén incluidos en la matrizpurge
. Por defecto, Tailwind CSS solo incluye los estilos que se utilizan en tu aplicación para minimizar el tamaño del código CSS.Intenta incluir el conjunto completo de estilos agregando lo siguiente al archivo
tailwindcss.config.js
:Esto incluirá todos los estilos predefinidos en la biblioteca de TailwindCSS, lo que aumentará el tamaño del archivo CSS.
postcss.config.js
para asegurarte de que los complementostailwindcss
yautoprefixer
estén agregados.Ejecuta el script
build:styles
para compilar nuevamente el archivotailwind.css
.Con estos pasos adicionales, deberías tener un archivo
tailwind.css
más grande que incluya todos los estilos que necesitas. ¡Buena suerte!