5 Mejores Prácticas para Prevenir el Caos en Tailwind CSS

Rate this content
Bookmark

Tailwind sopló arrastrando a los desarrolladores a dos bandos opuestos. Ya has elegido tu lado, o eres del equipo pro Tailwind o te alejas corriendo. Pero, ¿y si te dijera que hay una tercera opción? 

Este marco de CSS debería entrar en juego solo cuando el tipo perfecto de proyecto requiere brisas suaves. En esta charla, con ejemplos ilustrativos, elaboraremos sobre cómo mejorar la experiencia de trabajar con Tailwind CSS usando prácticas simples. Desafiaré tus preconcepciones y responderé la pregunta importante, para qué casos Tailwind es la mejor solución o cuándo es mejor elegir una herramienta CSS alternativa.

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

Nina Torgunakova
Nina Torgunakova
10 min
28 Oct, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hoy vamos a hablar sobre las mejores prácticas para usar Tailwind CSS. Tailwind CSS es una herramienta popular y controvertida. Se divide entre los desarrolladores en dos bandos opuestos. Para algunas tareas, Tailwind es extremadamente genial. 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. El primer requisito es que el proyecto debe tener un sistema de diseño. El segundo requisito para usar Tailwind CSS es que tu proyecto debe tener un enfoque de componentes. Si tienes un sistema de diseño y un enfoque de componentes, entonces Tailwind CSS puede ser una buena opción para ti. En lugar de especificar el mismo margen en la parte superior o inferior, puedes especificar solo uno vertical. La segunda regla al trabajar con Tailwind es agrupar los tokens de diseño y nombrarlos semánticamente. La regla número tres, mantener el orden de las clases. El siguiente consejo para usar Tailwind será útil no solo para Tailwind, sino también al trabajar con cualquier herramienta de contenido, monitorear el tamaño del paquete e intentar optimizarlo. La última regla para Tailwind, usa conjuntos de variantes de estilo para evitar problemas al sobrescribir clases. En lugar de pasar clases arbitrariamente a través de props, define un conjunto de variantes para el componente. Usa menos clases de utilidad, agrupa los tokens de diseño y nómbralos semánticamente. Mantén el orden de las clases, minimiza el tamaño de tu compilación y usa conjuntos de variantes de estilo. Recuerda que Tailwind CSS es una herramienta útil, pero no la única solución para todos los proyectos.

1. Introducción a Tailwind CSS

Short description:

Hoy vamos a hablar sobre las mejores prácticas para usar Tailwind CSS. Tailwind CSS es una herramienta popular y controvertida. Se divide entre los desarrolladores en dos bandos opuestos. Para algunas tareas, Tailwind es extremadamente genial. 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. El primer requisito es que el proyecto debe tener un sistema de diseño. El segundo requisito para usar Tailwind CSS es que tu proyecto debe tener un enfoque de componentes. Si tienes un sistema de diseño y un enfoque de componentes, entonces Tailwind CSS puede ser una buena opción para ti.

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.

2. Best Practices for Using Tailwind CSS

Short description:

En lugar de especificar el mismo margen en la parte superior o inferior, puedes especificar solo uno vertical. La segunda regla al trabajar con Tailwind es agrupar los tokens de diseño y nombrarlos semánticamente. Regla número tres, mantener el orden de las clases. El siguiente consejo para usar Tailwind será útil no solo para Tailwind, sino también al trabajar con cualquier herramienta de contenido, monitorea el tamaño del paquete e intenta optimizarlo. La última regla para Tailwind, usa conjuntos de variantes de estilo para evitar problemas al sobrescribir clases.

En lugar de especificar el mismo margen en la parte superior o inferior, puedes especificar solo uno vertical. {{^}}En lugar de especificar flex-row para un contenedor con valor de display de flex, puedes omitirlo con el mismo resultado, ya que flex-row es un valor predeterminado de la propiedad flex-direction. Y en este ejemplo, podemos eliminar la opacidad del borde 50 agregando un sufijo con una barra en el número 50 para la propiedad border-black. Y esto será una abreviatura para el formato RGBA. Así que conocer estos ajustes ayuda a reducir bastante la lista de clases mientras se preserva el mismo resultado.

