Can't get v4 to work with PostCSS

[stevengunneweg]

I'm trying to use Tailwind V4 in combination with PostCSS with Angular but have no luck getting it to work.

I created a brand new Angular project with the cli and tried both of the following with no luck

• Add Tailwind v3 config (works) and then migrate to v4 (https://tailwindcss.com/docs/v4-beta#upgrading-from-v3)
• Add Tailwind v4 config directly to the project (https://tailwindcss.com/docs/v4-beta#installing-with-post-css)

I also tried other things I encountered in issues

• Set the base property in postcss.config.js
• Add a @source to my style.css

When I run the Tailwind CLI I do see correctly compiled css (npx @tailwindcss/cli -i src/styles.css -o dist/output.css).

It seems that PostCSS is not triggered with the @tailwindcss/postcss dependency and thus does not compile the css with Tailwind.

Reproduction

Did anyone else experience this or perhaps an idea how to resolve it?

[sharathdaniel]

You need tailwind.config.js in your root directory. Even though for tailwind 4 it is not needed, but for Angular to work with tailwind, you still need it.

This is how my tailwind.config.js looks like

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}"
  ],
  plugins: [],
}

• The config file should be loaded in the main css file like this.
• You don't need Tailwind CLI with this method.
• postcss config file should be in json format.

[stevengunneweg]

Thanks for your reply.
I had tried adding the Tailwind config file but this resulted in an error. Changing the PostCSS config file to JSON was the only thing I hadn't tried yet.
With above steps I managed to get it to work. Thank you for your help!