feat(awe-client-angular): replace vendored Bootstrap 3 with Tailwind and an AWE compatibility layer

Problem to solve

Bootstrap 3.3.2 is copied and patched inside less/libs alongside the pixel-admin theme: 45,848 lines of LESS that compile into a styles.css of 1.6 MB downloaded by every user. Tailwind only emits the classes actually used and shares tokens with the new client. Tailwind is chosen over Bootstrap 5 because the compatibility cost is the same either way: XML descriptors use Bootstrap 3 classes in the style attribute (1,538 occurrences in the framework and the test app alone: col-xs-12 303 times, col-xs-6 259 times, panel-body 85 times, pull-right 44 times), and Bootstrap 5 also renames or removes these classes.

Existing issue #755 ("Refactor and upgrade CSS and LESS stylesheets") is superseded by / merged into this issue.

Further details

Impact on existing AWE 4 products (level 3 - High): the compatibility layer ships by default and keeps the style attribute in XML descriptors working without touching a single screen. For hand-copied HTML templates, a class-equivalence table and an assisted translation tool are published. Products that want arbitrary Tailwind utilities add their own optional, documented build step.

Effort: L (1-3 weeks) Delivery phase: 2 (major version, controlled breakage) Development order: 14 (Block 2 - Frontend)

Proposal

  • Replace Bootstrap and pixel-admin with Tailwind v4, built on the tokens from #770
  • Rewrite the 61 directive templates
  • Reimplement, without jQuery, the behavior Bootstrap used to provide (modal, tabs, dropdowns) as native directives
  • Build an AWE compatibility stylesheet using @apply to implement the Bootstrap 3 classes that appear in XML descriptors (grid, panel, buttons, pull, hidden/visible utilities), plus a fixed list of grid utilities the framework always emits (Tailwind cannot scan each product's runtime XML)
  • Publish a class-equivalence table and an assisted migration tool for hand-copied HTML templates

What does success look like, and how can we measure that?

  • All 61 directive templates render with Tailwind and no Bootstrap/pixel-admin CSS is shipped
  • styles.css size drops well below the current 1.6 MB baseline
  • The 1,538 Bootstrap-3-class occurrences in XML style attributes keep rendering correctly through the compatibility layer
  • A published class-equivalence table and migration tool cover the top Bootstrap 3 classes used by client projects

Links / references

  • Depends on: #770, #765
  • Part of the AWE 5 evolution plan (initiative 2 of 27, development order 14).
Edited by Pablo Javier García Mora