Support Angular Scss with Tailwind 4

[danielehrhardt]

Support Angular Scss with Tailwind 4

[wongjn]

Thank you for the suggestion. I've converted your issue to an Ideas discussion post as that's where we put feature requests 👍

[rozsazoltan]

Starting from TailwindCSS v4, preprocessors are no longer officially supported - it aims to function as its own preprocessor, with LightningCSS working under the hood to make this possible.

You can use TailwindCSS and SCSS in parallel, but not together. For example:

• Example configuration TailwindCSS with SCSS (It's not exactly an answer for Next.js, but that's irrelevant - I believe the underlying logic is clear.)

./assets/styles/scss/main.scss

@use "./tailwind.css";

./assets/styles/scss/tailwind.css

@import "tailwindcss";

@theme {
  --color-neutral-0: #111;
}

Related:

• @import "tailwindcss"; does not work when used in a file with an .scss extension
• How to use @apply in Tailwind v4?
• Does TailwindCSS v4.1 support Angular v15?
• Cannot build Angular 14 and TailwindCSS 4

But the official recommendation is to drop it entirely, and its compatibility issues will not be given priority in the future:

Deprecated: preprocessors support

Sass, Less, and Stylus

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.

• Compatibility - TailwindCSS v4 Docs

Sorry for the inconvenience here, however right now we don't support migrating .scss or .less files. Doing so would require us to be able to understand the scss/sass and less syntax to make changes. But even if we do that, Tailwind CSS v4 isn't really compatible with these files anyway.

I would recommend to see if you can rename the file(s) to .css and try again. You might notice that sometimes people use scss for features such as nested css, which should just work already in Tailwind CSS v4 (and modern browsers). So there is a good chance that you might not need .scss files at all.

Again, sorry about the inconvenience here, but if you can migrate to normal .css files, then upgrading using the upgrade tool should just work.

• tailwindlabs/tailwindcss #15716 by Robin Malfait:
  Migration tool doesn't recognize .scss files - GitHub

Simply put, TailwindCSS v4 removes the need for Sass and other preprocessors. The TailwindCSS v4 ecosystem can independently provide the functionality that these preprocessors offered.

You can read about that in our compatibility guide but the short answer is that we do not support SCSS files with the Vite plugin. If you really need it for some reason, you can try to build your own SCSS implementation with the PostCSS plugin and by controlling the execution order but both SCSS and Tailwind CSS are pre-processors that extend CSS and cause a conflict in some areas, so that's not something that we can support unfortunately.

• tailwindlabs/tailwindcss #16793 by Philipp Spiess:
  TailwindCSS v4 why ignores .scss files - GitHub

[itea-dev]

Tailwind without SCSS support is impractical for Angular projects, as most rely heavily on SCSS. Switching to plain CSS isn't a viable option, leaving us stuck on Tailwind 3.

[travisBradfield]

I've got the exact same problem. And now because of this using the tailwind components from the component library has become impossible.

[rozsazoltan]

Related:

• @import "tailwindcss"; does not work when used in a file with an .scss extension
• Support Angular Scss with Tailwind 4 #18364 (comment)

[danielehrhardt]

Please fix

[Kinqdos]

Can't tailwind be used along with scss? In my case all of the existing styles (even material styles) are getting removed from the build when adding

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

to .postcssrc.json. Is this intended? Why can't I use scss in combination with tailwind? I would put all tailwind related stuff into css while keeping my existing scss files?

[rozsazoltan]

• https://tailwindcss.com/docs/compatibility#sass-less-and-stylus

[danielehrhardt]

It was a bad idea to it like that. There should be a compability to sass.

[Kinqdos]

Sure I understand that and I dont want to use tailwind with scss. As I sad why can't I keep the tailwind stuff in css files. Tailwind generates their css files. And my scss files are loaded seperate from that? I don't see my I can't use both as long as I dont do tailwind stuff directly in scss?

[itea-dev]

TailwindCSS v3 was great but V4 is a step back