驴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;
}
}