Consejos para escribir Tailwind CSS de forma limpia
Tailwind es una excelente opción de estilo para tu proyecto si deseas aumentar la productividad en el desarrollo y tener un diseño flexible en tus aplicaciones. Sin embargo, a medida que tu proyecto crece en complejidad, podrías notar algunos puntos negativos en la experiencia de desarrollo. Por eso, decidí escribir este artículo con consejos para escribir tu código de Tailwind de manera "limpia".
1. Usa el plugin Prettier
Para garantizar la estandarización del código en nuestros proyectos frontend, generalmente utilizamos herramientas como eslint + prettier para definir los estándares deseados en el código. Al usar Tailwind, existe un paquete llamado prettier-plugin-tailwindcss, que organiza automáticamente las clases de Tailwind en el HTML, siguiendo un formato recomendado para mantener la consistencia en el código.
2. Patrón de composición (Composition Pattern)
El patrón de diseño de composición (Composition Pattern) sirve para crear estructuras complejas a partir de otras más simples. En proyectos frontend, esto significa crear pequeños componentes que, juntos, forman uno mayor. De esta manera, puedes crear componentes altamente personalizables, evitando el "prop drilling" y haciendo que tu código de Tailwind sea más fácil de leer al dividirlo en pequeños archivos.
3. TwMerge
TwMerge es una biblioteca que potencia Tailwind al fusionar y gestionar clases de Tailwind, incluso resolviendo conflictos que puedan surgir en tu aplicación. Es muy útil en aplicaciones frontend con muchos estilos, funciones e interacciones dinámicas basadas en estados.
4. clsx
clsx es una biblioteca para manejar clases CSS, permitiendo combinarlas, condicionarlas y eliminar duplicados de forma simple y eficiente.
5. Combinando TwMerge + clsx
También puedes combinar ambas bibliotecas para crear un "wrapper" y aprovechar las funcionalidades de ambas en conjunto.
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs))
}6. CVA
Otra excelente biblioteca para quienes extrañan el uso de CSS-in-JS es CVA, con la cual puedes crear variantes para tus componentes. Además, puedes combinarla con el wrapper cn que creamos anteriormente. Aquí tienes un ejemplo de un componente de botón simple:
// components/button.tsx
import { cva, VariantProps } from 'class-variance-authority'
import { ComponentProps } from 'react'
import { cn } from '@/lib/utils'
const buttonStyles = cva('font-semibold border rounded ', {
variants: {
variant: {
primary: [
'bg-blue-500',
'text-white',
'border-transparent',
'hover:bg-blue-600',
],
secondary: [
'bg-white',
'text-gray-800',
'border-gray-400',
'hover:bg-gray-100',
],
},
size: {
small: ['text-sm', 'py-1', 'px-2'],
medium: ['text-base', 'py-2', 'px-4'],
},
},
defaultVariants: {
variant: 'primary',
size: 'medium',
},
})
type buttonProps = VariantProps<typeof buttonStyles> & ComponentProps<'button'>
export const Button = ({ variant, size, className, ...props }: buttonProps) => {
return (
<button
{...props}
className={cn(buttonStyles({ variant, size }), className)}
/>
)
}// App.tsx
import { Button } from './button'
export const App = () => {
<>
<Button variant={'primary'} size={'medium'}>Primary</Button>
<Button variant={'secondary'} size={'small'}>Secondary</Button>
</>
}7. Otros
Existen otras bibliotecas similares a CVA, como Windstitch y Tailwind Variants, entre otras. Personalmente, he disfrutado usar Tailwind Variants, y creo que vale la pena probarla.
Usando estos consejos en tu proyecto frontend con Tailwind CSS, puedes aumentar la flexibilidad, legibilidad y reutilización de tu código, lo que facilitará la gestión de clases en Tailwind. Esto también hará más sencillas las pruebas end-to-end y la integración de nuevas personas en el proyecto. Como resultado, mejorarás el proceso de creación de interfaces modernas, responsivas e interactivas, aumentando la calidad de tu código y producto final.
Jorge García
Fullstack developer