Tailwind seems like not rendering grid properly

Question

I am trying to create GridContainer and GridItem components to implement tailwind grid inside of them, but it seems like I am getting very strange behaviour.. Commented code is what I am trying to accomplish inside my components. And it works on first load, but when i play with my props for example, if i change first two items from 6, 6 to 3, 9 and save it may not change on screen, or it may render it with wrong sizes.. But when i uncomment code above and save, then it reacts on the change and updates the view both displaying new div(from comment) but also updates the changes from the code below... Any idea what's going on ? version: "tailwindcss": "^3.2.1", Here is my code:

    import React, { PropsWithChildren } from "react";

export const Test = () => {
  return (
    <div className="w-full">
      {/* <div className="grid grid-cols-12 gap-1">
            <div className="col-span-6 border">test</div>
            <div className="col-span-6 border">test</div>
            <div className="col-span-6 border">test</div>
            <div className="col-span-6 border">test</div>
          </div> */}
      <GridContainer>
        <GridItem size={6}>
          <div className="border">test</div>
        </GridItem>
        <GridItem size={6}>
          <div className="border">test</div>
        </GridItem>
        <GridItem size={6}>
          <div className="border">test</div>
        </GridItem>
        <GridItem size={6}>
          <div className="border">test</div>
        </GridItem>
      </GridContainer>
    </div>
  );
};

const GridContainer: React.FC<PropsWithChildren> = ({ children }) => {
  return <div className="grid grid-cols-12">{children}</div>;
};

interface TestProps extends PropsWithChildren<{}> {
  size?: number;
}
const GridItem: React.FC<TestProps> = ({ size, children }) => {
  return <div className={`border col-span-${size ? size : 1}`}>{children}</div>;
};

export default Test;

Here is my tailwind config:

function withOpacity(variableName) {
  return ({ opacityValue }) => {
    if (opacityValue !== undefined) {
      return `rgba(var(${variableName}), ${opacityValue})`;
    }
    return `rgb(var(${variableName}))`;
  };
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  darkMode: "class",
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/react-tailwindcss-select/dist/index.esm.js",
  ],

  theme: {
    extend: {
      textColor: {
        skin: {
          base: withOpacity("--color-text-base"),
          muted: withOpacity("--color-text-muted"),
          inverted: withOpacity("--color-text-inverted"),
        },
      },
      backgroundColor: {
        skin: {
          fill: withOpacity("--color-fill"),
          accent: withOpacity("--color-accent"),
          "accent-hover": withOpacity("--color-accent-hover"),
          muted: withOpacity("--color-muted"),
          primary: "var(--color-primary)",
        },
      },
      gradientColorStops: {
        skin: {
          hue: withOpacity("--color-fill"),
        },
      },
    },
  },
  plugins: [],
};

Answer 1

Tailwind needs to see the class names as unbroken, full strings, not strings constructed via interpolation or concatenation.

Here is some more information: https://tailwindcss.com/docs/content-configuration#dynamic-class-names