rules_js icon indicating copy to clipboard operation
rules_js copied to clipboard

[Bug]: Angular CLI v20.1 Tailwind CSS Integration Broken with Aspect Rules JS

Open JMGomes opened this issue 6 months ago • 1 comments

What happened?

After upgrading to Angular CLI v21, Tailwind CSS directives (@tailwind base, @tailwind components, @tailwind utilities) are no longer processed in Bazel builds using Aspect Rules JS, while the exact same build configuration works perfectly with native ng build.

Expected behavior: Both ng build and bazel build should produce identical CSS output with Tailwind directives processed into actual CSS rules (reset styles, utilities, etc.).

Actual behavior: Bazel builds leave Tailwind directives completely unprocessed in the final CSS output, showing raw @tailwind base; instead of generated Tailwind styles.

Version

Version Aspect Rules JS: Latest (current) Angular CLI: v21.0.0+ Tailwind CSS: v3.3.5 PostCSS: v8.5.6 Node.js: v22.12.0 Bazel: Latest OS: Linux 6.8.0-64-generic

How to reproduce

1. Create a project with Tailwind CSS and Angular CLI v21+
2. Add Tailwind directives to your styles:
3. Configure Bazel build with Aspect Rules JS.

4. Compare outputs:
- ng build app (styles.css) vs bazel build //:web-app-build (styles.css)
The bazel build will not contain any preprocessing

Any other information?

Probable root cause?!?! https://github.com/angular/angular-cli/commit/49a09737d5412c302d09b40de198251bb99789d1 completely rewrote Tailwind integration by:

  1. Removing the old unified tailwind.ts file (deleted 40 lines)
  2. Adding PostCSS config discovery (postcss.config.json, .postcssrc.json)
  3. Modifying automatic Tailwind detection as fallback

The Problem: Aspect Rules JS still uses the old integration logic that was removed/broken in Angular CLI v21. Evidence from Investigation: File Discovery: ✅ Verified tailwind.config.js exists in Bazel sandbox Dependencies: ✅ Confirmed tailwindcss and PostCSS available Processing: ❌ Tailwind plugin never executes

Failed Attempts:

  • PostCSS configs - Completely ignored by Bazel
  • Multiple config locations - File discovery works, processing doesn't Impact:
  • Breaks any Angular project using Tailwind + Bazel builds
  • Forces workaround of using ng build exclusively
  • Creates build system inconsistency

Suggested Fix: Aspect Rules JS needs to implement the new PostCSS configuration discovery mechanism from Angular CLI v21 to maintain feature parity.

JMGomes avatar Jul 30 '25 13:07 JMGomes

Please provide a simple repro of the issue in the form of a failing bazel test

jbedard avatar Jul 30 '25 16:07 jbedard