# Nextjs Styling

> 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)

- Skill: `comeonoliver/nextjs-styling` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/nextjs-styling`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/nextjs-styling/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/comeonoliver/nextjs-styling

---


# 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/scss.md)
- [references/ant-design.md](references/ant-design.md)
- [references/tailwind.md](references/tailwind.md) (Tailwind/shadcn)

## Patterns

1. **Dynamic Classes**: Use `clsx` + `tailwind-merge` (`cn` utility).
   - _Reference_: [Dynamic Classes & Button Example](references/implementation.md)
2. **Font Optimization**: Use `next/font` to prevent Cumulative Layout Shift (CLS).
   - _Reference_: [Font Setup](references/implementation.md)
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.