v4: tailwind.default is not a function when running with Angular 17 and esbuild

[alexciesielski]

What version of Tailwind CSS are you using?

4

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

• nx 19
• angular-cli 17

What version of Node.js are you using?

18.20.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

Installed TW 4 and added @import 'tailwindcss and getting the following error when running nx serve app:

✘ [ERROR] tailwind.default is not a function [plugin angular-sass]

    node_modules/@angular-devkit/build-angular/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:112:74:
      112 │ ...s.postcssProcessor = postcss().use(tailwind.default({ config }));
          ╵                                                       ^

    at setupPostcss (/Users/alexciesielski/Documents/basement/test-app/node_modules/@angular-devkit/build-angular/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:112:75)
    at async setup (/Users/alexciesielski/Documents/basement/test-app/node_modules/@angular-devkit/build-angular/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:122:42)
    at async handlePlugins (/Users/alexciesielski/Documents/basement/test-app/node_modules/esbuild/lib/main.js:1340:9)

[RobinMalfait]

Hey!

For Tailwind CSS v4 you have to use @tailwindcss/postcss@next, but the @angular-devkit might have just tailwindcss baked in. If you can share a minimal reproduction repo we might be able to help you.

In the meantime, you can also use @tailwindcss/cli@next to run the CLI next to your Angular build script and include the generated CSS file.

[alexciesielski]

Thanks! I tried to create a minimal repro here and interestingly I don't get the error, so it seems there is something different in my more advanced setup.

But no styles get generated. I also had to use the --force flag to get the alpha to install because one of the Angular dependencies has a peer defined to allow only ^3.0.0 I guess that answers why no styles are generated...

I will give the CLI a go in the meantime, thanks!