fix(portal-shell): use .postcssrc.json so tailwind utilities are emitted #75

Merged

julien merged 1 commits from fix/portal-shell/tailwind-source-discovery into main 2026-05-10 02:55:16 +02:00

Conversation 0 Commits 1 Files Changed 3

+6 -6

julien commented 2026-05-10 02:54:51 +02:00

Owner

Copy Link

Copy Source

Summary

The portal-shell scaffold shipped a postcss.config.js, but @angular/build (Angular 17+ esbuild pipeline) does not load that file format — it only reads .postcssrc.json. Result: the @tailwindcss/postcss plugin was never registered, Tailwind ran with no source files visible, generated only its @theme block, and dropped every utility class on the floor.

The page therefore rendered unstyled — black text on white — even though nx build reported success and shipped a 23 KB styles*.css.

Rename / re-encode the config to .postcssrc.json. Same plugin, same options, just the file format Angular's esbuild adapter actually reads.

Verification

	Before	After
Class selectors in dist/apps/portal-shell/browser/styles*.css	0	75 (production)
.text-3xl, .bg-amber-50, .font-semibold etc. emitted	❌	✓
Pages render with intended Tailwind layout	❌	✓

pnpm exec nx build portal-shell --configuration=production
grep -oE '\.[a-zA-Z][a-zA-Z0-9_-]*' dist/apps/portal-shell/browser/styles*.css | sort -u | wc -l
# 75

Doc update

docs/development.md repo-layout walkthrough now reads .postcssrc.json and explicitly calls out that postcss.config.js is ignored by @angular/build — so a future contributor reaching for the legacy filename gets a hint instead of a silent failure.

Test plan

• CI green on this PR.
• Local: bring up the SPA dev server, localhost:4200 shows the styled layout — header bar with brand link, system-status widget with rounded card, footer with the two language links.
• Production build: nx build portal-shell --configuration=production succeeds; dist/.../styles*.css contains tens of utility-class selectors (not just @theme tokens).

## Summary The portal-shell scaffold shipped a `postcss.config.js`, but `@angular/build` (Angular 17+ esbuild pipeline) does **not** load that file format — it only reads `.postcssrc.json`. Result: the `@tailwindcss/postcss` plugin was never registered, Tailwind ran with no source files visible, generated only its `@theme` block, and dropped every utility class on the floor. The page therefore rendered unstyled — black text on white — even though `nx build` reported success and shipped a 23 KB `styles*.css`. Rename / re-encode the config to `.postcssrc.json`. Same plugin, same options, just the file format Angular's esbuild adapter actually reads. ## Verification | | Before | After | | - | - | - | | Class selectors in `dist/apps/portal-shell/browser/styles*.css` | **0** | **75** (production) | | `.text-3xl`, `.bg-amber-50`, `.font-semibold` etc. emitted | ❌ | ✓ | | Pages render with intended Tailwind layout | ❌ | ✓ | ```bash pnpm exec nx build portal-shell --configuration=production grep -oE '\.[a-zA-Z][a-zA-Z0-9_-]*' dist/apps/portal-shell/browser/styles*.css | sort -u | wc -l # 75 ``` ## Doc update `docs/development.md` repo-layout walkthrough now reads `.postcssrc.json` and explicitly calls out that `postcss.config.js` is ignored by `@angular/build` — so a future contributor reaching for the legacy filename gets a hint instead of a silent failure. ## Test plan - [ ] CI green on this PR. - [ ] Local: bring up the SPA dev server, `localhost:4200` shows the styled layout — header bar with brand link, system-status widget with rounded card, footer with the two language links. - [ ] Production build: `nx build portal-shell --configuration=production` succeeds; `dist/.../styles*.css` contains tens of utility-class selectors (not just `@theme` tokens).

julien added 1 commit 2026-05-10 02:54:52 +02:00

fix(portal-shell): use .postcssrc.json so tailwind utilities are emitted ... bb9654cc32

The portal-shell scaffold shipped a `postcss.config.js`, but
`@angular/build` (Angular 17+ esbuild pipeline) does not load that
file format — it only picks up `.postcssrc.json`. Result: the
`@tailwindcss/postcss` plugin was never registered, Tailwind ran
with no source files visible, generated only its `@theme` block,
and dropped every utility class on the floor. The page rendered
unstyled — black text on white — even though `nx build` reported
success and shipped a 23 KB styles.css.

Fix: rename / re-encode the config to `.postcssrc.json`. Same
plugin, same options, just the file format Angular's esbuild
adapter actually reads.

Verified locally:
- Before:  ZERO class selectors in dist/.../styles*.css.
- After:  75 selectors in production build, including the ones
  referenced from header/footer/home/accessibility templates
  (`.text-3xl`, `.bg-amber-50`, `.font-semibold`, etc.).

The repo-layout walkthrough in `docs/development.md` is updated to
reflect the new file name and explicitly call out the gotcha so a
future contributor doesn't reach for `postcss.config.js` again.

julien merged commit e2dd2e4dd8 into main 2026-05-10 02:55:16 +02:00

julien deleted branch fix/portal-shell/tailwind-source-discovery 2026-05-10 02:55:16 +02:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

adastra-bot (AdAstra Bot) julien (Julien Gautier)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: julien/apf_portal#75