Styling (e.g. Tailwind CSS)
What this layer solves
Styling turns structure into something readable and on-brand: spacing, type, color, responsive layout. Without a system, every screen becomes one-off CSS spaghetti.
Options
| Approach | Best for | Tradeoffs |
|---|---|---|
| Tailwind CSS | Fast iteration, consistent spacing scale, great with component frameworks | HTML can look busy; needs learning curve |
| CSS Modules | Scoped styles, less runtime | More files to manage |
| styled-components / Emotion | Dynamic theming in JS | Runtime cost; SSR setup |
| Component libraries (shadcn/ui, Radix, MUI) | Accessible primitives + speed | Visual sameness if you don’t customize |
NK Wiki default: Tailwind + optional shadcn/ui-style components — common in modern Next.js tutorials.
Outline: Tailwind with Next
- Tailwind is usually added at
create-next-app— confirmtailwind.configexists. - Learn utility basics: spacing scale, flex/grid, responsive prefixes (
md:,lg:). - Pick fonts (e.g.
next/font) and colors early — fewer debates later. - Use a design token mindset: repeat the same radii and shadows.
Official links
- Tailwind CSS
- shadcn/ui (if you adopt components)
When to pick an alternative
- Plain CSS Modules if designers hand you static comps and you dislike utilities.
- Full UI kit (MUI) if enterprise widgets matter more than bespoke look.
Last reviewed: April 2026.
Last updated on