Tailwind class is not being applied-CodePudding

I have a question why this dynamic class is not applied to tailwind? In devtools I have i.e w-33% but CSS does not show that width is 33%.

const QuizComponent: React.FC<QuizProps> = (props) => {
  const items = props.flashcard?.items;
  const widthOfBlock = (100 / items.length).toString();
  const width = `w-[${widthOfBlock.toString()}%]`;

 

  for (let i = 0; i <= actualIndex; i  ) {
    console.log("width", width);
    arrayOfProgressBlocks.push(
      <div key={i} className={`${width} border-2 border-blue-500 `} />
    );
  }

  return (
    <div className="h-screen w-full grid place-items-center">
      <div className=" w-screen place-self-end flex gap-2">
        {arrayOfProgressBlocks}
      </div>
    </div>
  );
};

export default QuizComponent;

CodePudding user response：

Tailwind scans your code and then generates a CSS file from the classes it can find. It doesn't actually execute your code, so your custom classes are not included.

More information: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

CodePudding user response：

Width percentages in Tailwind are defined by fractions. You can see the reference here: https://tailwindcss.com/docs/width#:~:text=w-1/2,: 91.666667%;