Así que cuando trabajes con Tailwind, si la lista de clases ha crecido, pregúntate si puedes de alguna manera reducirla. La segunda regla al trabajar con Tailwind es agrupar los tokens de diseño y nombrarlos semánticamente. Agrupa los tokens relacionados en un archivo de configuración, separándolos en diferentes secciones, como colores o distancias. La configuración estructurada será mucho más fácil de leer a medida que el número de tokens crezca. Además, recuerda la importancia del nombramiento semántico y nombra tus tokens de diseño de acuerdo con su propósito. Por ejemplo, si el color es una advertencia de error, no lo nombres solo como rojo brillante, nómbralo semánticamente como error. La semántica como el agrupamiento hace que sea más fácil expandir todo el sistema de diseño a medida que el proyecto crece, por lo que debemos tener esto en cuenta.

Regla número tres, mantener el orden de las clases. Mira estos dos bloques. Tienen clases que son responsables de diferentes aspectos, propiedades de visualización, propiedades del modelo de caja, propiedades decorativas y así sucesivamente. Pero todas estas clases están especificadas caóticamente y es difícil decir inmediatamente cómo se diferencian estos dos bloques. Pero si ordenamos las clases, entonces esta diferencia se vuelve más comprensible y se hace más fácil leer tal lista. Es mejor automatizar el trabajo de ordenamiento. Recomiendo usar el plugin oficial de Pretier para Tailwind CSS y automáticamente ordenará tus clases.

El siguiente consejo para usar Tailwind será útil no solo para Tailwind, sino también al trabajar con cualquier herramienta de contenido, monitorea el tamaño del paquete e intenta optimizarlo. ¿Por qué necesitas monitorear el tamaño del paquete? Porque el tamaño promedio de las páginas web está creciendo constantemente y si hace 12 años era como 800 kilobytes, hace dos años el tamaño promedio de una página web ya era más de 2,000 kilobytes. Eso es un gran crecimiento. Y cuanto más grande sea el tamaño de la página web, más tiempo tarda en cargarse y cuanto más largo sea el tiempo de carga, mayor será la pérdida de usuarios. Por lo tanto, al usar Tailwind, vale la pena minimizar el CSS resultante para optimizar la construcción.

Esto se puede hacer usando la bandera Minify al construir el CSS o si instalas Tailwind como un plugin post-CSS especificando css-nano en la lista de plugins. Y la última regla para Tailwind, usa conjuntos de variantes de estilo para evitar problemas al sobrescribir clases. Imagina que tenemos un componente de botón en la página con un fondo blanco predeterminado. Estamos tratando de sobrescribir esta clase de tal manera que el fondo sea negro. Pero sobrescribir la clase de Tailwind de esta manera no funcionará y el botón permanecerá blanco.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construir un Sistema de Diseño con React y Tailwind CSS
React Summit 2022React Summit 2022
27 min
Construir un Sistema de Diseño con React y Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Cómo lograr la composición de diseño en React
React Summit 2022React Summit 2022
8 min
Cómo lograr la composición de diseño en React
This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
React Advanced 2023React Advanced 2023
19 min
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.
Pasando de Css-In-Js en tiempo de ejecución a gran escala
React Summit 2023React Summit 2023
29 min
Pasando de Css-In-Js en tiempo de ejecución a gran escala
This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.
Construyendo Componentes de IU Perfectos con Variables CSS
React Summit 2023React Summit 2023
9 min
Construyendo Componentes de IU Perfectos con Variables CSS
CSS variables and their possibilities for UI developers, MUI's history and understanding of developer needs, Joy UI's focus on developer experience and use of CSS variables for consistency and future-proofing, the elimination of manual calculations and JavaScript with CSS variables in JoyUI, and the availability of playgrounds and a stable release for exploration.

Workshops on related topic