CODEWITHSUNDEEP
next.jsutilitytailwind-3
Misha Nesteruk
Misha Nesteruk

Reputation: 33

Tailwind removes dynamically generated classes when using utilities like cn and custom prefixes

I'm using Tailwind CSS in my project, and I have a utility function cn for conditional class names and a withPrefix plugin to dynamically generate class prefixes. Here's a snippet of my code:

import { withPrefix } from "../../plugins/with-prefix";

const TestPage = () => {
  return (
    <div
      className={cn("text-black", withPrefix("[&_p]:", "bg-red-200 absolute"))}
    >
      Test Page
      <p>asdf</p>
      <span>asdf</span>
      <p>asdflasdf</p>
    </div>
  );
};
export default TestPage;

The withPrefix function dynamically generates classes like [&_p]:bg-red-200 and [&_p]:absolute. However, Tailwind's purge mechanism (or JIT mode) removes these dynamically generated classes because it doesn't see them in the source files.

I've tried adding the classes to the safelist in the Tailwind configuration, but since these classes are dynamically generated, I can't know all the possible combinations in advance.

How can I make Tailwind retain these dynamically generated classes? Is there a better way to handle this use case? Any help would be greatly appreciated!

Upvotes: 0

Views: 67

Answers (0)

Related Questions