Utilities
En tailwind una utility es una clase, por ejemplo el utility text-sm representa el siguiente css.
.text-sm {
font-size: 12px;
}
El utility flex se refiere a la siguiente clase.
.flex {
display: flex;
}
Esto permite una gran flexibilidad, ya que podemos combinar estas utilities y eso es todo. No hay que estresarse con escribir clases css para solucionar los mismos problemas una ves tras otra.
Tailwind Play
La herramienta Tailwind Play nos permite escribir código que podemos visualizar inmediatamente en el navegador.
Estaremos utilizando esta herramienta a lo largo de las siguientes lecciones para familiarizarnos con su uso y poder aprender a utilizar Tailwind CSS.
Ejemplo del uso de la Tailwind Play
Borramos todo el contenido existent y agregamos el siguiente hola mundo.
<h1 class="text-center text-lg text-blue-400">Hola Mundo</h1>
En el panel de previsualización veremos el texto “Hola Mundo” centrado y en color azul. Esto es porque las utilities que hemos utilizado le dan estos estilos a la etiqueta h1.
Expandimos el tab “Generated CSS > Utilities” y nos encontraremos con el CSS que se ha generado cuando combinamos todas estas utilities.
.text-center {
text-align: center;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-blue-400 {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity));
}
Si cambiamos los valores, estos valores de css también cambiaran.
JIT Compiler
Tailwind no se limita al uso de las clases predefinidas, sino que implementa clases que se pueden definir en tiempo de ejecución, es decir mediante JIT “Just In Time Compiler” (Compilación en tiempo de ejecución).
Por ejemplo, si deseamos una clase para una fuente de un tamaño de 13px, la cual no existe de manera predefinid en tailwind, podemos utilizar la sintaxis especial para creación de clases en tiempo de ejecución.
<p class="text-center text-[25px] font-light">Un párrafo</p>
En este ejemplo hemos definido que el tamaño de nuestro texto debe ser de 25px, que es un css generado en tiempo de ejecución mediante la sintaxis de los corchetes.
Combinación de las utilities
Al combinar utilities en tailwind nos aseguramos que nuestra aplicación luce sencilla, profesional y contiene solo los estilos que son necesarios para para nuestro proyecto. Esto favorece a incrementar el proceso de desarrollo, proveer estilos personalizados, mantener la consistencia del css en los ambientes de desarrollo y producción y mejorar la manera en que los sitios web se comportan en la gama de diferentes navegadores.
No se requiere nada mas, solo empezar a utilizar tailwind, y tendremos la opción de compilación JIT como parte de nuestro trabajo día a día.
Layout y Flexbox
Cuando hablamos de Layout, nos referimos a la organización y posicionamiento de nuestros elementos dentro de un diseño en nuestro sitio web. Tailwind provee diferentes utilidades para el soporte de diferentes propiedades como: Aspect Ratio, Box Sizing, Float, Position, Overflow y Z-Index, aunque la mayoría del tiempo las propiedades que utilizaremos serán: display, position y overflow.
Position
La propiedad position determina la forma como un elemento HTML se posiciona dentro de su elemento contenedor o dentro de todo el área contenedora de un sitio web.
Position Relative
El primer valor posible de position es relative que define que es el comportamiento natural, y obliga a los elementos que lo contienen a que su position utilice como referencia la posición de este elemento respecto al espacio total de la página web.
Position Absolute
El segundo valor es absolute que permite a los objetos moverse de forma absoluta dentro del espacio de su contenedor (si este es relative) o del contenedor padre mas cercano que sea relative, o de la página misma si no hay un elemento relative en toda la jerarquía de elementos que lo contienen.
Position Fixed
El tercer valor posible es fixed, este le indica al elemento que debe quedarse fijo en la posición en la que se encuentra, aún cuando el usuario haga scroll al contenido de la página web.
Ejemplo:
Position Sticky
Finalmente sticky es actúa de manera similar a fixed, pero en este caso el elemento se queda fijo a partir de cuando el usuario scrollea la página más allá de donde se encuentra localizado el elemento con la propiedad stick.
Ejemplo: Un botón que se posiciones siempre (fixed) en la parte inferior derecha.
<div class="fixed w-20 p-5 bg-red-500 bottom-0 right-0 text-white">Botón</div>
Tailwind utiliza nomenclaturas iguales o similares a las de CSS para hacer sencillo su uso y proceso de aprendizaje.
Display
Display determina la forma en la que un elemento se comporta en términos del Layout y visibilidad dentro del documento. Es decir controla la forma en la que los elementos son desplegados. Los posibles valores de display son: block, inline, inline-block, none, flex y grid. De la misma manera que con position, podemos utilizar estos valores directamente en tailwind.
Ejemplo: Mediante flexbox centrar tres círculos azules con espacio alrededor.
<div class="flex justify-center space-x-6 justify-evenly">
<div class="p-5 rounded-full bg-blue-500"></div>
<div class="p-5 rounded-full bg-blue-500"></div>
<div class="p-5 rounded-full bg-blue-500"></div>
</div>
Una forma de aprender a utilizar flexbox es mediante el juego interactivo Flexbox Froggy, este juego interactivo te permite ir asimilando los conceptos de flexbox de forma natural conforme vas avanzando en los niveles de dificultad.
Ejemplo: Mediante grid crear un tabulador de datos
En este ejemplo vemos como mediante tailwind es posible generar una matriz de 3 columnas, y dicho valor puede ser ajustado de manera muy sencilla.
<div class="grid grid-cols-3 gap-5 text-white text-center">
<div class="bg-violet-500 pt-5 pb-5">1</div>
<div class="bg-violet-500 pt-5 pb-5">2</div>
<div class="bg-violet-500 pt-5 pb-5">3</div>
<div class="bg-violet-500 pt-5 pb-5">4</div>
<div class="bg-violet-500 pt-5 pb-5">5</div>
<div class="bg-violet-500 pt-5 pb-5">6</div>
</div>
La impresión que podemos tener de tailwind es que estamos escribiendo inline-styles (código css directamente dentro de las etiquetas) y esto en cierta forma es verdad. Pero conforme avanzamos en el uso de tailwind nos vamos dando cuenta de la simplicidad y la cantidad de beneficios que su uso aporta, especialmente reduciendo la dependencia a archivos css adicionales y el trabajo que requiere estar experimentando con ellos hasta obtener el resultado esperado.
Media Queries
El uso de media queries para crear diseños responsivos es una tarea muy sencilla de realizar con tailwind. Para ello se ofrecen breakpoints (puntos de quiebre) para las resoluciones de los dispositivos móviles de y escritorio mas comunes.
| Modificador | Media Query |
|---|---|
| max-sm | @media not all and (min-width: 640px) |
| max-md | @media not all and (min-width: 768px) |
| max-lg | @media not all and (min-width: 1024px) |
| max-xl | @media not all and (min-width: 1280px) |
| max-2xl | @media not all and (min-width: 1536px) |
Por default tailwind utiliza los estilos para la resolución max-sm, es decir para la de 0 a 640 pixeles de ancho.
Ejemplo: Mediante tailwind mostrar un texto a partir de los 768px
Utilizando media queries vamos a mostrar un bloque de texto a partir de la resolución md.
<div class="md:block hidden">
Esto es solo visible a partir de resoluciones de 768px.
</div>
Si redimensionamos la previsualización del tailwindplay, podremos ver que cuando esta es menor de 768 pixeles, el texto no se muestra.
Si quisiéramos tener el comportamiento opuesto, es decir que el texto se muestre solo cuando la resolución es menor, utilizaríamos el prefijo max-.
<div class="max-md:block hidden">
Esto es solo visible a partir de resoluciones de 768px.
</div>
Dark Mode (Modo Oscuro)
En el diseño de interfaces modernas se hace necesario tener dos opciones disponibles: light y dark theme. Definir reglas para ambos temas en tailwind es una tarea sencilla de realizar.
Antes de empezar vamos a realizar cambios en la configuración para incluir clases para el dark mode.
Dentro de tailwindplay ve a la sección Config dentro de las tabs. La configuración en este momento es la siguiente.
/** @type {import('tailwindcss').Config} */
export default {
theme: {
extend: {
// ...
},
},
plugins: [],
}
Podemos definir el valor del valor de darkMode con un valor específico.
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
theme: {
extend: {
// ...
},
},
plugins: [],
}
Si no especificamos esta clase, el diseño se adaptará automáticamente a los valores del sistema operativo. Por lo que solo especificaremos este valor cuando queramos proveer una opción (botón) para habilitar la opción Dark Mode (Modalidad Oscura).
Ejemplo del uso de Dark Mode
Vamos a generar una tarjeta con sombra y fondo blanco, cuando demos clic al botón, este cambiará el fondo a negro y el color del texto a uno adecuado a un fondo oscuro.
<div
class="m-10 rounded-lg bg-white px-5 py-8 shadow-xl ring-1 ring-slate-900/5 dark:bg-black"
>
<h3
class="text-base font-medium tracking-tight text-slate-900 dark:text-white"
>
Este es un texto
</h3>
<p class="mt-2 text-sm text-slate-500 dark:text-blue-100">
Este es un texto mas largo aún
</p>
<button
id="toggleDark"
class="text-blue-900 px-4 py-2 text-sm font-medium mt-8 bg-blue-100 rounded-md"
onclick="document.body.classList.toggle('dark')"
>
Toggle Dark Mode
</button>
</div>
Incluir estilos personalizados
Existen dos formas de incorporar estilos personalizados en Tailwind CSS.
Supongamos que vamos a incluir un nuevo color, un tamaño de fuente, un fondo y un padding wut no se encuentran entre los estilos de Tailwind CSS.
<p class="text-2xl text-[18px] text-[#973F29] bg-[#dedede] p-[16px]">
Color personalizado
</p>
Ahora imaginemos que este código se repite constantemente a través de múltiples etiquetas. El mantener posibles cambios se convertiría en una tarea bastante repetitiva y completa. Para ello vamos a hablar de la configuración de Tailwind CSS. Vamos a la pestaña de Config y dentro de la sección extend vamos a agregar un nuevo color.
/** @type {import('tailwindcss').Config} */
export default {
theme: {
extend: {
colors: {
chesnut: '#973F29',
},
},
},
plugins: [],
}
<p class="text-2xl text-[18px] text-chesnut bg-[#dedede] p-[16px]">
Color personalizado
</p>
Podemos ver que hemos reemplazado el valor numérico en el html por el nombre del color.
En los ejemplos anteriores hemos creado ejemplos con una combinando una larga lista de clases, sin embargo esto puede ser simplificado para hacer el código mas sencillo.
Reutilizar estilos
1. Rompiendo el código en componentes específicos reutilizables
Esta forma de trabajar se utiliza cuando echamos mano de frameworks como React, en donde los botones, inputs, y otro tipo de componentes son reutilizados a través del proyecto.
2. Utilizar las directivas
Dentro de la tab CSS existen alguna sentencias predefinidas.
| Sentencia | Propósito |
|---|---|
| @tailwind base | Utilizados de manera global a través de todo el proyecto. |
| @tailwind components | Utilizados en los elementos reutilizables. |
| @tailwind utilities | Estilos atómicos (margenes, padding, fuentes, etc.). |
Vamos a retomar el código que vimos anteriormente.
<div
class="m-10 rounded-lg bg-white px-5 py-8 shadow-xl ring-1 ring-slate-900/5 dark:bg-black"
>
<h3
class="text-base font-medium tracking-tight text-slate-900 dark:text-white"
>
Título aquí
</h3>
...
</div>
Dentro de CSS expandimos components agregando la clase .card que contendrá todos los estilos del div contenedor.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
@apply m-10 rounded-lg bg-white px-5 py-8 shadow-xl ring-1 ring-slate-900/5 dark:bg-black;
}
}
Ahora aplicamos este estilo dentro del html original.
<div class="card">
<h3
class="text-base font-medium tracking-tight text-slate-900 dark:text-white"
>
Título aquí
</h3>
...
</div>
3. Utilizando librerías de componentes
Existent algunas librerías de componentes de uso frecuente como botones, campos de formulario, etc.
Mitos alrededor de Tailwind CSS
Uno muy común es pensar que estamos escribiendo inline-styles (código css sobre las mismas etiquetas), en realidad lo que estamos haciendo es echar mano de una combinación de clases, que a su ves combinan una serie de estilos.
No es posible utilizar propiedades avanzadas como las pseudo-classes dentro de los inline-styles y tampoco es posible escribir media queries utilizando inline styles.
Los utilities nos brindan la posibilidad de reutilizar esta combinación de clases para formar otras clases, y esto no es posible con inline-styles.
¿Cómo memorizar todas las clases de Tailwind CSS?
Al igual que con las propiedades de styles, esto requiere un uso constante de la sintaxis. Conforme vayas repitiendo el uso de la sintaxis de Tailwind CSS te iras familiarizando hasta que llegue el momento en que no sea necesario revisar nuevamente la documentación.
Una forma rápida de obtener ayuda rápida es utilizando el sitio tailwindcss.com e ingresar en el campo de búsqueda algunos términos para explorar la documentación.