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.
Video transcription and chapters available for users with access.

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