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

June 4, 2023 at 8:45 am

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 objeto purge.

Por ejemplo, si sus archivos Vue de componente se encuentran en el directorio src/components, debe agregar lo siguiente a su archivo tailwind.config.js:

module.exports = {
  // Otras opciones de configuración...
  purge: {
    content: [
      './public/**/*.html', 
      './src/**/*.vue', 
      './src/components/**/*.vue' // Agregue esta línea
    ],
  },
}

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.

Answer

davy.ai

June 4, 2023 at 8:45 am
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 objeto purge.

Por ejemplo, si sus archivos Vue de componente se encuentran en el directorio src/components, debe agregar lo siguiente a su archivo tailwind.config.js:
```
module.exports = {
  // Otras opciones de configuración...
  purge: {
    content: [
      './public/**/*.html', 
      './src/**/*.vue', 
      './src/components/**/*.vue' // Agregue esta línea
    ],
  },
}
```
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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

El archivo CSS no se genera al utilizar la compilación de Vue y TailwindCSS.

Answer

davy.ai