Últimamente, me encuentro con opiniones en contra del uso de frameworks de CSS como Tailwind CSS, y en parte lo entiendo, yo también estaba en contra hasta que lo probé. A veces es bueno probar las cosas por uno mismo para ver los pros y los contras de algo.
Llevo unos meses usando Tailwind CSS, y aunque hay algunos inconvenientes a la hora de usarlo, he notado cosas de las que no se suelen hablar a la hora de compararlo. Y es que me parece bastante injusto comparar algo sin mostrar tanto los inconvenientes como las cualidades, ya que normalmente solo vemos una cara de la moneda, y no es bueno quedarse con una opinión sesgada.
Panorama del desarrollo actual
Hay mucha gente que sigue creando webs con archivos html, css y js, pero la gran mayoría de expertos realizan sus desarrollos mediante librerías javascript como Vue, React, Angular, etc. Ya de por sí, al usar una de estas librerías estás acabando por completo con la "limpieza" de tus archivos html, ya que lo estás convirtiendo a xml.
export default function Link(props: { icon: string, name: string, href: string}) {
const { icon, name, href } = props
return (
<a
className="link"
href={ href }
target="_blank"
aria-label={ name }
>
{ icon && (
<span className="icon">
<i className={ `ti ti-${ icon }` }></i>
</span>
)}
</a>
)
}¿Te suena estar usando un código como este? Entonces estás usando componentes, así que la mayor parte del tiempo estarás manejando un código html más o menos de este estilo. Yo lo veo bastante limpio ¿no?
<div class="superdiv">
<MiComponente1 />
<MiComponente2 />
</div>Así que no, tu código html no se va a ver con clases kilométricas, y mucho menos si realmente no quieres tener decenas de clases en tu código html, te explico por qué.
Puedes usar tailwind en tus archivos css
Al utilizar tailwind, puedes seguir usando archivos .css, ya que puedes añadir un @apply dentro de tus clases para usar tailwind. No es necesario poner todo directamente en los archivos html, pero por desconocimiento, la mayoría cree que para usar tailwind tienes que manchar el html sí o sí, y la realidad es muy distinta.
Yo uso ambas formas, algunos estilos los meto directamente en html, y otros que se van a reutilizar en varias partes, lo meto en archivos css con sus respectivas clases. Aquí te muestro uno de mis archivos css como ejemplo, en los cuales mezclo tanto css como tailwind, aunque podría tener todo en tailwind, ya que en este caso se me olvidó cambiar el código que estaba probando.
Te terminas acostumbrando a la rapidez
Cuando diseñas con tailwind, una de las mejores cosas que tiene es que todo es mil veces más rápido de diseñar, ya que estás delegando la estructuración del css para centrarte en lo que de verdad importa, hacer todo de una manera más simple y rápida.
¿A caso no usas Vue, React o librerías del estilo?, ¿o incluso frameworks como Nuxt, Next, Astro, etc, para crear webs de una forma dinámica mucho más rápido que haciéndola simplemente en javascript? Pues esto viene siendo lo mismo, sacrificas unas cosas para conseguir otras, y no está mal, porque estarás haciendo uso de lo que mejor se adapta a tus necesidades, y eso siempre es bueno.
Te voy a poner un ejemplo de lo rápido que es diseñar con tailwind. Pongamos que quieres tener un h1 con un tamaño de 24 píxeles en la versión de escritorio y de 14 píxeles en la versión móvil. Con CSS deberías crear un código más o menos de este estilo.
h1 {
font-size: 14px;
}
@media (min-width: 1280px) {
h1 {
font-size: 24px;
}
}Ahora vamos a ver cómo sería usando tailwind.
h1 {
@apply text-sm xl:text-2xl
}Y ya, con eso he hecho lo mismo que lo que he puesto en css. Luego es decisión tuya si quieres encapsular eso en una clase dentro de un archivo css, o añadirlo directamente como clases en el código html.
Como experto que lleva diseñando webs desde hace 20 años, no quiero perder el tiempo preocupándome por cada aspecto de la estructuración y sintaxis del css, ya he lidiado con ello muchísimos años, y ahora lo que quiero es ir al grano.
Solo se va a exportar el css que estés usando
Esto es algo de lo que se habla muy poco. Al usar tailwind, solo se va a exportar junto con la build de tu web el código css que estés usando, cualquier código olvidado o que no se esté usando en la web, se descarta.
Esto significa que la build final de tu web va a ser mucho más liviana que usando solo css, ya que normalmente solemos olvidar clases, o usamos código de más que no reutilizamos, etc.
También hay inconvenientes
No todo es tan bonito, y es que como todo lo bueno, también tiene sus inconvenientes. Si vas a crear diseños muy elaborados, te vas a encontrar con que habrá cosas que literalmente no se pueden hacer con tailwind, o incluso vas a necesitar añadir plugins.
Aunque esto es un inconveniente a medias, ya que puedes seguir usando css, porque al estar usando tailwind no estás atado a usar solo tailwind, sino que puedes hacer lo que quieras, como quieras y donde quieras.
Me he encontrado este tipo de problemas en algunas ocasiones que al final he solventado añadiendo plugins o simplemente creando lo que quería directamente con css.
Y es que no debemos olvidarnos que tailwind es un framework, y como todo framework hay que ir actualizándolo si queremos ir teniendo las mejoras y añadidos que vayan implementando.
Con este artículo no quiero hacer cambiar de opinión a nadie, es tu decisión usar o no tailwind. No obstante, siempre hay que tener todo en cuenta, no es lo mismo alguien que hace una web al año, que alguien que se dedica a ello y tiene que crear no uno sino varios diseños al mes.
Y ya para finalizar, solo recomiendo usar tailwind a gente experta que ya sepa diseñar bien con css y quiera rapidez. Si no dominas el diseño con css, mucho menos lo vas a llegar a dominar con tailwind sin comprender cómo funciona css.
