¿Qué son las directivas de Tailwind CSS?
Las directivas son un tipo de reglas que ofrecen funcionalidad especial para crear proyectos en Tailwind CSS.
@tailwind
La directiva @tailwind permite insertar base , components , utilities y variants en tu CSS.
/* Injecta los estilos base y cualquier estilo registrado por plugin */
@tailwind base;
/* Injecta los clases de los componentes y cualquier clase de componente registrada por un plugin */
@tailwind component;
/* Injecta las clases de las utilidades y cualquier clase de alguna utilidad registrada por un plugin */
@tailwind utilities;
/* Utiliza esto para controlar en donde Tailwind inyecta los estilos, si se omite los estilos se inyectan al final. */
@tailwind variants;
@layer
Utiliza la directiva @layer para indicarle a Tailwind a que bucket pertenece un grupo de estilos personalizados. Las capas posibles son base , components y utilities .
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}
@layer components {
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
}
@layer utilities {
.filter-none {
filter: none;
}
.filter-grayscale {
filter: grayscale(100%);
}
}
Tailwind mueve automáticamente el CSS dentro de cualquier directiva @layer al mismo lugar de la correspondiente regla @tailwind , de forma que no es necesario preocuparse por realizar cambios en el CSS en un orden específico.
Cualquier CSS personalizado que es agregado a una de estas capas será incluido únicamente si este ha sido utilizado dentro del HTML, de la misma manera que cualquier clase que viene por default en Tailwind.
Encerrar cualquier CSS dentro de @layer también provoca que sea posible utilizar modificadores con esas reglas, como hover: y focus: o modificadores responsivos como md: y lg: .
@apply
Utiliza @apply para usar cualquier clase inline de Tailwind dentro de tu propio CSS.
Esto es útil cuando necesitas escribir tu propio CSS pero deseas utilizar las funcionalidades de Tailwind que usas directamente en HTML.
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply border border-gray-300 rounded;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
Cualquier regla aplicada mediante @apply pasa por un filtro que remueve !important para evitar errores. Si deseas aplicar !important
/* entrada */
.foo {
color: blue !important;
}
.bar {
@apply foo;
}
/* resultado */
.foo {
color: blue !important;
}
.bar {
color: blue;
}
Si deseas aplicar @apply a una clase existente y mantener !important , simplemente agrega !important al final de la línea donde se utilizan las clases.
/* entrada */
.btn {
@apply font-bold py-2 px-4 rounded !important;
}
/* salida */
.btn {
font-weight: 700 !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: 0.25rem !important;
}
Utilizando @apply con componentes
Los componentes de frameworks como Vue y Svelte soportan el concepto de per-component styles, es decir que se puede incluir dentro de ellos un bloque style en cada componente.
Si intentas aplicar @apply a una clase que has definido de forma global dentro de CSS en unos de bloques <style> en alguno de los componentes, obtendrás un error que indica que la clase no existe.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
background-color: theme(colors.white);
border-radius: theme(borderRadius.lg);
padding: theme(spacing.6);
box-shadow: theme(boxShadow.xl);
}
}
<div>
<slot></slot>
</div>
<style>
div {
/* No funcionará porque este archivo y main.css son procesados de forma separada */
@apply card;
}
</style>
Esto se debe a que los frameworks como Vue y Svelte procesan cada bloque <style> de manera individual, y ejecutan el plugin PostCSS de cada uno también de forma individual.
Esto quiere decir que si tienes 10 componentes cada uno con el bloque <style> , Tailwind se ejecutará 10 veces de forma separada, y cada uno de los componentes tendrá un conocimiento nulo acerca de la ejecución de los otros. Debido a esto cuando utilizas @apply card en Card.svelte falla, debido a que Tailwind no tiene idea de que la clase card existe ya que Card.svelte y main.css se procesan individualmente.
La solución a este problema es definir cualquier estilo propio que desees utilizar con @apply utilizando el sistema de plugins.
const plugin = require('tailwindcss/plugin')
module.exports = {
// ...
plugins: [
plugin(function ({ addComponents, theme }) {
addComponents({
'.card': {
backgroundColor: theme('colors.white'),
borderRadius: theme('borderRadius.lg'),
padding: theme('spacing.6'),
boxShadow: theme('boxShadow.xl'),
},
})
}),
],
}
De esta manera, cualquier archivo que se procese por Tailwind utiliza este archivo de configuración para acceder a dichos estilos.
Al final siempre la recomendación es evitar este tipo de soluciones y seguir la filosofía de Tailwind, que consiste en usar directamente las clases que vienen preparadas para ello.
@config
La directiva @config especifica que archivo de Tailwind se debe utilizar cuando se compile el archivo CSS. Esto es útil cuando se tiene un proyecto con diferentes archivos CSS de entrada.
/* site.css */
@config "./tailwind.site.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
/* admin.css */
@config "./tailwind.admin.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
La ruta que proveas a la directiva @config es relativa al archivo CSS, y tomará precedencia sobre la que se defina en la configuración de PostCSS y del CLI de Tailwind.
Toma en cuenta que si estas usando postcss-import , el @import debe declararse antes de @config .
@import 'tailwindcss/base';
@import './custom-base.css';
@import 'tailwindcss/components';
@import './custom-components.css';
@import 'tailwindcss/utilities';
@config "./tailwind.admin.config.js";
Funciones
Tailwind provee algunas funciones que se pueden usar en tu CSS para acceder a algunos valores de la configuración.
Estas funciones son evaluadas en tiempo de ejecución, y reemplazadas por valores estáticos en tu archivo final CSS.
theme()
La función theme() permite acceder a la configuración de Tailwind utilizando la notación de punto.
@tailwind base;
@tailwind components;
@tailwind utilities;
.area-de-contenido {
padding: theme(spacing.12);
background-color: theme(colors.white);
}
<div class="min-h-screen bg-slate-500 p-10">
<div class="area-de-contenido">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod, atque!
</div>
</div>
Si necesitas utilizar un valor que incluya puntos y por ende rompa esta notación, encierra el valor en corchetes.
@tailwind base;
@tailwind components;
@tailwind utilities;
.area-de-contenido {
padding: theme(spacing[2.5]);
background-color: theme(colors.white);
}
Utiliza la notación encadenada de puntos para acceder valores dentro de otros valores.
.btn-blue {
background-color: theme(colors.blue.500);
}
Para ajustar el color y opacidad utilizando la función theme, usa el valor seguido de la opacidad.
.btn-blue {
background-color: theme(colors.blue.500 / 75%);
}
screen()
La función screen permite crear media queries que referencian los nombres de los breakpoints en lugar de duplicar sus valores dentro de tu propio CSS.
<div class="main-area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium,
veniam.
</div>
@tailwind base;
@tailwind components;
@tailwind utilities;
.main-area {
@screen sm {
padding: 30px;
background-color: #fff;
font-size: 50px;
}
}