From e2dd2e4dd8442d8d91ce8bc8f3eedb2b3a5420e9 Mon Sep 17 00:00:00 2001 From: Julien Gautier Date: Sun, 10 May 2026 02:55:15 +0200 Subject: [PATCH] fix(portal-shell): use .postcssrc.json so tailwind utilities are emitted (#75) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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). --------- Co-authored-by: Julien Gautier Reviewed-on: https://git.unespace.com/julien/apf_portal/pulls/75 --- apps/portal-shell/.postcssrc.json | 5 +++++ apps/portal-shell/postcss.config.js | 5 ----- docs/development.md | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 apps/portal-shell/.postcssrc.json delete mode 100644 apps/portal-shell/postcss.config.js diff --git a/apps/portal-shell/.postcssrc.json b/apps/portal-shell/.postcssrc.json new file mode 100644 index 0000000..e092dc7 --- /dev/null +++ b/apps/portal-shell/.postcssrc.json @@ -0,0 +1,5 @@ +{ + "plugins": { + "@tailwindcss/postcss": {} + } +} diff --git a/apps/portal-shell/postcss.config.js b/apps/portal-shell/postcss.config.js deleted file mode 100644 index e564072..0000000 --- a/apps/portal-shell/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - plugins: { - '@tailwindcss/postcss': {}, - }, -}; diff --git a/docs/development.md b/docs/development.md index 1a0fda1..e5b2232 100644 --- a/docs/development.md +++ b/docs/development.md @@ -21,7 +21,7 @@ apf_portal/ │ ├── portal-shell/ # Angular 21 SPA (zoneless, standalone, Signals, Vitest, SCSS) │ │ ├── public/ # static assets │ │ ├── src/ # entry, app config, routes, styles -│ │ ├── postcss.config.js # Tailwind PostCSS plugin +│ │ ├── .postcssrc.json # Tailwind PostCSS plugin (required by @angular/build esbuild — postcss.config.js is ignored) │ │ └── project.json # Nx project config (build, serve, test, lint targets) │ ├── portal-shell-e2e/ # Playwright e2e for portal-shell │ ├── portal-bff/ # NestJS 11 BFF (Express adapter, ValidationPipe, Jest)