Question 72894 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Dynamic style rendering tailwindcss – Reactjs

I want to render an element with a random color at runtime at every documentstart, using ReactJS and TailwindCSS. However, even though looking at the element through the inspector and seeeing the class properly, it still doesn’t work. Here is the code:

    const colors = ["red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "light-blue", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
    const [theme, setTheme] = useState("orange");
    useEffect(() => {
        setTheme(colors[Math.floor(Math.random() * colors.length)]);
    }, []);

    return (
        <span className={`text-${theme}-400`}>test</span>
    );
Tags:

2

Answers


  1. 0

    in Tailwind you can’t use dynamic class naming like bg-${color}.

    This because when Tailwind compiles its CSS, it looks up over all of your code and checks if a class name matches.

    If you want dynamic name classes you should write all the class name.
    It expect you to write something like this:

    <span className={`${true ? 'text-red-400' : 'text-blue-400'}`}>test</span>

    I know this make the code longer and more verbose but this is the only way in vanilla tailwindcss, you can use some external packages like clsx or xwind.

    Login or Signup to reply.
  2. 0

    Is it advised to utilise a dynamic class in a tailwind?

    Ans: No

    The usage of dynamic classes in tailwind-css is often not advised since tailwind employs tree-shaking, which means that any class that wasn’t specified in your source files won’t be created in the output file. It is thus advised to use complete class names

    According to Docs

    If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS

    Is there work around ?

    Ans: Yes, use Safelisting classes in your tailwind.config.cs

    Safelisting is a last-resort, and should only be used in situations where it’s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature.

    Particular to you, you want to have text with different colors. You can use regular expressions to include all the colors you want using pattern and specify the shades accordingly .

    Note: You can force Tailwind to create variants as well:

    In tailwind.config.js

    module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    {
      pattern: /text-(red|green|blue|orange)-(100|500|700)/, // You can display all the colors that you need
    },
  ],
  // ...
}

    To include all the bg-colors, you can use the following code:

    module.exports = {
  content: [
     ...
  ],
  safelist: [
    {
      pattern: /text-+/, // 👈  This includes bg of all colors and shades
    },
  ],
  ...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search