tailwind v4 with angular the autocomplete is not working

[heshaShawky]

What version of Tailwind CSS are you using?

v4.0.9

What build tool (or framework if it abstracts the build tool) are you using?

  "dependencies": {
    "@angular/animations": "^19.1.7",
    "@angular/common": "^19.1.7",
    "@angular/compiler": "^19.1.7",
    "@angular/core": "^19.1.7",
    "@angular/forms": "^19.1.7",
    "@angular/platform-browser": "^19.1.7",
    "@angular/platform-browser-dynamic": "^19.1.7",
    "@angular/router": "^19.1.7",
    "@ionic/angular": "^8.4.3",
    "@ngx-translate/core": "^16.0.4",
    "@ngx-translate/http-loader": "^16.0.1",
    "@tailwindcss/postcss": "^4.0.9",
    "postcss": "^8.5.3",
    "rxjs": "~7.8.0",
    "tailwindcss": "^4.0.9",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },

What version of Node.js are you using?

v22.13.1

What operating system are you using?

macOS

Describe your issue

The autocomplete is not working with angular I tried everything, updating the vs code and the extension to the latest versions, and still not working.

as you can see above I am now using the postcss instead what has been before for v3, the v3 projects autocomplete still working fine.

Also after researching I see ppl complains about this too and fixed by removing ( but I don't have that on my vscode settings.json )

"tailwindCSS.experimental.configFile": "src/styles/app.css"

[thecrypticace]

Hi! Can you please provide a reproduction?

[FsFs10]

توكل على القادر على كل شيء في خميس، 27 فبراير، 2025 في 6:12 م، كتب Jordan Pittman < ***@***.***>:

…

Hi! Can you please provide a reproduction? — Reply to this email directly, view it on GitHub <#1238 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BOU3ZJEVCNGLSMVTNUHYE2D2R4TNJAVCNFSM6AAAAABX7PJIMOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOBYGI2TGMBRGI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.*** com> [image: thecrypticace]*thecrypticace* left a comment (tailwindlabs/tailwindcss-intellisense#1238) <#1238 (comment)> Hi! Can you please provide a reproduction? — Reply to this email directly, view it on GitHub <#1238 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BOU3ZJEVCNGLSMVTNUHYE2D2R4TNJAVCNFSM6AAAAABX7PJIMOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOBYGI2TGMBRGI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.*** com>

[achrafmataich]

Hey @heshaShawky, I've faced the same issue, the new tailwindcss v4 method to use with angular is a bit tricky and the VSCode extension still can't solve this issue, but there is a workaround 😄

I read the extension description and in the bottom i found the Troubleshooting section where there is a line that says:

- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.{js,cjs,mjs,ts,cts,mts}`.

So using the new method (via .postcssrc.json) ALONE, cannot activate the extension intellisens. just make sure to add a dummy tailwind.config.js in your project root just like the OLD SCHOOL, and your intellisens is now working!

PS: Don't delete the .postcssrc.json file, keep it! just add the tailwind.config.js and that's it.

Example of a tailwind.config.js config file for Angular:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    './src/**/*.{html,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Happy Coding!

[achrafmataich]

Same issue with React and Next

Hey @thecrypticace i guess the solution gonna be the same for React as my previous reply for @heshaShawky

Just make sure to change the content: './src/**/*.{html,ts}' in tailwind.config.js to your project file types (I guess tsx and jsx)

Try it and let me know.

[lannodev]

I have the same problem. I created a new project following the tailwind doc: https://tailwindcss.com/docs/installation/framework-guides/angular

I also tried to create tailwind.config.js like @achrafmataich said, but it didn't work.

[achrafmataich]

I have the same problem. I created a new project following the tailwind doc: https://tailwindcss.com/docs/installation/framework-guides/angular

I also tried to create tailwind.config.js like @achrafmataich said, but it didn't work.

Hey @lannodev Could you please provide more details about your environment? If you can include a minimal reproduction of your issue as a Git repository, I can test it on my local machine and help identify where the problem might be.

[lannodev]

@achrafmataich After deleting these folders, everything works:

%APPDATA%\Code
%USERPROFILE%\.vscode

I think it was some issue with VS Code

[achrafmataich]

@lannodev Good to know, so there was a problem with your VSCode settings I may say.