Utility classes are not applying in React 19 with Vite configuration and a .scss file in version 4.

[chinmoy228]

Node version- 20.11,0

[wongjn]

As per the documentation:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

Since Tailwind is designed for modern browsers, you actually don't need a preprocessor for things like nesting or variables, and Tailwind itself will do things like bundle your imports and add vendor prefixes.

You probably need to do this change:

-@import "tailwindcss";
+@import "tailwindcss/index.css";

If that still doesn't make it work, consider providing a project that reproduces the undesired behavior.

[wongjn]

Change the same scss file.

[chinmoy228]

Not working. Still same

[wongjn]

Consider providing a project that reproduces the undesired behavior.

[chinmoy228]

Do I need to provide code snippets?

[wongjn]

Please provide a full project.