Esta Skill documenta un patrón compacto y listo para producción para gestionar las clases de Tailwind CSS en proyectos React. Prescribe un helper cn() que…
Esta Skill documenta un patrón compacto y listo para producción para gestionar las clases de Tailwind CSS en proyectos React. Prescribe un helper cn() que compone clsx y tailwind-merge para combinar de forma segura classNames condicionales y resolver conflictos, evitando utilidades duplicadas o contradictorias. Advierte sobre la interpolación dinámica de cadenas de clase (que rompe el purge de Tailwind) y recomienda mapear valores a cadenas de clase estáticas. Demuestra Variantes de Componente mediante class-variance-authority (CVA) para definir props reutilizables y con tipado seguro para variant y size en componentes (p. ej., botones) con valores por defecto sensatos y estados centrados en la accesibilidad. Finalmente, aplica utilidades responsivas mobile-first y lista los tamaños de los breakpoints. Casos de uso: bibliotecas de componentes robustas, tematización coherente, prevención de errores por purge, APIs de variantes claras y comportamiento responsivo predecible en aplicaciones.
Esta página forma parte del hub OpenClaw Skills con guías de instalación, categorías y enlaces prácticos.