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:
- 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;
}
- Importar el CSS en tu componente
import "./mi-clase.css";
- Agrega la clase a tu HTML
<div class="mi-clase">...</div>
Equivalente en Tailwind:
- 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
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.
Recursos útiles
Recurso | Enlace |
---|---|
Documentación de Tailwind | https://tailwindcss.com/docs/editor-setup/↗ |
Tailwind Cheat Sheet | https://nerdcave.com/tailwind-cheat-sheet/↗ |
awesome-tailwindcss | https://github.com/aniftyco/awesome-tailwindcss/↗ |
Comunidad de Tailwind | https://github.com/tailwindlabs/tailwindcss/discussions/↗ |
Servidor Discord de Tailwind | https://tailwindcss.com/discord/↗ |
Canal de Youtube de TailwindLabs | https://www.youtube.com/tailwindlabs/↗ |
Tailwind Playground | https://play.tailwindcss.com/↗ |