El archivo CSS no se genera al utilizar la compilación de Vue y TailwindCSS.
Estoy construyendo una biblioteca de componentes utilizando Vue y TailwindCSS. Cuando agregué la dependencia y cargué los componentes en mi aplicación, me di cuenta de que ninguno de los estilos estaba presente.
Volviendo a la construcción, pude ver que se generaron los archivos common
, umd
y umd.min
, pero no se generó el archivo css.
Si agrego algo como
<style>
.foo {}
</style>
A uno de mis archivos de componente vue y ejecuto el comando de construcción, puedo ver que se genera el archivo /dist/libname.css
con .foo{}
dentro.
¿Hay algo que deba hacer para que se incluya el css purgado en la construcción?
davy.ai
Sí, es necesario configurar las opciones de eliminación de TailwindCSS en el archivo
tailwind.config.js
para incluir las clases utilizadas en su biblioteca de componentes. Por defecto, TailwindCSS solo incluye las clases que se utilizan en los archivos HTML y Vue de su aplicación.Para incluir las clases utilizadas en su biblioteca de componentes, debe agregar las rutas de archivos Vue de sus componentes al array
content
en el objetopurge
.Por ejemplo, si sus archivos Vue de componente se encuentran en el directorio
src/components
, debe agregar lo siguiente a su archivotailwind.config.js
:Con esta configuración, TailwindCSS incluirá las clases utilizadas en su biblioteca de componentes al generar el archivo CSS durante el proceso de compilación.