PART 7: STYLING YOUR WEBSITE

CSS in Next.js

You can style Next.js in several ways. Let’s start with the basics.

Global CSS

The layout file imports global styles:

import './globals.css';

This file applies styles to your entire website. Let’s add some styling:

app/globals.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
  background-color: #f5f5f5;
  color: #333;
}

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

This styling applies to every page.

Inline Styles

You can add styles directly to elements:

export default function Home() {
  return (
    <div style={{ backgroundColor: 'blue', padding: '20px' }}>
      <h1 style={{ color: 'white' }}>Hello World</h1>
    </div>
  );
}

Inline styles work but aren’t recommended for large projects because:

1. It’s hard to organize
2. It’s hard to reuse styles
3. It makes components hard to read

Tailwind CSS (Best for Next.js)

Tailwind CSS is included by default in your Next.js project. It’s a utility-first CSS framework.

Instead of writing CSS, you add classes to your HTML:

export default function Home() {
  return (
    <div className="bg-blue-500 p-5">
      <h1 className="text-white text-3xl">Hello World</h1>
    </div>
  );
}

This is the same as:

.div {
  background-color: #3b82f6;
  padding: 20px;
}

.h1 {
  color: white;
  font-size: 30px;
}

But with Tailwind, you don’t have to write CSS. The classes do it for you!

Understanding Tailwind Classes

bg-blue-500 = background color blue, intensity 500

p-5 = padding of 20px (5 × 4px)

text-white = white text color

text-3xl = font size 3x large

Let me show you a complete example using Tailwind:

export default function Navigation() {
  return (
    <nav className="bg-gray-800 text-white">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          <div className="text-2xl font-bold">My Site</div>
          <div className="flex gap-4">
            <a href="/" className="hover:text-blue-400">Home</a>
            <a href="/about" className="hover:text-blue-400">About</a>
            <a href="/contact" className="hover:text-blue-400">Contact</a>
          </div>
        </div>
      </div>
    </nav>
  );
}

Breaking this down:

• bg-gray-800 = dark gray background
• text-white = white text
• max-w-7xl mx-auto = maximum width with centered margin
• px-4 = horizontal padding
• flex justify-between items-center h-16 = flexbox layout, space between items, centered vertically, height 16
• text-2xl font-bold = large bold text
• flex gap-4 = flexbox with gap between items
• hover:text-blue-400 = when hovered, change color

Real-World Example: YouTube Header

YouTube’s header looks like:

[YouTube Logo]    [Search Bar]    [Upload] [Profile]

In Next.js with Tailwind:

import Link from 'next/link';

export default function YouTubeHeader() {
  return (
    <header className="bg-white border-b border-gray-200 sticky top-0">
      <div className="flex justify-between items-center px-4 py-3">
        {/* Logo */}
        <Link href="/" className="text-2xl font-bold text-red-600">
          YouTube
        </Link>

        {/* Search */}
        <input
          type="text"
          placeholder="Search"
          className="border border-gray-300 rounded-full px-4 py-2 w-80"
        />

        {/* Right side icons */}
        <div className="flex gap-4">
          <button className="px-4 py-2 rounded-full border border-blue-500 text-blue-500">
            Upload
          </button>
          <button className="w-8 h-8 rounded-full bg-gray-300">
            👤
          </button>
        </div>
      </div>
    </header>
  );
}

When you add this to your layout, you get a YouTube-like header!

CSS Modules (For Complex Components)

For larger projects, you might want to organize styles better. CSS Modules are a good option:

Create app/button.module.css:

.primaryButton {
  background-color: #0066cc;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.primaryButton:hover {
  background-color: #0052a3;
}

Use it in a component:

import styles from './button.module.css';

export default function Button() {
  return (
    <button className={styles.primaryButton}>
      Click Me
    </button>
  );
}

The advantage: styles are scoped (only apply to this component) and you get autocomplete.

Common Beginner Mistake #5: Wrong Tailwind Syntax

New developers write:

// ❌ Wrong
<div className="padding: 20px">Content</div>

// ✅ Correct
<div className="p-5">Content</div>

Tailwind is NOT CSS. It’s a set of predefined classes.

Exercise 4: Style Your Website

1. Add Tailwind classes to your navigation
2. Create a styled homepage with an image
3. Create a styled about page
4. Make sure navigation looks good on all pages