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

Reactjs – Why are dynamically generated Tailwind CSS classes not applying in Next.js, while static classes are working fine?

I’m building a page using Next.js and Tailwind CSS, where I am dynamically generating some classes based on JavaScript variables. Some classes, like padding and border styles, are working as expected, but Tailwind CSS classes for rounded corners (such as rounded-t-xl and rounded-b-xl) are not being applied, even though the classes are correctly generated in the code.

Here is the code I’m using:

export default function Page() {

  const padding = 'p-2';
  const borderClass = 'border border-gray-800';
  const round = 'xl';
  const roundClass = 'rounded-' + round;
  const roundClassT = 'rounded-t-' + round;
  const roundclassB = 'rounded-b-' + round;

  return (
    <div className={`mt-16 w-96 h-96  mx-auto my-auto flex flex-col ${borderClass} ${roundClass}`}>
      <div className={` w-full ${padding} bg-gray-400 ${roundClassT} `}>
        Header
      </div>
      <div className="flex-grow p-2">
        roundClassT: {roundClassT} <br />
        roundclassB: {roundclassB}
      </div>
      <div className={`w-full ${padding} bg-gray-400 ${roundclassB}`}>
        Footer
      </div>
    </div>
  );
}

Issue:

  • The static Tailwind classes (like border, bg-gray-400, and padding
    classes such as p-2) work fine and are correctly applied.
  • However,the dynamically generated classes for rounded corners
    (rounded-t-xl, rounded-b-xl, rounded-xl) are not applying as
    expected. The corners do not appear rounded even though the
    classes are being correctly generated in the JSX.

Expected Behavior:

  • The rounded-t-xl class should apply rounded corners to the top of the
    element. The rounded-b-xl class should apply rounded corners to the
    bottom of the element. The rounded-xl class should apply rounded
    corners to the entire container.

Environment:

  • Next.js Version: 15.0.4 (with the App Router and src directory
  • structure). Tailwind CSS Version: 3.4.16

I’ve ensured that the class names are correct, but they don’t seem to be applied, while other Tailwind CSS utilities like padding and borders work fine.

Has anyone encountered a similar issue? Any guidance would be appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In context of next.js, i found the solution. We can use Tailwind's safelist feature (in tailwind.config.js) to ensure that dynamic classes are included in the build.

    Example:

    module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // include other paths as necessary
  ],
  safelist: [
    "rounded-t-xl",
    "rounded-b-xl",
    "rounded-xl",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

  2. 0

    As per the documentation:

    The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

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

    Don’t construct class names dynamically

    <div class="text-{{ error ? 'red' : 'green' }}-600"></div>

    In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.
    Instead, make sure any class names you’re using exist in full:

    Always use complete class names

    <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

    You could consider having the classes written in full instead like:

    const roundClass = 'rounded-xl';
const roundClassT = 'rounded-t-xl';
const roundclassB = 'rounded-b-xl';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search