Tailwind CSS es una poderosa herramienta FrontEnd englobada dentro de los frameworks de diseño que permite aplicar estilos de forma ágil y optimizada a los sitios web.
Los estilos se escriben a través de clases dentro del HTML, también llamadas utility clases. Afectan a aspectos específicos de las CSS, por ejemplo, un color de texto o un fondo. A esto se le conoce como «Atomic CSS», porque se emplea en estilos sencillos y mediante estilos muy determinados y concretos. Por tanto, Tailwind aporta una gran suma de clases que, combinándolas entre sí, ofrecerá ilimitadas variantes en la personalización de nuestros diseños.
Además, Tailwind se apoya en PostCSS, logrando un flujo de desarrollo muy avanzado y optimizado al hacer que las clases residan en el código de producción y sean las que se utilizarán en el proyecto web.
Guía de clases de utilidad
Las «Utility-first workflow» conforman el método de trabajo que nos plantea Tailwind CSS. En él tenemos que modificar el HTML para incluir las clases que sean necesarias para colocar estilo a los componentes.
Las utility classes afectan a un estilo muy concreto. Veamos un ejemplo:
- p-8: cambia el padding a 2rem
- mt-3: cambia el margin-bottom a 0.75rem
- flex: pone display a flex
- items-left: aplica el estilo «aling-items: center»
- text-black-500: pone el color del texto a negro.
- bg-gray-200: pone el color de fondo gris claro.
Las clases podemos aplicarlas a la vez de esta forma:
<div class="p-8 mt-2 flex items-left text-black-500 bg-gray-200"> Aquí el contenido </div>
Aunque este método exige escribir muchas utility classes en un elemento y carga el HTML, aporta importantes ventajas:
- Sin modificar el CSS se pueden incluir los estilos
- No aumentará el tamaño del CSS cuando realizamos cambios en el estilo
- Se pueden especificar estilos que solo afecten a determinadas variantes de pseudo-clases, como hover o focus
- Podemos utilizar estilos que afecten solo a un contenido en un ancho específico de pantalla
- Podemos personalizar las utility classes para crear un tema gráfico
- Desarrollo más rápido
Con todo esto es posible que hagamos más grande el HTML, pero no resulta nada grave porque las páginas vienen comprimidas (GZIP).
¿Es Tailwind mejor que Bootstrap?
Usar Tailwind no difiere mucho de escribir CSS simple. Si trabajamos con un diseño que se desvía de la norma, un marco como Bootstrap no ayudaría demasiado, ya que terminaríamos escribiendo la mayor parte de su propio CSS, algo que con Tailwind, se vuelve más sencillo gracias a las utility classes.
Un ejemplo de cómo definiríamos una tarjeta con Bootstrap:
<!-- BOOTSTRAP --> <div class="card" style="width: 16rem;"> <img src="..." class="card-img-left" alt="..."> <div class="card-body"> <h5 class="card-title">La tarjeta en Bootstrap</h5> <p class="card-text"> Bootstrap es un kit de herramientas de código abierto para desarrollos web responsive con HTML, CSS y JavaScript.</p> <a class="btn btn-primary" href="#">Ver especificaciones</a> </div> </div>
Observamos que al definir una tarjeta con Bootstrap se utilizan clases dirigidas a componentes, como «card», «card-tile» o «btn» y «btn-primary» para definir un botón.
Vamos a ver cómo lo haríamos con Tailwind CSS en el HTML:
<!-- TAILWIND CSS --> <article class="mb-4 bg-teal-120 border border-gray-300 rounded shadow-md"> <img src="..." alt="..." class="rounded rounded-b-none"> <div class="p-3"> <h3 class="mb-1 text-xl font-bold">La tarjeta en Tailwind </h3> <p class="mb-4">La diferencia con Bootstrap es palpable.</p> <a class="bg-blue-700 text-white px-4 py-2 font-bold uppercase rounded-xl tracking-wider" href="#">Primary</a> </div> </article>
La impresión que nos da al comparar el código es que en Tailwind hemos ensuciado el HTML, pero tenemos algunas ventajas:
- Podemos personalizar el estilo en mayor medida. Por ejemplo, en el código anterior hemos aplicado, en el componente tarjeta, un grosor con un redondeo en el borde y una sombra
- No hemos tenido que pegarnos con el framework y escribir estilos que sobreescriban la tarjeta
- Con Bootstrap estamos obligados a escribir nuestro CSS, en cambio con Tailwind el estilo ya lo tenemos con las utility classes y no hará que aumente el tamaño del código CSS
Conclusión entre Tailwind vs Bootstrap
La decisión de elegir entre Tailwind CSS o Bootstrap debe basarse más en las necesidades de cada proyecto, bien si queremos utilizar un mayor número de estilos y componentes o una mayor gama de clases preestablecidas. No existe una ventaja clara de rendimiento o calidad de un framework sobre el otro, excepto el hecho de que Bootstrap todavía viene con un conjunto mucho más grande de componentes y, por tanto, puede pesar un poco más. Si queréis conocer más detalles sobre Tailwind CSS podéis hacerlo en nuestro canal de YouTube.