NextJS 14, Tailwind 3.3.5, how do I get classnames in safelist to apply to css build?

Question

I have a NextJS app with tailwind and Next-Themes that is deployed with SST. I have been running into issues trying to use dynamic classnames that are returned from a function. Classic case of the simplest goal turning into 2 days of bug fixing.

I have read a ton of documentation on NextJS's site, Tailwind, Stack Overflow, and GitHub and tried every variation that I could find and nothing worked.

Here is my goal:

I have created a button component that can receive a type as a prop (warning, success, danger, etc.) and it will then generate a button with the correct styles. This got a bit more complicated because of 2 factors. A. I have a custom color in my tailwind.config.ts, and, B. I am dynamically assigning variants (hover, shade, color) based on the button type and the button state (selected, hovered, disabled, etc).

Before I get a slew of comments telling me that these kind of configurations go against the point of tailwind, and won't work due to JIT as of 3.0. Yeah, you're mostly correct, but this is definitely doable.

Here is what I have tried:

• I have added a purge object to my tailwind config which kind of worked, but since I am using v3.3, this isn't how a safelist is defined
• I created a safelist object with hardcoded variables:

hover:bg-red-500,

and this worked, but want optimal because I need to create quite a few variants for each of the states.

• I tried using regex to inject all the possible options:

/(bg|border|text)-(zinc|red|green|yellow)-(100|200|300|400|500|600|700|800|900)/,

but this wouldn't end up modifying the built version of the .next/server/app/css, but the non-regex version would... weird.

• I modified my paths in the tailwind config.content, but I know this isn't the issue because the other styles were compiling just fine.
• I ran the minify CLI command that tailwind recommends for production builds, (https://tailwindcss.com/docs/optimizing-for-production)
• I tried removing portions of the regex pattern so only the colors and the shades were regex:

/bg-(zinc|sniprBlue|red|green|yellow)-(100|200|300|400|500|600|700|800|900)/,

• I screwed with my postcss.config.js and both didn't work AND broke other things in the .next node modules.
• I modified my globals.css to use @imports instead of @tailwind, this did nothing.
• So, I started actually investigating my compiled css file and seeing what was being added to it, and of course, any classname that I used once in the app worked -So then I took the advice of a GitHub forum comment and wrote a function that would inject a hidden component with each classname but this was a gross loop within a loop x4. Not ideal and not good code, and for whatever reason this would just hang my compiling process (not entirely surprising since it has to create so many combinations:

const colors = ["zinc", "red", "green", "yellow"]
const shades = ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
const elements = ["bg", "text", "border"]
const states = ["", "hover:"]

let safelist = []

for (const state of states) {
  for (const element of elements) {
    for (const color of colors) {
      for (const shade of shades) {
        safelist.push(`${state}${element}-${color}-${shade}`)
      }
    }
  }
}

• Finally I found a comment on SO (Is there a proper place to put tailwindcss classes that you explicitly need loaded (besides inline comments)?) that only had one upvote but was super helpful. This pointed me to the tailwind play ui that allows you to plug in regex and see what css styles it generates for the @tailwind base classes.

So if you run into this issue using a similar stack, here is what worked for me (I know not a question, but I am not going to leave y'all hanging)

1. Kill you app
2. Delete your .next folder
3. Copy the regex you need from the tailwind helper, in my case, my beginning of my module.exports looks like this (note the "$" at the end of the regex, this eliminates trailing opacity values):

module.exports = {
  darkMode: ["class"],
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  safelist: [
    {
      pattern:
        /(bg|text|border)-(zinc|red|green|yellow)-(100|200|300|400|500|600|700|800|900)$/,
      variants: ["hover"],
    },
  ],
// ...additional config 

4. Run npm run dev (or whatever your start command is) and your .next folder will regenerate.
5. Refresh your browser and your new css files will generate in your .next folder.

And that should do it.

My other relevant files:

src/app/globals.css (first 3 lines):

@tailwind base;
@tailwind components;
@tailwind utilities;
//... remaining css

./postcss.config.js (all lines):

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

src/app/layout.tsx (first line):

import "./globals.css"
//... remaining tsx

tailwind.config.ts (first 13 lines):

const plugin = require("tailwindcss/plugin")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  safelist: [
    {
      pattern:
        /(bg|text|border)-(zinc|red|green|yellow)-(100|200|300|400|500|600|700|800|900)$/,
      variants: ["hover"],
    },
  ],

And now I can create dynamic classnames like this and by calling this function, we can dynamically create classnames based on the current state of the button:

const colorClassName = () => {
    return `${borderOrBg}-${baseColors[color]}-${shade} hover:${borderOrBg}-${
      baseColors[color]
    }-${shade + 200}`
  }

And it works as expected.

I truly hope this saves someone some time!