Tabla de contenidos
Introducción a Tailwind CSS
Por si todos estos problemas no fueran pocos, el resultado de tan intensa batalla contra el CSS será un código que crece y se extiende como un incendio a medida que añadimos nuevos componentes y vistas a nuestra aplicación.
Este monstruoso código es además muy difícil de leer para otros e incluso para ti mismo, ya que después de crear cientos o miles de clases CSS para etiquetar tu HTML y darle estilo nos quedaremos sin ganas ni imaginación para elegir identificadores con un mínimo de sentido y estaremos cayendo en la trampa de crear una interminable API de estilos que solo sirve para este proyecto.
<div class="wrapper">
<div class="inner-wrapper">
<div class="more-inner-wrapper">
<button></button>
</div>
</div>
</div>Tailwind CSS es la respuesta a todos los problemas que acabamos de plantear y en esta publicación vamos a hacer un tour por las principales funcionalidades del framework y mostrando algunos ejemplos de código.
¿Qué es Tailwind CSS?
¿Te imaginas lo increíble que sería maquetar todo tu proyecto sin escribir ni una línea de CSS que mantener? Pues ahora es posible.
En pocas palabras, Tailwind es un framework de desarrollo en CSS diseñado para aplicar estilos a tu web rápida y eficazmente.
Sin perder de vista el HTML, la forma de maquetar nuestras vistas es añadiendo a los elementos todas las clases de utilidad que necesitemos. Cada una de estas clases aplica una única propiedad CSS y existen clases para todas las propiedades con un set de valores posibles.
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<blockquote>
<p class="text-lg font-medium">
?Tailwind CSS is the only framework that I've seen scale
on large teams. It?s easy to customize, adapts to any design,
and the build size is tiny.?
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-sky-500 dark:text-sky-400">
Sarah Dayan
</div>
<div class="text-slate-700 dark:text-slate-500">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>Se utilizan clases para modificar el tamaño de los elementos, sus colores o la tipografía.
Un super punto positivo para el framework es que cuenta con una documentación muy completa y repleta de ejemplos sobre la instalación en diferentes entornos y el uso de cada una de sus funcionalidades.
¿Pero cómo sabe Tailwind qué reglas de espaciado, paleta de colores y fuente de texto estamos utilizando en el proyecto? Hablemos del sistema de diseño.
Sistema de diseño en Tailwind CSS
Cuando desarrollamos un sitio web no siempre definimos correctamente el sistema de diseño que vamos a utilizar y empezamos a aplicar estilos a lo loco.
Tailwind es un framework que encarrila eficazmente el desarrollo en base al sistema de diseño que caracteriza a tu proyecto. Desde su archivo de configuración y archivo de estilos global en el que importamos Tailwind, podemos definir la paleta de colores, tipografía y demás personalizaciones del proyecto.
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
'blue': '#1fb6ff',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}Los colores y el resto de detalles de nuestro sistema de diseño serán ahora accesibles a través de clases que el framework genera automáticamente
<div class="bg-gray"></div>¿Parece magia, verdad? Una vez definido el sistema de diseño, ya podemos empezar a utilizar Tailwind para dar estilos a nuestra web a toda velocidad.
Modificadores de Tailwind CSS
Otro aspecto importante de Tailwind son los modificadores. Podemos añadir un modificador seguido de dos puntos antes de cada clase para aplicarla condicionalmente en base a diferentes variables como:
- Pseudo-classes como :focus o :hover
- Pseudo-elements como ::before o ::after
- Atributos como el tipo de un input [type=?password?]:
- O los diferentes breakpoints según el tamaño de la pantalla: sm, md, lg. Que nos permiten crear un diseño responsive para diferentes dispositivos.
<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700">
Save changes
</button><div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
<!-- ... -->
</div>Hay muchos más, pero no vamos a mencionarlos todos.
Prácticamente existen modificadores para todos los casos que puedas imaginar. Estos te permiten dinamizar los estilos de tus vistas, pero en caso de necesitar un comportamiento más personalizado siempre puedes escribir modificadores personalizados en casos concretos.
Modos light y dark en Tailwind CSS
¿Cuántas webs que se precien hoy en día no permiten configurar el modo light o dark? Hasta la documentación de Tailwind permite hacerlo. ¿No querrás pertenecer al montón malo, verdad?
Con Tailwind es muy sencillo incorporar los modos light y dark a tu tema. El modificador ?dark? aplicará condicionalmente las clases cuando el usuario haya activado el modo oscuro.
<div class="dark:bg-slate-800 bg-white shadow-xl">
<!-- ... -->
</div>Por defecto Tailwind escoge el modo de la configuración de tu sistema operativo, pero para máxima flexibilidad podemos construir mecanismos para guardar y recuperar el modo que el usuario ha configurado para nuestra web. Generalmente a través del localStorage del navegador.
Los visitantes que hayan activado el modo oscuro en su ordenador para proteger sus ojos te agradecerán que lo incluyas en tu web.
Componentes en Tailwind CSS
Hablemos ahora de los componentes.
Una parte esencial de los frameworks de UI es la colección de componentes que ofrecen para acelerar el desarrollo. Algunos de estos serían los botones, sistemas de pestañas o ventanas modales.
A diferencia de los frameworks a los que estamos acostumbrados como Bootstrap, Tailwind no cuenta con una librería de componentes. Su función es única y clara: dar estilos a nuestra web.
Esta falta de componentes es uno de los puntos por los que más se critica a Tailwind, pero en mi opinión se hace desde el desconocimiento. Que no los incluya directamente no quiere decir que tengamos que crear desde cero todos los componentes.
Tailwind CSS y componentes headless
Aquí es donde entra en juego el concepto headless. En el sector de la informática, el concepto headless hace referencia a un software sin interfaz gráfica. Acotando más el término, cuando hablamos de componentes headless nos referimos a esos que, independientemente de su implementación, tienen una apariencia completamente personalizable. Son componentes que, por decirlo de alguna manera, vienen desnudos, solo con su funcionalidad.
Estos son los componentes que se complementan a la perfección con Tailwind. No es que a Tailwind le faltan los componentes, es que ese no es su cometido.
La biblioteca Headless UI, disponible para React y Vue, es la más popular, en combinación con Tailwind, como el stack de maquetación más flexible. Cuenta con 10 componentes esenciales que podremos estilar con total libertad y que cubren una amplia cantidad de casos de uso.
En cualquier caso, en Internet circulan cientos de componentes headless que podemos incluir en nuestro proyecto para conseguir la funcionalidad que necesitemos.
Para cerrar el tema de los componentes, os invito a visitar la web https://tailwindui.com de los creadores de Tailwind. Aquí se publican componentes creados con Headless UI y Tailwind con muy buen aspecto que podemos incluir en nuestros proyectos y ajustarlos un poco para darles nuestro toque personal.
¿Es Tailwind CSS lo mismo que los estilos inline?
Ahora que conoces Tailwind a grandes rasgos, quizá te hayas dado cuenta de una cosa.
<div class="p-6 bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-slate-500">You have a new message!</p>
</div>
</div>¿No se parece mucho la forma de maquetar a los estilos inline que tanto recomiendan evitar en todas las guías de CSS? Este es, sin duda, el punto que menos gusta a los nuevos usuarios de Tailwind, pero vamos a reflexionar un poco sobre el tema.
Aunque a simple vista estas ristras de clases en las etiquetas HTML recuerdan al estilo inline escrito directamente en el atributo ?style? de los elementos, tiene dos diferencias fundamentales:
Las clases de Tailwind están basadas en nuestro sistema de diseño
La primera es que no estamos escribiendo valores mágicos dispersos por todo el HTML de nuestra aplicación, si no que estamos utilizando una serie de clases enriquecidas por nuestro sistema de diseño que Tailwind genera para utilizarse sin remordimientos sobre los elementos HTML. El espaciado, colores y reglas de tipografía están descritos en el archivo de configuración de Tailwind.
Filosofía de Tailwind CSS
Y la segunda y más importante es que si estamos haciendo esta crítica significa que hemos perdido de vista la filosofía de Tailwind o ni siquiera la hemos llegado a entender.
En su documentación son ellos mismos los que presumen de no abandonar el HTML en ningún momento para dar estilos a gran velocidad. Y es esta práctica la que evita que escribamos miles de líneas de CSS y nombres de clases sin sentido para cada elemento. El resultado de usar Tailwind es un proyecto sin código CSS que mantener. A mí esta es la característica que más me gusta del framework. ¿Se ve más claro ahora?
¿Y qué pasa si estamos repitiendo los mismos estilos en diferentes puntos de la aplicación? ¿Cómo podemos reutilizarlos?
Reutilizando estilos en Tailwind CSS
La página de reusing styles de la documentación de Tailwind cubre este escenario y ofrece varias soluciones para reutilizar los estilos en un proyecto dependiendo de la tecnología que estés utilizando. Por ejemplo, si desarrollas con bibliotecas orientadas a componentes como React, Vue o Angular, la recomendación sería crear componentes más pequeños para las partes reutilizables que encapsulen los detalles de maquetación.
Además, El scope de los componentes es el lugar perfecto para conectar la capa de datos o estado de la aplicación en JavaScript al css añadiendo clases de Tailwind condicionalmente.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}Esta estrategia de encapsulamiento es similar a la premisa que sigue la biblioteca ?styled-components? para esconder los estilos de la estructura HTML.
En mi opinión, teniendo en cuenta estos dos puntos, la crítica de los estilos inline contra Tailwind queda completamente desbaratada. Si todavía sigues pensando que es así, insisto en que pruebes Tailwind durante un tiempo y compruebes por ti mismo cómo aumenta tu productividad.
Conclusión
Como veis Tailwind es un framework CSS muy bien diseñado que está de indiscutible moda en el mundo del desarrollo frontend.
Por supuesto no es perfecto, pero se nota su madurez en la versión 3 que es la última a fecha de hoy.
Yo, personalmente, llevo utilizándolo cerca de 2 años y para mí se ha convertido en una herramienta imprescindible para maquetar CSS a toda velocidad sin perder tiempo en aprender una API como las de Bootstrap, Material Design o Ant Design. Eso sí, los conocimientos de CSS previos a utilizar Tailwind deben ser altos. Como mínimo saber qué hace cada propiedad CSS.
Podemos crear diseños únicos al trabajar desde cero en lugar de modificar los que vienen por defecto en otros frameworks. Depende del nivel de customización que necesitemos en el proyecto, diseñar desde cero nos parecerá más flexible o más pesado.
Aquí termina mi aportación en la discusión de Tailwind CSS. Si te ha gustado este artículo compártelo con tus compañeros de trabajo y sigueme en redes sociales para estar informado de mis próximas publicaciones.
