sass - How to install TailwindCSS on Angular 19 that uses SCSS? - Stack Overflow

admin管理员组

文章数量:1305109

I have an Angular 19 app which uses SCSS and I have TailwindCSS 3.4.17 setup and it works.

Now I wanna upgrade to TailwindCSS v4. I follow the official instructions to install it on Angular from here and I get errors.

[WARNING] Deprecation [plugin angular-sass]

src/styles/_tailwind.scss:1:8:
  1 │ @import "tailwindcss";
    ╵         ^

So I do @use "tailwindcss"; and that's gone. But I also get:

X [ERROR] Cannot apply unknown utility class: bg-gray-100 [plugin angular-sass]

node_modules/tailwindcss/dist/lib.js:17:296:
  17 │ ...r,{onInvalidCandidate:x=>{throw new Error(`Cannot apply 

unknown... ╵

So I removed all the @apply in my scss files.

The error was gone but the tailwind.config.js was not used. Turns out the docs says:

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.

If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

CSS @config "../../tailwind.config.js";

So I added the @config file to _tailwindcss.scss which is included in my styles.scss file. I got errors again:

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:2:8:
  2 │ @import 'src/styles.scss';

So my question is basically this:

• What is going on with TailwindCSS team?
• Why they don't support SCSS?

I have an Angular 19 app which uses SCSS and I have TailwindCSS 3.4.17 setup and it works.

Now I wanna upgrade to TailwindCSS v4. I follow the official instructions to install it on Angular from here and I get errors.

[WARNING] Deprecation [plugin angular-sass]

src/styles/_tailwind.scss:1:8:
  1 │ @import "tailwindcss";
    ╵         ^

So I do @use "tailwindcss"; and that's gone. But I also get:

X [ERROR] Cannot apply unknown utility class: bg-gray-100 [plugin angular-sass]

node_modules/tailwindcss/dist/lib.js:17:296:
  17 │ ...r,{onInvalidCandidate:x=>{throw new Error(`Cannot apply 

unknown... ╵

So I removed all the @apply in my scss files.

The error was gone but the tailwind.config.js was not used. Turns out the docs says:

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.

If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

CSS @config "../../tailwind.config.js";

So I added the @config file to _tailwindcss.scss which is included in my styles.scss file. I got errors again:

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:2:8:
  2 │ @import 'src/styles.scss';

So my question is basically this:

• What is going on with TailwindCSS team?
• Why they don't support SCSS?

• angular
• sass
• tailwind-css
• tailwind-css-4

Share Improve this question Follow edited Feb 4 at 21:38 rozsazoltan 9,31155 gold badges1919 silver badges4242 bronze badges asked Feb 4 at 20:40 armarm 19644 silver badges1717 bronze badges 3

• 1 At least in the docs, they suggest you "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." – Wongjn Commented Feb 4 at 20:46
• 3 That is horrible. A library shouldn't dictate how the framework is setup. They don't support a feature of angular. So either support everything in angular, or don't support angular at all. This is unacceptable imo. Thanks for the link. I didn't see it before. I won't use tailwindcss 4 and I'll use another library from now on. – arm Commented Feb 4 at 21:14
• @arm did you find any workaround in the meantime? We are facing the same issue with angular material in combination with tailwind – Klaus Native Commented 19 hours ago

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 4

Note: Although I wanted to mark it as a duplicate of a similar answer, the question is entirely different-only the conclusion is similar. Therefore, I'll leave the relevant parts of the documentation here. The key point is that starting from TailwindCSS v4, no preprocessor is needed anymore.

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 RobinMalfait:
  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.

I'm using Angular v19, Angular Material v19 & Parts of Tailwind CSS v4.

Docs:

• Tailwind + Angular
• Upgrade Guide

Run to upgrade

npx @tailwindcss/upgrade@next

Run to install

npm install tailwindcss @tailwindcss/postcss postcss --force

Add .postcssrc.json

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

I added themes/_tailwind.css

@import "tailwindcss/theme";
@import "tailwindcss/utilities";

And updated my styles.scss to include

@use "themes/tailwind";

This also helped me fix auto-complete issue for VS Code tailwindcss/intellisense extension.

本文标签： sassHow to install TailwindCSS on Angular 19 that uses SCSSStack Overflow