nextjs-styling-ui-performance
Zero-runtime CSS strategies (Tailwind) and RSC compatibility.
Installation
Suivez les instructions du dépôt pour votre agent. Consultez les fichiers et dépendances avant l’installation.
Voir la source ↗GuidesInstructions
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 | Recommended | Scoped, zero-runtime. |
| MUI / Chakra (Runtime) | Avoid | Forces use client widely. Degrades performance. |
Patterns
-
Dynamic Classes: Use
clsx+tailwind-merge(cnutility).- Reference: Dynamic Classes & Button Example
-
Font Optimization: Use
next/fontto prevent Cumulative Layout Shift (CLS).- Reference: Font Setup
-
CLS Prevention: Always specify
width/heighton images.
Exemples
Consultez les exemples du dépôt source.
Voir la source ↗Historique source
- Date d’indexation
- 2026-01-20
- Mise à jour de l’index
- 2026-01-26
- Branch
- main
Les dates concernent ce répertoire. Consultez le dépôt pour l’historique du code.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!