[v4] some classes not applied after migrating to react19

[CiernaOvca]

some of the styles are not being applied properly after trying to migrate to react19
for example background color on the button (specifically on button element, it works on div element)

DOM:

from the devtools I can see that there's a transparent background-color applied from base, not sure

styles in the button component:

const styles = classNames(
    'flex flex-row items-center justify-center text-center gap-2 px-4 py-2 rounded-md border group',
    {
      'bg-green-400 border-green-success text-white hover:bg-green-800 hover:border-green-800 focus:bg-green-800 focus:border-green-800 disabled:bg-gray-800 disabled:border-gray-800':
        variation === 'success',
    }
  );

index.css file:

@import ".node_modules/tailwindcss";

* {
  font-family: "Studio6", sans-serif;
}

@theme {
  --color-*: initial;
  --color-transparent: transparent;
 ...
  --color-green-success: #1a892b;
...
}

can anyone give me an idea of what am I doing wrong?

[wongjn]

It seems like green-400 doesn't exist as a color, because of --color-*: initial. Thus, bg-green-400 does not set any background color.

[wongjn]

You're using green-success for the border color, which does exist since it has been defined after --color-*: initial

[CiernaOvca]

it doesn't matter which color I use, it's not reflected
I tried removing the initial-*, but it doesn't help
also, the same setup was working before migrating to react19

same goes for other properties, such as pointer-cursor or rotate-90

[wongjn]

Seems like it could be that Tailwind is not scanning the file that the code is in. Try explicitly registering that file as a template source. You could also check you've run a Tailwind compilation since making the class name changes.

[CiernaOvca]

In that case, the styles wouldn't be applied altogether.
Again - the setup worked before migrating to react19, so I don't think this has anything to do with the tailwind configuration.

[wongjn]

Consider providing a git repo that reproduces the unexpected behavior.