name: Next.js Styling & UI Performance description: Zero-runtime CSS strategies (Tailwind) and RSC compatibility. metadata: labels: [nextjs, styling, tailwind, css] triggers: files: ['**/*.css', 'tailwind.config.ts', '**/components/ui/*.tsx'] keywords: [tailwind, css modules, styled-components, clsx, cn]

Styling & UI Performance

Prioritize Zero-Runtime CSS for Server Components.

Library	Verdict	Reason
Tailwind / shadcn	Preferred (P1)	Zero-runtime, RSC compatible. Best for App Router.
CSS Modules	Recommended	Scoped, zero-runtime.
MUI / Chakra (Runtime)	Avoid	Forces `use client` widely. Degrades performance.

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

chat Comments (0)

chat_bubble_outline

No comments yet. Be the first to share your thoughts!