Menu
Implement zero-runtime CSS with Tailwind, CSS Modules, and the cn() utility for RSC-compatible styling in Next.js. Use when choosing a styling library, creating dynamic class utilities, or optimizing fonts with next/font.
| name | nextjs-styling |
| description | Implement zero-runtime CSS with Tailwind, CSS Modules, and the cn() utility for RSC-compatible styling in Next.js. Use when choosing a styling library, creating dynamic class utilities, or optimizing fonts with next/font. |
| metadata | {"triggers":{"files":["**/*.css","tailwind.config.ts","**/components/ui/*.tsx"],"keywords":["tailwind","css modules","styled-components","clsx","cn"]}} |
Prioritize Zero-Runtime CSS for Server Components.
cn utility — Combine clsx + tailwind-merge for dynamic classes.next/font for zero-CLS self-hosted fonts.width/height or fill on <Image>.| Library | Verdict | Reason |
|---|---|---|
| Tailwind / shadcn | Preferred (P1) | Zero-runtime, RSC compatible. Best for App Router. |
| CSS Modules / SCSS | Recommended | Scoped, zero-runtime. Good for legacy projects. |
| Ant Design | Supported | Use with Client Component wrappers for RSCs. |
| MUI / Chakra (Runtime) | Avoid | Forces use client widely. Degrades performance. |
For specific library setups, see:
clsx + tailwind-merge (cn utility).next/font to prevent Cumulative Layout Shift (CLS).width/height on images.'use client'; prefer Tailwind or CSS Modules.<img> without dimensions: Always set width/height or use fill to prevent CLS.clsx+tailwind-merge (cn) for dynamic styles.<link> tag: Use next/font for zero-CLS self-hosted fonts.Standardize BRD and BRD-lite discovery for business goals, stakeholder impact, current-to-future state, and measurable value outcomes. Use when creating BRD, business case, project justification, ROI narrative, or AS-IS to TO-BE scope.
Standardize PRD discovery and drafting for product scope, user outcomes, requirement IDs, and acceptance criteria. Use when creating PRD, product requirements, feature specification, or acceptance criteria plan.
Standardize SRS and FRS specifications for technical behavior, interfaces, data contracts, quality constraints, and verification mapping. Use when writing SRS, functional specification, system behavior requirements, API/data contracts, or non-functional thresholds.
Clarify a rough product or engineering idea into a BRD-lite brief (Why) with measurable business value.
Turn an approved PRD or implementation goal into SRS/FRS technical requirements (How), architecture, contracts, and verification decisions.
Plan a feature from BRD-lite brief or clear intent into PRD (What), decisions, implementation plan, and task slices.