Why Can't I Use Dynamic Class Names in Tailwind CSS?

Why Dynamic Class Names Can't Be Used in Tailwind CSS

In Tailwind CSS, class names are extracted as complete unbroken strings from your source code. This means that if you try to construct class names dynamically using string interpolation or concatenation, Tailwind will not recognize them and will not generate the corresponding CSS.

Example

As an example, consider the following code snippet:

<p className={`bg-[${colors.secondary}] text-text-white`}></p>

In this example, the className property is set to a template literal that combines the colors.secondary variable with the string text-text-white. Tailwind will not recognize the bg-[${colors.secondary}] class name and will not generate the corresponding CSS.

Solution

There are two ways to work around this issue:

1. Use full class names in your definitions, like:

const colors = {
    secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
};

2. Use the style attribute to set the background color dynamically, like:

<p className="text-text-white">

By following these guidelines, you can ensure that your Tailwind CSS class names are generated correctly and that your styles are applied as expected.

The above is the detailed content of Why Can't I Use Dynamic Class Names in Tailwind CSS?. For more information, please follow other related articles on the PHP Chinese website!