6. Directivas de Tailwind
"Una referencia para las funciones y directivas personalizadas que Tailwind expone a tu CSS"
.
Directives
"Las directivas son reglas personalizadas específicas de Tailwind que puedes utilizar en tu CSS y que ofrecen funcionalidades especiales para proyectos de Tailwind CSS."
Directiva es una instrucción que utiliza tailwind para insertar código en el archivo final de css que genera. Esto inyecta los estilos base de Tailwind y cualquier estilo base registrado por plugins, también inyecta las clases de componentes de Tailwind y cualquier clase de componente registrado por los plugins.
.
@tailwind
"Utiliza la directiva @tailwind para insertar los estilos base, components, utilities y variants de Tailwind en tu CSS."
/**
* Esto inyecta los estilos base de Tailwind y cualquier estilo base registrado por los plugins. Es la encargada de inicializar todos los elementos (div, span, ul, p, etc) de nuestro HTML sin estilo.
*/
@tailwind base;
/**
* Esto inyecta las clases de componentes de Tailwind y cualquier clase de componente registrada por los plugins. Nos permite acceder a todas las clases de tailwind.
*/
@tailwind components;
/**
* Esto inyecta las clases de utilidad de Tailwind y cualquier clase de utilidad registrada por los plugins.
*/
@tailwind utilities;
/**
* Utiliza esta directiva para controlar dónde Tailwind inyecta las variantes de cada clase, como hover, focus, responsive, dark mode, entre otras.
*
* Si se omite, Tailwind por defecto agregará estas clases al final de la hoja de estilos.
*/
@tailwind variants;
.
@layer
Utiliza la directiva @layer para indicar a Tailwind en qué "contenedor" pertenece un conjunto de estilos personalizados. Las capas válidas 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 moverá automáticamente el CSS dentro de cualquier directiva @layer al mismo lugar que la regla @tailwind correspondiente, por lo que no es necesario preocuparse por escribir el CSS en un orden específico para evitar problemas de especificidad.
Cualquier CSS personalizado agregado a una capa solo se incluirá en la compilación final si ese CSS se utiliza realmente en el HTML, al igual que todas las clases integradas en Tailwind por defecto.
Envolver cualquier CSS personalizado con @layer también permite utilizar modificadores con esas reglas, como hover: y focus:, o modificadores responsivos como md: y lg:.
.
@apply
Utiliza @apply para insertar cualquier clase de utilidad existente en tu propio CSS personalizado.
Esto es útil cuando necesitas escribir CSS personalizado (como para anular los estilos en una biblioteca de terceros), pero aún deseas trabajar con tus tokens de diseño y utilizar la misma sintaxis que estás acostumbrado a utilizar en tu 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 en línea con @apply tendrá !important eliminado por defecto para evitar problemas de especificidad:
/* Input */
.foo {
color: blue !important;
}
.bar {
@apply foo;
}
/* Output */
.foo {
color: blue !important;
}
.bar {
color: blue;
}
Si deseas aplicar @apply a una clase existente y hacerla !important, simplemente agrega !important al final de la declaración:
/* Input */
.btn {
@apply font-bold py-2 px-4 rounded !important;
}
/* Output */
.btn {
font-weight: 700 !important;
padding-top: .5rem !important;
padding-bottom: .5rem !important;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: .25rem !important;
}
Ten en cuenta que si estás utilizando Sass/SCSS, necesitarás utilizar la función de interpolación de Sass para que esto funcione:
.btn {
@apply font-bold py-2 px-4 rounded #{!important};
}
Usando @apply con CSS por componente.
Los frameworks de componentes como Vue y Svelte admiten la adición de estilos por componente dentro de un bloque <style> que se encuentra en cada archivo de componente.
Si intentas utilizar @apply con una clase personalizada que has definido en tu CSS global, dentro de uno de estos bloques <style> por componente, obtendrás un error indicando que la clase no existe.
main.css
@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);
}
}
Card.svelte
<div>
<slot></slot>
</div>
<style>
div {
/* Won't work because this file and main.css are processed separately */
@apply card;
}
</style>
Esto se debe a que, en los frameworks como Vue y Svelte, se procesa cada bloque <style> de manera independiente y se ejecuta la cadena de plugins de PostCSS en cada uno de ellos de forma aislada.
Esto significa que si tienes 10 componentes, cada uno con un bloque <style>, Tailwind se ejecuta 10 veces por separado y cada ejecución no tiene conocimiento de las otras. Debido a esto, cuando intentas utilizar @apply card en Card.svelte, falla, porque Tailwind no tiene idea de que la clase card existe, ya que Svelte procesó Card.svelte y main.css de manera completamente aislada.
La solución a este problema es definir cualquier estilo personalizado que desees @apply en tus componentes utilizando el sistema de plugins en su lugar:
tailwind.config.js
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 procesado por Tailwind que utilice este archivo de configuración tendrá acceso a esos estilos.
Sin embargo, sinceramente, la mejor solución es simplemente no hacer cosas raras como esta. Utiliza las utilidades de Tailwind directamente en tu marcado de la forma en que se supone que deben ser utilizadas, y no abuses de la función @apply para hacer cosas como esta, y tendrás una experiencia mucho mejor.
.
@config
Utiliza la directiva @config para especificar qué archivo de configuración debe usar Tailwind al compilar ese archivo CSS. Esto es útil para proyectos que necesitan utilizar diferentes archivos de configuración para diferentes puntos de entrada CSS.
@config "./tailwind.site.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
La ruta que proporcionas a la directiva @config es relativa a ese archivo CSS y tendrá prioridad sobre una ruta definida en tu configuración de PostCSS o en la CLI de Tailwind.
Ten en cuenta que si estás utilizando postcss-import, tus declaraciones @import deben venir antes de @config para que las cosas funcionen correctamente, ya que postcss-import cumple estrictamente con la especificación CSS que requiere que las declaraciones @import precedan a cualquier otra regla en el archivo.
❌ No coloques @config antes de tus declaraciones @import.
admin.css
@config "./tailwind.admin.config.js";
@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";
✔️ Coloca tus declaraciones @import antes de la directiva @config.
admin.css
@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";
@config "./tailwind.admin.config.js";
Documetanción
Si resumes esto, déjame tus apuntes abajo. 😺
