> Faqs > ¿Es posible organizar el código de mis componentes Tailwind en archivos CSS independientes?

¿Es posible organizar el código de mis componentes Tailwind en archivos CSS independientes?

Ya sé que el enfoque de Tailwind no es para crear componentes, sino aplicar directamente sus clases para hacer estilos, pero el @apply sigue siendo muy importante para mi, porque me permite reutilizar el código sin necesidad de repetir las clases.

Nota: estoy en un proyecto en el que no uso componentes Javascript ni un motor de templates en PHP.

La duda es ¿cómo puedo organizar el código CSS para que mis componentes estén en archivos distintos? Así pueda tener un archivo CSS para cada uno de los componentes que estoy creando para mi diseño.

Respuestas

Es posible usar la instrucción @import de CSS para poder importar cualquier contenido que tengas en archivos separados.

@import './components/button.css';
@import './components/navigator.css';

@import es una instrucción CSS estándar, por lo que no tendrás inconveniente en usarla en cualquier navegador.

El problema que quizás te puedes encontrar en el uso de los @import de CSS es que cada archivo importado produce una solicitud HTTP, como ocurre con las imágenes o los archivos externos cargados desde el HTML. Esto en principio no es mucho problema actualmente, ya que HTTP/2 tiene un comportamiento optimizado en las conexiones TCP y puede transferir varios archivos en la misma conexión, por eso no te penaliza tanto tener muchos @import a archivos distintos. Sin embargo, se suele considerar una mala práctica.

La recomendación cuando usas @import es que hagas un procesamiento previo del CSS para generar un único archivo con el código de todo tu CSS como compilado. Como Tailwind está basado en PostCSS, puedes usar perfectamente “postcss-import” que es un plugin de PostCSS que permite unir todos los import en un único archivo de salida.

En la página dedicada a PostCSS puedes aprender a usar el plugin de postcss-import.

Como Tailwind se tiene que procesar con su correspondiente plugin, y el orden de los plugins de PostCSS importa, lo recomendable es en el archivo postcss.config.js primero invocar el plugin de importado de los CSS y luego el plugin de Tailwindcss.

Archivo postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
  ]
}

Con esto, cada vez que se procese el CSS, se unirán todos los CSS importados y finalmente se procesará TailwindCSS.

Guillermo
111 4 8 4