10 replies

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

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

TTC

Theo's Typesafe Cult•3y ago•

10 replies

Benjamin

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

className

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

How do you deal with dynamic classes ?

Similar Threads

How do you deal with dynamic classes ?

Similar Threads

Similar Threads

Similar Threads