Skip to content

Fix Next.js + Tailwind v4 PostCSS requirement #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
policyengine wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix Next.js + Tailwind v4 PostCSS requirement #156

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions skills/tools-and-apis/policyengine-frontend-builder-spec-skill/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand All @@ -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`

Expand Down Expand Up @@ -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
Expand Down