Styling in Next.js

Styling Options in Next.js

Next.js supports multiple styling approaches out of the box. Here's my take on when to use what:

FeatureWhat it doesWhen to use

Tailwind CSSUtility-first, fast iterationBest for most projects

CSS ModulesScoped .module.css filesGood for component isolation

Global CSSglobals.css imported in layoutFor resets and base styles

CSS-in-JSstyled-components, etc.Only works in Client Components

Tailwind CSS (My Recommendation)

If you chose Tailwind during setup (you should have), it's already configured. Just use utility classes:

src/components/Card.tsx

tsx

1export default function Card({ title, description }: {
2title: string;
3description: string;
4}) {
5return (
6  <div className="border-2 border-black p-6 shadow-[4px_4px_0px_#000] 
7                  hover:translate-x-[-2px] hover:translate-y-[-2px]
8                  hover:shadow-[6px_6px_0px_#000] transition-all">
9    <h2 className="text-2xl font-bold mb-2">{title}</h2>
10    <p className="text-gray-600">{description}</p>
11  </div>
12);
13}

🚀

Tailwind v4 in Next.js 15

Next.js 15 uses Tailwind v4 by default. The config file is simpler, just '@import "tailwindcss"' in your globals.css. No more tailwind.config.js needed for basic usage. Theming goes inline with @theme.

CSS Modules

If you prefer writing actual CSS with scoped class names:

src/components/Card.module.css

css

1.card {
2border: 3px solid #1a1a1a;
3padding: 1.5rem;
4box-shadow: 4px 4px 0px #1a1a1a;
5}
6
7.card:hover {
8transform: translate(-2px, -2px);
9box-shadow: 6px 6px 0px #1a1a1a;
10}
11
12.title {
13font-size: 1.5rem;
14font-weight: 700;
15}

src/components/Card.tsx

tsx

1import styles from "./Card.module.css";
2
3export default function Card({ title }: { title: string }) {
4return (
5  <div className={styles.card}>
6    <h2 className={styles.title}>{title}</h2>
7  </div>
8);
9}

CSS Modules generate unique class names at build time, so you never get naming collisions. Good for teams who prefer traditional CSS.

Styling Options in Next.js

Tailwind CSS (My Recommendation)

CSS Modules

▶Watch and Learn