nextjs-styling

name	nextjs-styling
description	Zero-runtime CSS strategies (Tailwind) and RSC compatibility. Use when implementing Tailwind CSS or zero-runtime styling compatible with React Server Components. (triggers: **/*.css, tailwind.config.ts, **/components/ui/*.tsx, tailwind, css modules, styled-components, clsx, cn)

Styling & UI Performance

Priority: P1 (HIGH)

Prioritize Zero-Runtime CSS for Server Components.

Library Selection

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.

Library Patterns

For specific library setups, see:

• references/scss.md
• references/ant-design.md
• references/tailwind.md (Tailwind/shadcn)

Patterns

1. Dynamic Classes: Use clsx + tailwind-merge (cn utility).
   • Reference: Dynamic Classes & Button Example
2. Font Optimization: Use next/font to prevent Cumulative Layout Shift (CLS).
   • Reference: Font Setup
3. CLS Prevention: Always specify width/height on images.

Anti-Patterns

• No runtime CSS-in-JS with RSC: MUI/Chakra force 'use client'; prefer Tailwind or CSS Modules.
• No <img> without dimensions: Always set width/height or use fill to prevent CLS.
• No hardcoded conditional classes: Use clsx+tailwind-merge (cn) for dynamic styles.
• No Google Fonts <link> tag: Use next/font for zero-CLS self-hosted fonts.