Tailwind and Angular 20

[ganySA]

Hi

I am struggling to get Tailwind 4.1 to work with Angular 20.0.2.
Has anyone been succesful at this and could share steps?

I continually get the following:

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

I have installed postcss but somehow this does not seem to work with angular.

Thanks

[rozsazoltan]

Just use a suggested new separated PostCSS plugin of TailwindCSS. Related:

https://tailwindcss.com/docs/installation/framework-guides/angular

[AntonioCardenas]

In my case the fix was just install Tailwind v4, PostCSS, and the Tailwind CSS PostCSS Plugin

npm install tailwindcss@4 @tailwindcss/postcss postcss

Create postcss.config.json

Time to configure PostCSS. In the root of your Angular project (where your angular.json file is located), create a file named postcss.config.json with the following content:

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

Import Tailwind Directives in styles. scss

Here, we must do something slightly different because we've chosen SCSS. Other tutorials show using the @import command, but in SCSS, this command is deprecated, and we should substitute it with @use.

Open the src/styles.scss file in your project (this is your global stylesheet) and add the following line:

@use "tailwindcss";

alternative /* In styles.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

[ganySA]

Thanks a lot that has helped me solve the issue - now i am getting a whole range of @apply issues.
Error: Cannot apply unknown utility class bg-zinc-200. Are you using CSS modules or similar and missing @reference? https://tailwindcss.com/docs/functions-and-directives#reference-directive
at onInvalidCandidate (/Users/piotr.stulinski/Documents/GitHub/wacalendar/node_modules/tailwindcss/dist/lib.js:18:1312)

How do i fix this?

[rozsazoltan]

• How do I use tailwindcss @apply directive inside a svelte component <style>
• Using @apply with Vue, Svelte, or CSS modules
• Adding TailwindCSS association to Vue/Svelte/Astro file to disable "css(unknownAtRules): Unknown at rule @apply"
• VSCode Misinterprets SASS Interpolation Syntax with @apply, Showing False Validation Errors

[ganySA]

thanks a lot the @reference "tailwindcss" at the top of the component file has helped me.