Theo's Typesafe Cult•11mo ago

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•11mo 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•11mo ago

would suggest you dive straight into https://cva.style/docs/getting-started/variants

Variants | cva

Class Variance Authority

Benjamin•11mo 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•11mo ago

Yea

Brendonovich•11mo ago

https://github.com/spacedriveapp/spacedrive/blob/03e71e98a49369819b511f79182bbff0fb59b5fd/apps/mobile/src/components/primitive/Button.tsx#L3

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•11mo 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.

Gaming

Programming

How do you deal with dynamic classes ?