How do you deal with dynamic classes ?

I found out that using dynamic classes requires you to add the given class to the safe list as Tailwind is only loading classes statically present in the className attribute. As this is obviously heavy for maintenance (if you want to keep the size optimised, stripped from unused CSS), how do you deal with this ? Here is an example, how would you make classes static ?
const Button = ({variant}: {variant: 'green' | 'blue'}) => {
return <button className={`bg-${variant}-500`}>Click me</button>
}
const Button = ({variant}: {variant: 'green' | 'blue'}) => {
return <button className={`bg-${variant}-500`}>Click me</button>
}
Solution:
OK, I didn't find this page from the doc which is exactly about the issue: https://tailwindcss.com/docs/content-configuration...
Content Configuration - Tailwind CSS
Configuring the content sources for your project.
Jump to solution
6 Replies
Matvey
Matvey16mo ago
const variantToClass = {
'green': 'bg-green-500',
'blue': 'bg-blue-500'
}

return <Button className={variantToClass[variant]}/>
const variantToClass = {
'green': 'bg-green-500',
'blue': 'bg-blue-500'
}

return <Button className={variantToClass[variant]}/>
i use something like this
Brendonovich
Brendonovich16mo ago
would suggest you dive straight into https://cva.style/docs/getting-started/variants
Variants | cva
Class Variance Authority
Benjamin
Benjamin16mo ago
And what if you mixes different variants ? Let's say you add to this button an inverted mode ? Interesting, thank you, is that what you use?
Brendonovich
Brendonovich16mo ago
Yea
Brendonovich
Brendonovich16mo ago
GitHub
spacedrive/apps/mobile/src/components/primitive/Button.tsx at 03e71...
Spacedrive is an open source cross-platform file explorer, powered by a virtual distributed filesystem written in Rust. - spacedriveapp/spacedrive
Solution
Benjamin
Benjamin16mo ago
OK, I didn't find this page from the doc which is exactly about the issue: https://tailwindcss.com/docs/content-configuration
Content Configuration - Tailwind CSS
Configuring the content sources for your project.
Want results from more Discord servers?
Add your server