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 o breakpoints 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 p-16px font-fuente1">

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

Ejercicio 1

Vamos a configurar un tema propio corporativo para una empresa, empleando la directiva @theme en nuestro CSS. El tema deberá tener:

Un color llamado corporativo, con un tono principal --color-corporativo: #3b82f6 y otro oscuro --color-corporativo-dark: #1e3a8a.
Una fuente personalizada titulo, con la fuente Georgia
Un breakpoint personalizado llamado tablet-pro en 900px

Con esto, crea una página que tenga un header con el color de fondo corporativo y, al llegar al breakpoint de tablet-pro, se cambie al color oscuro. El texto de la página debe usar la fuente titulo.

2. Transformaciones, filtros y animaciones¶

Veremos ahora cómo se abordan las transformaciones, transiciones y animaciones con los selectores de clase de Tailwind.

2.1. Transformaciones¶

Las transformaciones nos van a permitir modificar de forma instantánea la posición, orientacion, tamaño... de un elemento, a través de distintos selectores predefinidos:

Con rotate-{grados} establecemos la rotación del elemento. También podemos indicar -rotate-{grados} para rotar en negativo. Podemos acompañarlo del selector origin-{origen} para indicar el punto de origen de la rotación (por defecto es origin-center). Además, disponemos de los modificadores rotate-x-{grados}, rotate-y-{grados} y rotate-z-{grados} para indicar el eje de rotación (por defecto se usa el eje Z)
De forma análoga podemos usar translate-{distancia} (y todas las variantes adicionales, en negativo, y para cada eje) para desplazar un elemento desde su posición original.
También de forma similar podemos escalar elementos con scale-{porcentaje}, dando el porcentaje sin el símbolo (por ejemplo, scale-50 para escalar a la mitad). Admite también variante negativa y por ejes.
Finalmente, podemos indicar la inclinación o deformación con skew-{factor}, admitiendo también por ejes.

2.2. Filtros sobre imágenes y cajas¶

Disponemos de algunos selectores especiales para aplicar algunos filtros básicos sobre imágenes o cajas:

Por ejemplo, podemos aplicar un desenfoque (blur) con el selector blur, seguido del grado de desenfoque (sm, md... Por ejemplo, blur-lg).
También podemos modificar el brillo de una imagen o fondo con brightness seguida de un porcentaje (ejemplo: brightness-125).
El contraste se altera con el selector contrast, seguido de un porcentaje como el caso anterior.
Podemos convertir una imagen a escala de grises con grayscale y el porcentaje, que indicará el grado de conversión a grises. Del mismo modo se puede convertir a tono sepia con sepia.
La saturación de color la podemos definir con saturate y un porcentaje.
Existen otros efectos que se pueden aplicar. Los puedes consultar aquí.

Ejercicio 2

Crea una página que cargue una imagen que inicialmente se verá desenfocada y en escala de grises. Al pasar el ratón por encima (pseudoclase hover), la imagen recuperará su color y nitidez originales.

2.3. Transiciones¶

Para aplicar un efecto de transición en un elemento, y pasar de un estado a otro en un período de tiempo, se emplea el selector base transition seguido de algunos modificadores, dependiendo del efecto que queramos aplicar:

Para activar transición en todas las propiedades CSS soportadas podemos usar transition o transition-all
Para cambios de color (en fondos, textos, bordes...) se emplea transition-color
Para cambios de opacidad, transition-opacity
Para cambios de transformación, transition-transform
También podemos indicar distintas propiedades a transicionar entre corchetes: transition-[opacity,transform]

Además, con duration podemos especificar la duración de la transición en milisegundos normalmente (duration-200), y con ease la curva de animación (ease-in, ease-in-out, ease-linear...). Si queremos aplicar algún retraso inicial se hace con delay en milisegundos (delay-100).

Aquí vemos un ejemplo donde se aplican transiciones de color de fondo y escalado a una caja:

<div class="size-16 transition-[background-color,scale] ease-in delay-100 hover:scale-110 hover:bg-blue-300 bg-blue-500"></div>

Ejercicio 3

Define una página con un botón que diga Comprar. Añade una transición que afecte tanto al color de fondo como a la transformación, y al pasar el ratón por encima se hará lo siguiente:

El escalado subirá un 10%
Se rotará levemente 3 grados
Se cambiará el color de fondo a otro
Todo durará 400ms con efecto de salida suave (ease-out)

2.4. Animaciones¶

Tailwind proporciona algunas animaciones predefinidas a través del selector animate, como son animate-spin (girar), animate-ping (cambiar tamaño y opacidad), animate-pulse (opacidad) o animate-bounce (arriba y abajo). También podemos definir animaciones en un tema y darles un nombre para usarlo en nuestro HTML. Por ejemplo, así definiríamos una rotación de balanceo para girar alternativamente un poco a izquierda y derecha:

@import "tailwindcss";

@theme 
{
  --animate-balanceo: balanceo 1s ease-in-out infinite;
  @keyframes balanceo 
  {
    0%,
    100% 
    {
      transform: rotate(-15deg);
    }
    50% 
    {
      transform: rotate(15deg);
    }
  }
}

Luego podríamos aplicarla con class="animate-balanceo".

3. Uso de pseudoclases¶

Podemos gestionar directamente las pseudoclases de CSS en nuestros estilos Tailwind poniéndolas con dos puntos delante de los estilos a aplicar. Ya hemos visto algún ejemplo antes con hover, y del mismo modo se pueden aplicar a otros estados de botones o enlaces, por ejemplo:

<button class="border border-blue-300 active:shadow-md active:shadow-blue-500/40">...

Del mismo modo podemos emplear otras pseudoclases como first, last, even, odd... y combinarlas incluso con otras:

<!-- En gris los elementos pares de la lista -->
<li class="even:bg-gray-200">...</li>

<!-- En azul el primer párrafo, al pasar el ratón por encima -->
<p class="first:hover:text-blue-500">...</p>

Nota

La pseudoclase hover afecta al elemento en sí (cuando pasemos el ratón sobre él). Existe otra pseudoclase llamada group-hover que afecta desde un contenedor a sus hijos: cuando pasemos el ratón por el contenedor, se aplica el efecto a sus hijos.

3.1. Validación¶

Un grupo particular de pseudoclases son las que se refieren a validación y estado de campos de formularios. Disponemos de selectores como valid o invalid para aplicar estilos a campos dependiendo de si son válidos o no. Existen variantes como user-valid o user-invalid que se aplican sólo cuando el usuario ya ha interactuado con el control. Además, se tienen otras como checked o disabled para estilos cuando un campo está marcado (checkboxes o botones de radio) o cuando está deshabilitado.

<input type="text" class="user-invalid:border-red-500 user-valid:border-green-500...">

3.2. Otras combinaciones¶

Estos selectores se pueden combinar con otros, como has, para aplicar estilos en función del estado de nodos hijo. Por ejemplo, este código aplica un fondo a la etiqueta si tiene algún nodo hijo marcado (checked):

<label class="has-checked:bg-indigo-50...">
    Texto de la etiqueta
    <!-- El propio radio button también se marca con otro color si se pulsa -->
    <input type="radio" class="checked:border-indigo-500...">
</label>

También podemos emplear not para aplicar estilos si no se cumple cierta condición. Por ejemplo, así aplicamos estilos si pasamos el ratón por encima de un elemento que no tiene el foco:

<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">

Podéis consultar más información sobre pseudoclases y combinaciones en la documentación oficial.

Ejercicio 4

Crea un formulario que tenga estos elementos:

Un cuadro de texto de tipo email que sea obligatorio (required). Cuando el usuario haya interactuado con él y no deje un valor correcto, se le pondrá un borde y fondo rojos.
Un label que contenga dentro un checkbox, de modo que, cuando éste esté marcado, todo el contenedor cambiará a verde claro, y el propio checkbox se pintará de verde oscuro.

4. Personalización de clases¶

Como hemos visto en algunos ejemplos anteriores, muchos selectores de Tailwind admiten valores personalizados si los ponemos entre corchetes. Si el valor asignado tuviera espacios, se sustituyen por subrayados. Aquí vemos algunos ejemplos:

<p class="w-[80%]">...</p>
<div class="grid grid-cols-[1fr_500px_2fr]">

Sin embargo, esto es un "lunar" en la filosofía de Tailwind, ya que se recomienda usar las clases predefinidas, o crear nuestro propio tema con el fin de tener una mayor homogeneidad en el estilo de la página. Además, por cada valor personalizado que ponemos el CSS que genera Tailwind es más pesado.

Por otra parte, si queremos emplear variables CSS propias (ajenas a la sintaxis que hemos visto aquí), se ponen entre paréntesis:

<p class="text-(--my-color)">Hello</p>

Además, recuerda que puedes añadir tu propio CSS combinado con el de Tailwind, como ya se comentó en el documento de introducción, organizándolos en capas: capa base para estilos simples (colores de encabezados, por ejemplo) o capa components para estilos más complejos que definan un componente, como por ejemplo, una tarjeta. En este caso podemos emplear la directiva @apply si queremos aplicar clases Tailwind directamente para formar el componente:

@layer components 
{
  .card 
  {
    @apply bg-white rounded-lg p-1.5 shadow-xl; 
  }
}

Ejercicio 5

Crea una página que tenga estos elementos:

Un div que tenga exactamente 432 píxeles de ancho (usando corchetes en el selector de Tailwind), y un color de texto definido en una variable CSS nativa llamada --mi-color-raro (que deberás definir en tu CSS).
En la capa de componentes, crea una clase .btn-fancy y, usando @apply, aplícale bordes redondeados, padding personalizado y sombra elevada. Utiliza esta clase en dos botones distintos dentro de la página.