Some classes (color ones) are not generating. All troubleshooting steps completed.

[JaiRaeWiz-DOL]

I have a Next.js app I generated with create-next-app. I styled a page, and things we're looking good for a while, but at some point in the process, the styling started to disappear. I didn't really notice when. It seemed to be overnight.

I'm using Next 13.5.6 and tailwind 3.

Here's a screenshot of what it looks like now:

However, to give an example, this is what the + button in the upper right is styled as:
<button className="border-blue-500 bg-blue-400 text-xl border-2 rounded-lg px-5 py-4 flex items-center justify-center"> + </button>

SOME of the styles, SEEM to be applied. The rounded-lg, sure, the border-2, sure... but then where's bg-blue-400...? border-blue-500...?

The links on the left, this is what we got:
`<nav
ref={navRef}
className="fixed left-0 top-20 p-5 min-h-screen flex flex-col space-y-2 bg-slate-300"

<Link className="text-white" href="/view/app">App Inventory</Link>
<Link className="text-white" href="/view/dev">Dev Skills</Link>
<Link className="text-white" href="/view/ops">Ops Status</Link>
<Link className="text-white" href="/view/portfolio">Project Portfolio</Link>

`

Ok, we're fixed, we got the position... but where's the bg-slate-300? text-white?

According to the generated CSS, none of these classes are getting generated, so something is going wrong here. My project is in an "app" folder, and my content section:
content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}', ],

Has app included correctly. What could be causing SOME of these classes not to generate? Enough that tailwind is essentially not working? (Now that I typed this up, I realize it's only the color classes. Something about the color classes in particular is not working.)

[wongjn]

Could it be that you have used theme.colors instead of theme.extend.colors to define any custom colors? Otherwise, consider providing a project that reproduces the unexpected behavior.

[JaiRaeWiz-DOL]

That was exactly the issue. I figured it out shortly after posting this. Such a silly mistake.

[asoko2]

hi @wongjn, I'm using theme.extend.colors but the default bg-warning-500 still not found. only that colors.

[wongjn]

Consider checking:

• Tailwind has compiled since you added the class.
• The content file globs sufficiently cover the file that the code appears in.
• String concatenation/interpolation is not used to build the class name.

Otherwise, consider providing a project that reproduces the unexpected behavior.

[asoko2]

I'm so sorry, @wongjn, all this time I was doing dynamic class names all wrong. I haven't checked the docs yet about Dynamic Class Names. I'm doing 'bg-{data.color}-500' all this time. Just checked the docs and already fixed it.

[rozsazoltan]

@asoko2 related:

• Don't construct class names dynamically
• How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?