Personalizar clases
Muchas clases de Tailwind admiten valores personalizados simplemente poniéndolo entre corchetes. Este será el valor que le asignarán a la propiedad CSS que modifica dicha clase.
Sin embargo, aunque esto supone una ventaja adicional de cara a la personalización que ofrece Tailwind, se recomienda siempre que sea posible, usar las clases predefinidas o crear nuestras propias variantes en el tema. Esto se debe a que cada vez que asignamos un valor personalizado, obligamos a Tailwind a crear una nueva clase CSS en lugar de reutilizar una de las existentes del Framework, lo que implica un CSS final más pesado.
Valores personalizados
Para personalizar el valor de una propiedad, basta con asignarlo entre corchetes a la clase correspondiente de Tailwind. Puede ser cualquier valor admitido por CSS
<p class="w-[80%] p-[1.1em] text-[20px] text-[aquamarine] bg-[darkgreen]">Hello</p><section class="grow grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-2">
<!-- ... -->
</section>Importante: Si el valor contiene espacios en blanco, no los pongas, ya que ese carácter se usa para separar las clases CSS. En su lugar, utiliza el guión bajo o subrayado '_'.
<div class="grid grid-cols-[1fr_500px_2fr]">
<!-- ... -->
</div>Variables como valor
Si queremos utilizar una variable CSS como valor personalizado, simplemente debemos escribirla entre paréntesis.
<!-- Ambas son equivalentes (se recomienda la primera)-->
<p class="text-(--my-color)">Hello</p>
<p class="text-[var(--my-color)]">Hello</p>Custom CSS
Si lo necesitas, puedes añadir tu propio CSS y combinarlo con Tailwind, aunque siempre que sea posible, por eficiencia y consistencia, se recomienda usar las clases de Tailwind.
Aunque estemos añadiendo CSS aparte, puedes utilizar siempre que sea posible las variables de Tailwind para matener la mayor consistencia posible en el proyecto.
Si, por ejemplo, necesitas añadir algunos estilos por defecto (base) a ciertos elementos HTML, se recomienda añadirlos dentro del layer base.
@layer base {
h1 {
font-size: var(--text-2xl);
}
h2 {
font-size: var(--text-xl);
}
}Para crear componentes CSS como card, button, ... , o básicamente clases que representen un concepto en la aplicación en lugar de una propiedad CSS, usariamos el layer components.
@layer components {
.card {
background-color: var(--color-white);
border-radius: var(--radius-lg);
padding: --spacing(6);
box-shadow: var(--shadow-xl);
}
}Aplicar clases Tailwind a un selector CSS (@apply)
A nuestros selectores CSS podríamos aplicarles directamente propiedades CSS utilizando clases de Tailwind. Para ello usaríamos la directiva @apply.
@layer components {
.card {
@apply bg-white rounded-lg p-1.5 shadow-xl;
}
}En general se recomienda esta aproximación cuando queremos modificar estilos de componentes creados por otras librerías que no usan Tailwind, ya que entre otras cosas, estamos generando CSS extra en nuestra aplicación.
Si parece que estamos repitiendo mucho las clases en diferentes elementos (por ejemplo, tenemos varios elementos de tipo card o botón), la recomendación es utilizar un framework moderno como Angular, Vue, o React entre otros, y dividir el código en componentes o directivas reutilizables que encapsulen estos estilos.
Custom Utilities
Podemos añadir utility classes propias a Tailwind con la diretiva @utility seguida del nombre. Dentro podemos poner propiedades CSS que Tailwind no cubre, tal vez porque sean muy nuevas o específicas.
@utility content-auto {
content-visibility: auto;
}