From fa37ed4cc68786c505eb915a5e46e95a7c8c4a64 Mon Sep 17 00:00:00 2001 From: policyengine-bot Date: Sat, 9 May 2026 18:41:36 +0000 Subject: [PATCH] Fix Next.js + Tailwind v4 PostCSS requirement MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Next.js requires postcss.config.mjs with @tailwindcss/postcss plugin. The previous documentation incorrectly stated PostCSS was not needed. Fixes based on policyengine-ads-dashboard migration (PR #2). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../SKILL.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/skills/tools-and-apis/policyengine-frontend-builder-spec-skill/SKILL.md b/skills/tools-and-apis/policyengine-frontend-builder-spec-skill/SKILL.md index 21ae0b1..f2855eb 100644 --- a/skills/tools-and-apis/policyengine-frontend-builder-spec-skill/SKILL.md +++ b/skills/tools-and-apis/policyengine-frontend-builder-spec-skill/SKILL.md @@ -13,14 +13,21 @@ Authoritative specification for all PolicyEngine frontend projects (dashboards a The application MUST use **Tailwind CSS v4** for all styling. Tailwind utility classes are the primary styling mechanism. -- MUST install `tailwindcss` (v4+) +- MUST install `tailwindcss` (v4+), `@tailwindcss/postcss`, and `postcss` as devDependencies +- MUST have a `postcss.config.mjs` containing: + ```js + export default { + plugins: { + "@tailwindcss/postcss": {}, + }, + }; + ``` - MUST have a `globals.css` containing: ```css @import "tailwindcss"; @import "@policyengine/ui-kit/theme.css"; ``` - MUST NOT have a `tailwind.config.ts` or `tailwind.config.js` — Tailwind v4 uses `@theme` in CSS instead -- MUST NOT have a `postcss.config.js` or `postcss.config.mjs` — Tailwind v4 does not require PostCSS - MUST NOT use `@tailwind base; @tailwind components; @tailwind utilities;` — use `@import "tailwindcss"` instead - MUST NOT use plain CSS files or CSS modules (`*.module.css`) for layout or styling - MUST NOT use other CSS-in-JS libraries (styled-components, emotion, vanilla-extract) @@ -238,6 +245,7 @@ DASHBOARD_NAME/ │ └── useCalculation.ts # React Query hooks ├── public/ ├── next.config.ts +├── postcss.config.mjs ├── tsconfig.json ├── package.json ├── vitest.config.ts @@ -262,6 +270,7 @@ DASHBOARD_NAME/ **Development:** - `typescript`, `@types/react`, `@types/react-dom`, `@types/node` +- `@tailwindcss/postcss`, `postcss` - `vitest`, `@vitejs/plugin-react`, `jsdom` - `@testing-library/react`, `@testing-library/jest-dom` @@ -291,7 +300,7 @@ Note: `@vitejs/plugin-react` is only used by Vitest for JSX transform during tes - MUST NOT use other bundlers (Webpack, Parcel, esbuild) - MUST NOT use other meta-frameworks (Remix, Gatsby, Astro) - MUST NOT use the Next.js Pages Router — use App Router only -- MUST NOT have `tailwind.config.ts` or `postcss.config.js` — Tailwind v4 uses `@theme` in CSS +- MUST NOT have `tailwind.config.ts` or `tailwind.config.js` — Tailwind v4 uses `@theme` in CSS - MUST NOT use `@tailwind base; @tailwind components; @tailwind utilities;` — use `@import "tailwindcss"` - MUST NOT use plain CSS files or CSS modules for layout/styling - MUST NOT use styled-components, emotion, or vanilla-extract