El uso de Tailwind presenta numerosas ventajas:<\/p>\n\n\n\n
Sin embargo, presenta una clara desventaja en comparaci\u00f3n a un enfoque CSS tradicional, como es la repetici\u00f3n de c\u00f3digo. Para reducirla, la propia documentaci\u00f3n de Tailwind nos sugiere el uso de componentes cuando sea posible<\/a>.<\/p>\n\n\n\n Otra de las desventajas es que perdemos la sem\u00e1ntica. Cuando aplicamos la clase Una forma de solucionar este problema a nivel de librer\u00eda de UI (React<\/strong> en este caso) podr\u00eda ser crear un componente Esta soluci\u00f3n:<\/p>\n\n\n\n Ahora bien, \u00bfpodemos considerar el trabajo terminado? Ni mucho menos:<\/p>\n\n\n\n Pensemos un momento: \u00bfCu\u00e1l es la cantidad m\u00ednima de c\u00f3digo que cumple con los requisitos? Dicho de otra manera, \u00bfde cu\u00e1nto c\u00f3digo me puedo desprender evitando ciclos de procesamiento, previniendo posibles errores, etc?<\/p>\n\n\n\n La realidad es que solo necesitar\u00eda un c\u00f3digo similar a este para seguir manteniendo los estilos del bot\u00f3n centralizados, para permitirme llamar a esas clases de una forma sem\u00e1ntica y para evitarme el c\u00f3digo duplicado:<\/p>\n\n\n La forma de pintar un bot\u00f3n desde cualquiera de mis componentes ahora pasar\u00eda a ser algo tan simple como Adem\u00e1s, puesto que ahora solo estoy usando una funci\u00f3n de JavaScript, \u00bfqu\u00e9 me impedir\u00eda usar la misma soluci\u00f3n para mis componentes de Vue<\/strong>, de Svelte<\/strong> o de cualquier otra librer\u00eda o framework?<\/p>\n\n\n\nbtn--lg <\/code> a un elemento podemos intuir que le estamos aplicando la variante “lg”, cuando aplicamos las clases px-6 py-4 text-lg<\/code> perdemos este contexto.<\/p>\n\n\n\n\u00bfComo solucionar este problema con React?<\/h2>\n\n\n\n
Button<\/code> que recibiese las variantes como props<\/code> y que mapease estas props a clases de Tailwind<\/strong>.<\/p>\n\n\nimport<\/span> type { ReactNode } from<\/span> 'react'<\/span>;\n\nconst<\/span> sizeStyles = {\n sm<\/span>: 'px-3 py-1 text-sm'<\/span>,\n md<\/span>: 'px-4 py-2 text-base'<\/span>,\n lg<\/span>: 'px-6 py-4 text-lg'<\/span>,\n};\n\nconst<\/span> intentStyles = {\n primary<\/span>: 'bg-blue-600 text-blue-50'<\/span>,\n secondary<\/span>: 'bg-orange-600 text-orange-50'<\/span>,\n default<\/span>: 'text-slate-600 text-slate-50'<\/span>,\n};\n\ninterface Props {\n size<\/span>: keyof typeof<\/span> sizeStyles;\n intent: keyof typeof<\/span> intentStyles;\n children: ReactNode;\n}\n\nexport<\/span> const<\/span> Button = ({ size, intent, children }<\/span>) =><\/span> (\n <button<\/span> className<\/span>={<\/span>`inline-block<\/span> border-0<\/span> ${sizeStyles<\/span>[size<\/span>]} ${intentStyles<\/span>[intent<\/span>]}`}><\/span>\n {children}\n <\/button<\/span>><\/span><\/span>\n)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\n
primary<\/code> equivale a bg-blue-600 text-blue-50<\/code><\/li>\n\n\n\n\n
onClick<\/code>, de hecho, nos gustar\u00eda poder pasar cualquier prop que pueda recibir un elemento button<\/code> (y tener el soporte de TypeScript para esas props)<\/li>\n\n\n\nclassName<\/code>, pero como el componente ya usa esa prop internamente queremos concatenar las clases externas e internas antes de asignarlas<\/li>\n\n\n\nforwardRef<\/code>.<\/li>\n\n\n\n\u00bfPor qu\u00e9 es necesario solucionar este problema usando React?<\/h2>\n\n\n\n
const<\/span> sizeStyles = {\n sm<\/span>: 'px-3 py-1 text-sm'<\/span>,\n md<\/span>: 'px-4 py-2 text-base'<\/span>,\n lg<\/span>: 'px-6 py-4 text-lg'<\/span>,\n};\n\nconst<\/span> intentStyles = {\n primary<\/span>: 'bg-blue-600 text-blue-50'<\/span>,\n secondary<\/span>: 'bg-orange-600 text-orange-50'<\/span>,\n default<\/span>: 'text-slate-600 text-slate-50'<\/span>,\n};\n\nexport<\/span> const<\/span> button = ({\n size,\n intent,\n}: {\n size<\/span>: keyof typeof<\/span> sizeStyles;\n intent: keyof typeof<\/span> intentStyles;\n}) => `inline-block border-0 ${sizeStyles[size]}<\/span> ${intentStyles[intent]}<\/span>`<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nclassName={button({ intent: 'primary', size: 'lg' })}<\/code> y no tendr\u00eda que preocuparme del prop-drilling<\/em> o de problemas similares.<\/p>\n\n\n\nAcelerando el desarrollo con CVA<\/h2>\n\n\n\n