La directiva @layer nos permite agregar algunas reglas de estilos a una capa determinada del framework, de modo que podamos escribir CSS en cualquier lugar del proyecto, asegurándonos que ese CSS se coloca en el lugar donde nosotros queremos, una vez realizado el proceso de build de los estilos.

Capas de Tailwind

Para comenzar conviene recordar cuáles eran las tres capas de TailwindCSS:

• Base: con código fundamental, como el típico reset.
• Components: con código que implementa componentes.
• Utilities: las potentes y numerosas clases de utilidad de Tailwind.

Estas tres capas se colocan en el orden en el que las hemos listado y sobre ellas se aplica la regla de la cascada de CSS, de modo que los estilos definidos antes son sobreescritos con cualquier código CSS que se defina después. Por tanto, los estilos definidos en "base" se sobreescriben por cualquier declaración siguiente (capas "components" y "utilities") y los estilos de "components" se sobreescriben por los que hay en "utilities".

Dada esta organización de Tailwind, el CSS inicial se compone ordenando las tres capas con las correspondientes directivas @tailwind base, @tailwind components.... Todo esto fue materia de estudio del artículo de primeros pasos con TailwindCSS.

Ejemplo de organización del código por capas

Ahora vamos a suponer que queremos agregar algo de código a los estilos de la capa "base". Para ello tendríamos que escribir el CSS del proyecto de esta manera:

@tailwind base;

h1 {
  @apply font-light text-2xl mb-4;
}
h2 {
  @apply font-light text-xl mb-3;
}

@tailwind components;
@tailwind utilities;

Nos salimos del tema pero ¿Recuerdas qué significado tiene la directiva @apply? Simplemente sirve para aplicar en el CSS estilos que vienen de las clases de TailwindCSS. Por tanto, el código anterior sería equivalente a escribir:

@tailwind base;

h1 {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 1rem;
}
h2 {
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: .75rem;
}

@tailwind components;
@tailwind utilities;

Organizar el CSS aplicando la directiva @layer

Como el código CSS que queremos asignar a los encabezados H1 y H2 debería ser incluido como estilos de base, hemos tenido que escribir estas reglas de personalización propias después de "@tailwind base" y antes de "@tailwind components". Así cualquier estilo definido posteriormente sobrescribirá a los estilos de base.

Ahora vamos a ver este mismo código haciendo uso de la directiva @layer, que nos permite escribir el código CSS en cualquier lugar y asegurarnos que se incluya dentro de la capa correcta.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply font-light text-2xl mb-4;
  }
  h2 {
    @apply font-light text-xl mb-3;
  }
}

Simplemente usamos la directiva, indicando en qué capa queremos colocar el CSS, en este caso en la layer "base". Luego abrimos llaves y colocamos todas las reglas de estilo que el framework se encargará de situar en el lugar correcto, independientemente de dónde hayas escrito el anterior CSS.

Podríamos pensar que no tiene mucha diferencia y en parte es verdad. Sin embargo hay un detalle relevante y es que gracias a esta directiva podemos dejar el código de Tailwind, con las directivas @tailwind donde sea y el código adicional lo podré colocar en cualquier archivo CSS externo, importando ese archivo en donde me apetezca, pero asegurándome que se procese en la capa donde debe.

Ahora veremos un ejemplo para ser más claros, pero en resumen podría tener un @import que define estilos en los headings, que aparezca en cualquier parte del código CSS, independientemente de dónde haya colocado las directivas @tailwind.

Organización del código CSS

Ahora vamos a ver cómo podemos organizar el código CSS de un proyecto, beneficiándonos de la directiva @layer de Tailwind CSS. Para ello, colocaremos cada bloque de código CSS en archivos independientes, dado que es la mejor manera de mantener el código sencillo, escueto y en definitiva, mantenible.

Como cada parte del código CSS del proyecto estará en un archivo aparte, tendremos que incluirlo por medio de los tradicionales @import de CSS. Podríamos todavía hacer una organización un poco más interesante por medio de varias carpetas, donde tengamos alojadas las modificaciones que hacemos en cada capa.

Por ejemplo podríamos tener la carpeta "components" con componentes diversos del estilo de botones, tabs, etc. que usemos habitualmente. Por otra parte, podríamos tener una carpeta "base" con modificaciones base a los estilos sobre etiquetas como headings, listas, etc.

En esta arquitectura de carpetas podríamos tener un archivo raíz con todos los imports a los archivos donde tenemos separado el código por ámbitos.

@import './tailwind.css';
@import './components/button.css'
@import './base/headings.css';

Este sería el código del archivo "tailwind.css":

@tailwind base;
@tailwind components;
@tailwind utilities;

Este podría ser el archivo "base/headings.css":

@layer base {
  h1 {
    @apply font-light text-2xl mb-4;
  }
  h2 {
    @apply font-light text-xl mb-3;
  }
}

Este podría ser el código del archivo "components/buttons.css":

@layer components {
  .button {
    @apply inline-block px-3 py-2 text-sm tracking-wider uppercase rounded;
  }

  .button-blue {
    @apply text-white bg-blue-600;
  }
}

Fíjate que cada archivo inyecta código en una capa distinta, los headings en la layer "base" y los botones irían en la layer "components".

Conclusión

El enfoque de Tailwind es que tu código CSS no crezca mucho, dado que principalmente se usan las clases de utilidad dentro del código HTML. Sin embargo, hay motivos más que de sobra para crear ciertas clases dentro del proyecto con elementos que vamos a usar en diversas ocasiones, así como la asignación de código de base a ciertas etiquetas que nos venga bien tener de entrada.

Con estas guías podrás organizar el código CSS de tu proyecto de una manera avanzada, pues, aunque no vayas a crear demasiados archivos, siempre es útil tener el código por separado, en diversos ficheros pequeños, en vez de uno grande con todas las modificaciones de estilos.