Hola a todos. Hoy vamos a hablar sobre las mejores prácticas para usar Tailwind CSS. Mi nombre es Nina. Soy ingeniera de front-end en Devilmartian. Nos dedicamos al desarrollo de productos para grandes empresas y startups, y también desarrollamos nuestros propios productos de código abierto.
Tailwind CSS es una herramienta popular y controvertida. Se divide entre los desarrolladores en dos bandos opuestos. Tailwind se ha vuelto tan popular porque a muchos desarrolladores les encanta por su conveniencia y por acelerar el proceso de maquetación. Pero al mismo tiempo, hay desarrolladores que no pueden soportarlo, especialmente debido a las listas de clases de Tailwind CSS realmente largas. Pero la verdad está en algún punto intermedio.
Para algunas tareas, Tailwind es extremadamente genial. No necesitamos pensar en el nombre de las clases CSS. Y con una lista de clases predefinida, podemos construir un proyecto extremadamente rápido. Pero por otro lado, Tailwind no es una bala de plata. Hay casos en los que solo contaminará el proyecto con una enorme lista de clases a medida que crece.
Después de trabajar con Tailwind durante mucho tiempo, he identificado dos requisitos principales donde Tailwind es adecuado, y sin ellos, es mejor elegir una herramienta alternativa. Y el primer requisito es que el proyecto debe tener un sistema de diseño. Tailwind está estrechamente relacionado con la filosofía del sistema de diseño en el que usamos tokens de diseño. Los tokens de diseño son valores atómicos como colores, tamaños o márgenes que se utilizan en todo el proyecto. Si usamos constantes mágicas para las propiedades de diseño en todas partes, hay una alta posibilidad de que puedas romper algo si necesitas cambiar una propiedad, como un cierto color, en todos los lugares del proyecto, porque necesitarás buscar una clase específica en todas tus listas de clases de Tailwind y reemplazarla con otro valor. Pero si usamos los tokens de diseño, se vuelve mucho más fácil y seguro, porque si decidimos cambiar alguna propiedad de diseño, como un cierto color, podemos aplicarlo en un solo lugar, y se cambiará en todas partes.
Y el segundo requisito para usar Tailwind CSS es que tu proyecto debe tener un enfoque de componentes. El enfoque con clases CSS que utiliza Tailwind lleva a estructuras HTML verbosas, ya que las clases se aplican directamente a los elementos. Y si no podemos encapsular el código en componentes separados, entonces a medida que un proyecto crece, el marcado se volverá extremadamente difícil de leer y de mantener.
Aquí hay un ejemplo de cómo funciona el enfoque de componentes con Tailwind. En lugar de copiar y pegar un botón como este en todas partes con una gran lista de clases, lo encapsulamos en un componente separado y lo llamamos en una línea.
Ahora, la buena noticia es que si tienes un sistema de diseño y un enfoque de componentes, entonces Tailwind CSS puede ser una buena opción para ti. Pero para hacer que el trabajo a largo plazo sea agradable e indoloro, debes usar esta herramienta sabiamente y seguir algunas mejores prácticas. La primera, en Tailwind una larga lista de clases es una realidad dura, pero este inconveniente debe mitigarse tratando de usar solo aquellas clases de Tailwind que son necesarias. Aquí hay algunos ejemplos de cómo puedes reducir el número de clases y obtener el mismo resultado.
Comments