Is Tailwind great? Yes. But does it have any weak points?<\/strong><\/p>\n\n\n\n Using Tailwind offers numerous advantages:<\/p>\n\n\n\n However, it has a clear downside compared to traditional CSS approaches: code repetition. To mitigate this, Tailwind’s documentation suggests using components wherever possible.<\/p>\n\n\n\n Another drawback: lost semantics<\/strong> How to solve this with React?<\/strong><\/p>\n\n\n\n One way to address this at the UI library level (e.g., in React) is to create a Advantages of this approach:<\/strong><\/p>\n\n\n\n But is this the final solution? Not quite.<\/strong><\/p>\n\n\n\n This component has some limitations:<\/p>\n\n\n\n The minimal code required to centralize button styles, keep semantic usage, and avoid duplication is:<\/p>\n\n\n To use it:<\/p>\n\n\n This approach avoids prop-drilling issues, is framework-agnostic, and can work in Vue, Svelte, or any framework.<\/p>\n\n\n\n CVA (class-variance-authority<\/em>) is a JavaScript library for building CSS components based on variants. Here\u2019s how you can use it to solve the button example:<\/p>\n\n\n To invoke:<\/p>\n\n\n To add additional classes to the component, use the You can extract types for component variants using Set default variants with \n
\n\n\n\n
For instance, applying the class btn--lg<\/code> to an element implies using a “large” variant. However, using classes like px-6 py-4 text-lg<\/code> loses this context.<\/p>\n\n\n\n
\n\n\n\nButton<\/code> component that accepts variants as props and maps those props to Tailwind classes.<\/p>\n\n\n<code>import<\/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);\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\n
primary<\/code> equals bg-blue-600 text-blue-50<\/code>.<\/li>\n\n\n\n
\n\n\n\n\n
onClick<\/code> event or other native props.<\/li>\n\n\n\nclassName<\/code> without overwriting its internal styles.<\/li>\n\n\n\n<a><\/code> or <div><\/code>) with the same styles.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nOptimizing the Code<\/strong><\/h3>\n\n\n\n
<code>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 = ({ size, intent }: { size: keyof typeof<\/span> sizeStyles; intent: keyof typeof<\/span> intentStyles }<\/span>) =><\/span>\n `inline-block border-0 ${sizeStyles[size]}<\/span> ${intentStyles[intent]}<\/span>`<\/span>;\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n<code<\/span>><\/span>className={button({ intent: 'primary', size: 'lg' })}\n<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\nAccelerating Development with CVA<\/strong><\/h3>\n\n\n\n
<code>import<\/span> { cva } from<\/span> 'class-variance-authority'<\/span>;\n\nexport<\/span> const<\/span> button = cva('inline-block border-0'<\/span>, {\n variants<\/span>: {\n size<\/span>: {\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 intent<\/span>: {\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 },\n});\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n<code<\/span>><\/span>className={button({ intent: 'primary', size: 'lg' })}\n<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\nExtending Component Classes<\/strong><\/h3>\n\n\n\n
class<\/code> property (or className<\/code> for React):<\/p>\n\n\n<code>className={button({\n intent<\/span>: 'primary'<\/span>,\n size<\/span>: 'lg'<\/span>,\n class<\/span>: 'text-blue-600'<\/span>,\n})}\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\nExtracting Types<\/strong><\/h3>\n\n\n\n
VariantProps<\/code>:<\/p>\n\n\n<code>import<\/span> type { VariantProps } from<\/span> 'class-variance-authority'<\/span>;\nimport<\/span> { cva } from<\/span> 'class-variance-authority'<\/span>;\n\nexport<\/span> const<\/span> button = cva(\/* ... *\/<\/span>);\n\nexport<\/span> type ButtonProps = VariantProps<typeof<\/span> button>;\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\nDefault Variants<\/strong><\/h3>\n\n\n\n
defaultVariants<\/code>:<\/p>\n\n\n<code>export<\/span> const<\/span> button = cva('inline-block border-0'<\/span>, {\n variants<\/span>: {\n size<\/span>: { sm<\/span>: 'px-3 py-1 text-sm'<\/span>, md<\/span>: 'px-4 py-2 text-base'<\/span>, lg<\/span>: 'px-6 py-4 text-lg'<\/span> },\n intent<\/span>: { primary<\/span>: 'bg-blue-600 text-blue-50'<\/span>, secondary<\/span>: 'bg-orange-600 text-orange-50'<\/span>, default<\/span>: 'text-slate-600 text-slate-50'<\/span> },\n },\n defaultVariants<\/span>: { size<\/span>: