Tailwind CSS

¿Qué es Tailwind CSS?

Tailwind CSS es un pequeño framework, utility-first↗, de CSS para construir diseños personalizados, sin el cambio de contexto que requiere el CSS normal. Es puramente un framework de CSS y no proporciona componentes o lógica preconstruida, y proporciona un conjunto muy diferente de beneficios↗ en comparación con una librería de componentes como Material UI.

Hace que CSS sea increíblemente fácil y rápido de escribir, como se muestra en el siguiente ejemplo:

Viejo CSS:

1. Escribir CSS, generalmente en un archivo separado

.mi-clase {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  padding: 1rem;
}

2. Importar el CSS en tu componente

import "./mi-clase.css";

3. Agrega la clase a tu HTML

<div class="mi-clase">...</div>

Equivalente en Tailwind:

1. Simplemente escribe clases en tu HTML

<div
  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
>
  ...
</div>

Cuando se usa junto con los componentes de React, es extremadamente potente para construir UIs (interfaces de usuario) rápidamente.

Tailwind CSS tiene un hermoso sistema de diseño incorporado, que sale de la caja con una paleta de colores cuidadosamente elegida, patrones de dimensionamiento para estilos como width/height y padding/margin para un diseño uniforme, así como puntos de quiebre para crear diseños responsive. Este sistema de diseño se puede personalizar y extender para crear la caja de herramientas exacta de los estilos que necesita tu proyecto.

Tru Narla mejor conocida como mewtru↗ dio una charla increíble de cómo construir un sistema de diseño utilizando Tailwind CSS↗.

Uso

Asegúrate de tener complementos de editor para Tailwind CSS instalados para mejorar tu experiencia escribiendo Tailwind.

Extensiones y complementos

• Extensión VSCode↗
• Integración de JetBrains↗
• Neovim LSP↗

Formateo

Las clases CSS de Tailwind pueden volverse un poco caóticas fácilmente, por lo que es imprescindible un formateo para las clases. El complemento de Prettier de Tailwind CSS↗ clasifica las clases en el orden recomendado↗ para que las clases coincidan con el paquete (bundle) CSS generado. Al seleccionar Tailwind CSS en la CLI, instalaremos y configuraremos esto para ti.

Aplicando clases condicionalmente

Agregar condicionalmente clases con operadores ternarios puede ser muy desordenado y difícil de leer. Estos paquetes ayudan a organizar tus clases cuando se usa lógica condicional.

• clsx↗
• classnames↗

Recursos útiles