0

I have a variable that I would like to use to define a class with TailwindCSS:

const frac = // some integer between 0 and 12

With this variable this class definition works as intended:

className={
      (frac === 0 ? "w-0" : "") +
      (frac === 1 ? "w-1/12" : "") +
      (frac === 2 ? "w-2/12" : "") +
      (frac === 3 ? "w-3/12" : "") +
      (frac === 4 ? "w-4/12" : "") +
      (frac === 5 ? "w-5/12" : "") +
      (frac === 6 ? "w-6/12" : "") +
      (frac === 7 ? "w-7/12" : "") +
      (frac === 8 ? "w-8/12" : "") +
      (frac === 9 ? "w-9/12" : "") +
      (frac === 10 ? "w-10/12" : "") +
      (frac === 11 ? "w-11/12" : "")
    }

But this does not:

className={"w-" + String(frac) + "/12"}

Where things get wierd is that if I first use the working example, then switch to the example that doesn't work without stopping the program (locally rerunning "npm start"), the second example works. Obviously I would like to use the concise option, but it seems to only work after each option has been manually rendered. I've also tried to render just one of the options, and after switching to the nonworking example, it will render just that one option and not the others.

jedschlo14
  • 21
  • 3

2 Answers2

4

It has to do with how the Purge CSS works.

Long and short of it is that, if you check the tailwind config file for the path to scan for tailwind classes and then scan for classes that appears as a substring and hence the dynamically generated ones fail in your case.

So when you run the first program and execute the server. tailwind goes like.. oh, user needs the class of w-0 so I am gonna keep it and add it to the final output file. But Purge CSS cannot execute JS and hence cannot compute dynamic strings which might be used as class names.

Check this answer too

oreopot
  • 3,392
  • 2
  • 19
  • 28
  • 2
    Here's the official [doc](https://v2.tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html) regarding this: "it is important to avoid dynamically creating class strings in your templates with string concatenation, otherwise PurgeCSS won’t know to preserve those classes." – tromgy Jan 18 '22 at 00:14
  • Well, had a similar problem the other day, yet came to no answer why it behaves like this, and now I stumble across this answer. Thanks Cap! – D.Schaller Jan 18 '22 at 10:10
0

I was facing issue when receiving a dynamic color prop that was going to be used as: className={rounded px-4 py-2 text-white bg-${bgColor}-500} in the component.

It was not working properly essentially due to naivety of PurgeCSS.

We have to use a safelist option as per the docs. It is not generally recommended to this, except as a last resort, presumably due to performance concerns. Oh well...here's how it ended up working:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.jsx"],
  plugins: [],
  safelist: [
    {
      pattern: /bg-\w+-[1-9]00/,
    },
  ],
};

The regular expression shown in the pattern allows for any thing like follows: bg-, followed by any single word, followed by any of the numbers in 100 increments from 100 to 900 as per Tailwind color classes.

CodeFinity
  • 1,142
  • 2
  • 19
  • 19