Otras opciones avanzadas¶

1. Uso de variables de tema¶

Tailwind permite añadir nuestras propias variables para crear temas personalizados. Para ello deberemos crear una directiva @theme en nuestro CSS y crear las variables dentro:

@import "tailwindcss"

@theme {
    ...
}

1.1. Crear nuevos colores¶

Podemos definir nuevos colores definiéndolos como variables internas a esa directiva @theme con el prefijo --color.

@import "tailwindcss"

@theme {
    --color-personalizado: rgb(129, 30, 45);
}

Una vez hayamos definido el color en el tema, Tailwind lo propaga para que podamos usarlo en las utility classes:

<div class="bg-personalizado">

Del mismo modo podemos definir distintas tonalidades de ese color como variables independientes:

@import "tailwindcss"

@theme {
    --color-personalizado-200: rgb(129, 30, 45);
    --color-personalizado-500: rgb(100, 30, 45);
}

1.2. Crear nuevos breakpoints¶

A la hora de personalizar el diseño responsive, también podemos definir breakpoints personalizados. Incluso podemos utilizar la palabra clave initial para borrar cualquier otro previo que pueda haber, y definir sólo los nuestros:

@import "tailwindcss";

@theme {
    --breakpoint-*: initial;
    --breakpoint-tablet: 40rem;
    --breakpoint-portatil: 64rem;
    --breakpoint-escritorio: 80rem;
}

1.3. Otras variables¶

Del mismo modo que se definen colores, podemos añadir nuevas variables al tema. Debemos tener la precaución de asociar a cada una un prefijo determinado, dependiendo de para qué las vayamos a usar. Algunos prefijos habituales:

font-: para estilos de fuente
text-: para tamaños de fuente
spacing-: para estilos de espaciado y tamaño
...

Veamos un ejemplo:

@import "tailwindcss";

@theme {
    --color-personalizado: rgb(129, 30, 45);
    --font-fuente1: Great Vibes, cursive;
    --spacing-16px: 16px;
}

Después, aplicamos estas propiedades en nuestro HTML en las utilidades correspondientes (fuente y tamaño, respectivamente, en el caso anterior):

<div class="bg-personalizado-500 p-16px font-fuente1">

Podéis consultar más información sobre uso de variables de tema en la documentación oficial.