Module 22 — Tailwind CSS in Next.js
Tailwind CSS is a utility-first CSS framework that allows you to build modern interfaces directly in your React and Next.js components.
Instead of creating a separate CSS class for every component:
1.card { 2 padding: 24px; 3 border-radius: 12px; 4 background: white; 5}
you can compose styles using utility classes:
1<div className="rounded-xl bg-white p-6"> 2 Course Card 3</div>
This makes Tailwind especially useful for Next.js applications where UI components are frequently created and composed.
Why Tailwind CSS?
A traditional CSS workflow might look like:
1Component 2 ↓ 3CSS Class 4 ↓ 5CSS File 6 ↓ 7Styles
Tailwind provides:
1Component 2 ↓ 3Utility Classes 4 ↓ 5Rendered UI
For example:
1<button className="rounded-lg bg-blue-600 px-5 py-2 text-white hover:bg-blue-700"> 2 Enroll Now 3</button>
The styling is visible directly where the component is defined.
Tailwind Installation
In a modern Next.js project, Tailwind can be added using the official Tailwind setup for the version you are using.
The general workflow is:
1npm install tailwindcss
Then configure Tailwind according to the current version and your Next.js project structure.
Your application will typically contain a global stylesheet such as:
1app/ 2├── globals.css 3├── layout.tsx 4└── page.tsx
The global stylesheet is imported by the root layout:
1import "./globals.css"; 2 3export default function RootLayout({ 4 children, 5}: { 6 children: React.ReactNode; 7}) { 8 return ( 9 <html lang="en"> 10 <body>{children}</body> 11 </html> 12 ); 13}
Utility Classes
Tailwind provides small utility classes for individual CSS properties.
For example:
1<div className="p-6"> 2 Content 3</div>
means:
1padding 2 ↓ 36
Another example:
1<h1 className="text-4xl font-bold"> 2 Next.js Course 3</h1>
This combines:
1text-4xl 2font-bold
into one heading style.
Common Tailwind Utilities
Some frequently used utilities include:
1p-4 2px-6 3py-3 4m-4 5mt-8 6 7text-lg 8text-2xl 9font-semibold 10font-bold 11 12bg-white 13bg-gray-100 14text-gray-900 15 16rounded-lg 17rounded-xl 18 19border 20shadow
The important concept is that each utility generally represents a small styling rule.
Spacing
Tailwind provides utilities for margins and padding.
Padding
1<div className="p-6"> 2 Content 3</div>
Horizontal padding:
1<div className="px-6"> 2 Content 3</div>
Vertical padding:
1<div className="py-4"> 2 Content 3</div>
Different sides:
1<div className="pt-8 pr-4 pb-6 pl-4"> 2 Content 3</div>
Margin
1<div className="mt-8"> 2 Content 3</div>
You can also use:
1<div className="mx-auto"> 2 Centered Content 3</div>
This is commonly used with a maximum width:
1<div className="mx-auto max-w-7xl px-6"> 2 Content 3</div>
This creates a common page-container pattern.
Responsive Design
Responsive design is one of Tailwind's strongest features.
You can apply different styles at different breakpoints.
For example:
1<div className="text-xl md:text-3xl lg:text-5xl"> 2 Learn Next.js 3</div>
Conceptually:
1Mobile 2 ↓ 3text-xl 4 5Medium screens 6 ↓ 7text-3xl 8 9Large screens 10 ↓ 11text-5xl
Mobile-First Design
Tailwind uses a mobile-first approach.
For example:
1<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4"> 2 ... 3</div>
means:
1Mobile 21 column 3 4Medium 52 columns 6 7Large 84 columns
This is an excellent pattern for course cards.
Flexbox
Tailwind makes Flexbox easy to compose.
1<div className="flex items-center justify-between"> 2 <h1>Courses</h1> 3 4 <button> 5 View All 6 </button> 7</div>
Important utilities include:
1flex 2flex-col 3flex-row 4items-center 5items-start 6justify-center 7justify-between 8justify-start 9gap-4
Flexbox Example
A navigation bar:
1<nav className="flex items-center justify-between px-6 py-4"> 2 <div className="text-xl font-bold"> 3 Tech3Space 4 </div> 5 6 <div className="flex items-center gap-6"> 7 <a href="/courses"> 8 Courses 9 </a> 10 11 <a href="/about"> 12 About 13 </a> 14 15 <a href="/login"> 16 Login 17 </a> 18 </div> 19</nav>
The structure is:
1Navbar 2├── Logo 3└── Navigation 4 ├── Courses 5 ├── About 6 └── Login
Grid
Grid is useful for dashboards and card layouts.
1<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> 2 <CourseCard /> 3 <CourseCard /> 4 <CourseCard /> 5</div>
On different screen sizes:
1Mobile 2┌─────────────┐ 3│ Course │ 4├─────────────┤ 5│ Course │ 6├─────────────┤ 7│ Course │ 8└─────────────┘ 9 10Desktop 11 12┌───────┬───────┬───────┐ 13│Course │Course │Course │ 14└───────┴───────┴───────┘
Course Card
A reusable course card might look like:
1export function CourseCard() { 2 return ( 3 <article className="rounded-xl border bg-white p-6 shadow-sm"> 4 <div className="mb-4 aspect-video rounded-lg bg-gray-100" /> 5 6 <h2 className="text-xl font-semibold"> 7 Next.js Masterclass 8 </h2> 9 10 <p className="mt-2 text-sm text-gray-600"> 11 Learn modern Next.js from fundamentals 12 to production architecture. 13 </p> 14 15 <button className="mt-5 rounded-lg bg-black px-4 py-2 text-sm font-medium text-white"> 16 Start Learning 17 </button> 18 </article> 19 ); 20}
This demonstrates:
1border 2rounded 3padding 4shadow 5typography 6spacing 7button styling
Typography
Tailwind provides utilities for typography.
For example:
1<h1 className="text-4xl font-bold tracking-tight"> 2 Learn Next.js 3</h1>
A paragraph:
1<p className="text-base leading-7 text-gray-600"> 2 Build production-ready applications with 3 Next.js and React. 4</p>
Common utilities:
1text-sm 2text-base 3text-lg 4text-xl 5text-2xl 6text-4xl 7 8font-normal 9font-medium 10font-semibold 11font-bold 12 13leading-6 14leading-7 15 16tracking-tight 17tracking-wide
Borders
Add a border:
1<div className="border"> 2 Content 3</div>
Rounded border:
1<div className="rounded-xl border"> 2 Content 3</div>
Custom border color:
1<div className="border-gray-200"> 2 Content 3</div>
Shadows
Tailwind provides several shadow utilities:
1<div className="shadow-sm"> 2 Card 3</div>
or:
1<div className="shadow-lg"> 2 Card 3</div>
For modern interfaces, subtle shadows are often preferable:
1<div className="rounded-xl border shadow-sm"> 2 Course Card 3</div>
Dark Mode
Tailwind supports dark-mode styling.
For example:
1<div className="bg-white text-gray-900 dark:bg-gray-950 dark:text-white"> 2 <h1>Next.js Course</h1> 3</div>
The concept is:
1Light Mode 2bg-white 3text-gray-900 4 5Dark Mode 6dark:bg-gray-950 7dark:text-white
A complete card:
1<div className="rounded-xl border bg-white p-6 text-gray-900 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-white"> 2 <h2 className="text-xl font-semibold"> 3 Next.js Architecture 4 </h2> 5 6 <p className="mt-2 text-gray-600 dark:text-gray-400"> 7 Learn production Next.js patterns. 8 </p> 9</div>
Responsive Course Grid
A production course listing can use:
1<section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8"> 2 <div className="mb-8"> 3 <h1 className="text-3xl font-bold tracking-tight"> 4 Courses 5 </h1> 6 7 <p className="mt-2 text-gray-600"> 8 Learn modern software development. 9 </p> 10 </div> 11 12 <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> 13 <CourseCard /> 14 <CourseCard /> 15 <CourseCard /> 16 <CourseCard /> 17 </div> 18</section>
The responsive structure is:
1Mobile 21 column 3 4Small 52 columns 6 7Large 83 columns 9 10Extra Large 114 columns
Navbar
Build a responsive navbar:
1export function Navbar() { 2 return ( 3 <header className="border-b bg-white dark:bg-gray-950"> 4 <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4"> 5 <a 6 href="/" 7 className="text-xl font-bold" 8 > 9 Tech3Space 10 </a> 11 12 <nav className="hidden items-center gap-6 md:flex"> 13 <a href="/courses"> 14 Courses 15 </a> 16 17 <a href="/projects"> 18 Projects 19 </a> 20 21 <a href="/about"> 22 About 23 </a> 24 25 <a 26 href="/login" 27 className="rounded-lg bg-black px-4 py-2 text-white" 28 > 29 Login 30 </a> 31 </nav> 32 33 <button 34 className="rounded-lg border px-3 py-2 md:hidden" 35 aria-label="Open menu" 36 > 37 Menu 38 </button> 39 </div> 40 </header> 41 ); 42}
The important responsive behavior is:
1Mobile 2 ↓ 3Show menu button 4 5Desktop 6 ↓ 7Show navigation
Hero Section
A modern hero section:
1<section className="border-b"> 2 <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8"> 3 <span className="text-sm font-semibold"> 4 Learn Modern Development 5 </span> 6 7 <h1 className="mx-auto mt-4 max-w-4xl text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl"> 8 Build production-ready applications 9 with Next.js 10 </h1> 11 12 <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-600"> 13 Learn React, Next.js, TypeScript, 14 APIs, databases, authentication, 15 and production architecture. 16 </p> 17 18 <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row"> 19 <a 20 href="/courses" 21 className="rounded-lg bg-black px-6 py-3 font-medium text-white" 22 > 23 Explore Courses 24 </a> 25 26 <a 27 href="/about" 28 className="rounded-lg border px-6 py-3 font-medium" 29 > 30 Learn More 31 </a> 32 </div> 33 </div> 34</section>
This demonstrates:
1Container 2Typography 3Responsive text 4Spacing 5Buttons 6Flexbox 7Mobile layout 8Desktop layout
Sidebar Layout
Tailwind is also useful for application dashboards.
1<div className="flex min-h-screen"> 2 <aside className="hidden w-64 border-r bg-white p-6 md:block"> 3 <h2 className="text-lg font-bold"> 4 Dashboard 5 </h2> 6 7 <nav className="mt-6 space-y-2"> 8 <a 9 href="/dashboard" 10 className="block rounded-lg px-3 py-2 hover:bg-gray-100" 11 > 12 Overview 13 </a> 14 15 <a 16 href="/dashboard/courses" 17 className="block rounded-lg px-3 py-2 hover:bg-gray-100" 18 > 19 My Courses 20 </a> 21 22 <a 23 href="/dashboard/profile" 24 className="block rounded-lg px-3 py-2 hover:bg-gray-100" 25 > 26 Profile 27 </a> 28 </nav> 29 </aside> 30 31 <main className="flex-1 p-6"> 32 Dashboard Content 33 </main> 34</div>
Architecture:
1Dashboard 2├── Sidebar 3│ ├── Overview 4│ ├── My Courses 5│ └── Profile 6│ 7└── Main Content
Course Content Layout
For a learning platform:
1<div className="grid min-h-screen lg:grid-cols-[280px_1fr]"> 2 <aside className="border-r p-6"> 3 <h2 className="font-semibold"> 4 Course Content 5 </h2> 6 7 <nav className="mt-6 space-y-2"> 8 <a 9 href="#module-1" 10 className="block rounded-lg px-3 py-2 hover:bg-gray-100" 11 > 12 Module 1 13 </a> 14 15 <a 16 href="#module-2" 17 className="block rounded-lg px-3 py-2 hover:bg-gray-100" 18 > 19 Module 2 20 </a> 21 </nav> 22 </aside> 23 24 <article className="mx-auto w-full max-w-4xl p-6 lg:p-10"> 25 <h1 className="text-4xl font-bold"> 26 Next.js Server Components 27 </h1> 28 29 <div className="prose mt-8 max-w-none"> 30 Course content goes here. 31 </div> 32 </article> 33</div>
This creates:
1┌──────────────┬─────────────────────────┐ 2│ Course │ │ 3│ Content │ Lesson │ 4│ │ │ 5│ Module 1 │ Content │ 6│ Module 2 │ │ 7│ Module 3 │ │ 8└──────────────┴─────────────────────────┘
On mobile, the layout can be changed to a single-column structure.
Login Page
Tailwind can quickly create a complete login interface:
1export default function LoginPage() { 2 return ( 3 <main className="flex min-h-screen items-center justify-center bg-gray-50 px-4"> 4 <div className="w-full max-w-md rounded-2xl border bg-white p-8 shadow-sm"> 5 <h1 className="text-2xl font-bold"> 6 Welcome Back 7 </h1> 8 9 <p className="mt-2 text-sm text-gray-600"> 10 Sign in to continue learning. 11 </p> 12 13 <form className="mt-8 space-y-5"> 14 <div> 15 <label 16 htmlFor="email" 17 className="mb-2 block text-sm font-medium" 18 > 19 Email 20 </label> 21 22 <input 23 id="email" 24 type="email" 25 className="w-full rounded-lg border px-4 py-3 outline-none focus:ring-2" 26 placeholder="you@example.com" 27 /> 28 </div> 29 30 <div> 31 <label 32 htmlFor="password" 33 className="mb-2 block text-sm font-medium" 34 > 35 Password 36 </label> 37 38 <input 39 id="password" 40 type="password" 41 className="w-full rounded-lg border px-4 py-3 outline-none focus:ring-2" 42 placeholder="••••••••" 43 /> 44 </div> 45 46 <button 47 type="submit" 48 className="w-full rounded-lg bg-black px-4 py-3 font-medium text-white" 49 > 50 Sign In 51 </button> 52 </form> 53 </div> 54 </main> 55 ); 56}
Component Styling
As applications grow, avoid creating enormous className strings everywhere.
Instead, create reusable components.
For example:
1type ButtonProps = { 2 children: React.ReactNode; 3}; 4 5export function Button({ 6 children, 7}: ButtonProps) { 8 return ( 9 <button className="rounded-lg bg-black px-5 py-2.5 font-medium text-white transition hover:opacity-90"> 10 {children} 11 </button> 12 ); 13}
Then:
1<Button> 2 Enroll Now 3</Button>
This gives you:
1Reusable Component 2 ↓ 3Reusable Styling 4 ↓ 5Consistent UI
Conditional Styling
Sometimes styles depend on component state.
For example:
1<button 2 className={ 3 active 4 ? "rounded-lg bg-black px-4 py-2 text-white" 5 : "rounded-lg bg-gray-100 px-4 py-2 text-gray-700" 6 } 7> 8 Courses 9</button>
For larger applications, a utility such as clsx can make conditional class composition easier:
1import clsx from "clsx"; 2 3<button 4 className={clsx( 5 "rounded-lg px-4 py-2", 6 active 7 ? "bg-black text-white" 8 : "bg-gray-100 text-gray-700" 9 )} 10> 11 Courses 12</button>
Custom Design Tokens
A production design system should not depend entirely on arbitrary values.
You can define a consistent design language around:
1Colors 2Spacing 3Typography 4Border Radius 5Shadows 6Breakpoints
For example:
1Primary 2Secondary 3Background 4Foreground 5Muted 6Border 7Success 8Warning 9Error
Then components consistently use the same design tokens.
Design System Example
Imagine your application uses:
1Primary 2 ↓ 3Brand action 4 5Muted 6 ↓ 7Secondary text 8 9Background 10 ↓ 11Page background 12 13Border 14 ↓ 15Card and input borders 16 17Error 18 ↓ 19Validation messages
Instead of randomly selecting colors throughout the application, components follow a common design system.
This creates visual consistency.
Responsive Dashboard
A complete responsive dashboard might look like:
1<div className="min-h-screen bg-gray-50"> 2 <div className="mx-auto grid max-w-7xl lg:grid-cols-[240px_1fr]"> 3 <aside className="hidden border-r bg-white p-6 lg:block"> 4 Sidebar 5 </aside> 6 7 <main className="p-4 sm:p-6 lg:p-10"> 8 <header className="mb-8"> 9 <h1 className="text-2xl font-bold sm:text-3xl"> 10 Dashboard 11 </h1> 12 13 <p className="mt-2 text-gray-600"> 14 Track your learning progress. 15 </p> 16 </header> 17 18 <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4"> 19 <div className="rounded-xl border bg-white p-5"> 20 <p className="text-sm text-gray-500"> 21 Courses 22 </p> 23 24 <p className="mt-2 text-3xl font-bold"> 25 12 26 </p> 27 </div> 28 29 <div className="rounded-xl border bg-white p-5"> 30 <p className="text-sm text-gray-500"> 31 Completed 32 </p> 33 34 <p className="mt-2 text-3xl font-bold"> 35 7 36 </p> 37 </div> 38 </div> 39 </main> 40 </div> 41</div>
This demonstrates how Tailwind can build an entire application layout from utilities.
Tailwind and Server Components
Tailwind classes can be used in both Server and Client Components.
For example, a Server Component:
1export default function CourseCard() { 2 return ( 3 <div className="rounded-xl border p-6"> 4 <h2 className="text-xl font-bold"> 5 Next.js 6 </h2> 7 </div> 8 ); 9}
And a Client Component:
1"use client"; 2 3export function Counter() { 4 return ( 5 <button className="rounded-lg border px-4 py-2"> 6 Click 7 </button> 8 ); 9}
Tailwind styling itself does not require a component to become a Client Component.
This is an important Next.js concept:
1Tailwind CSS 2 ↓ 3Styling 4 5"use client" 6 ↓ 7Client-side behavior
They solve different problems.
Tailwind Architecture
A useful mental model is:
1Next.js 2 │ 3 ├── Server Components 4 ├── Client Components 5 └── Routing 6 │ 7 ▼ 8 Tailwind CSS 9 │ 10 ├── Layout 11 ├── Spacing 12 ├── Typography 13 ├── Responsive Design 14 ├── Dark Mode 15 └── Components
Build Challenge
For this module, build a complete course platform UI:
1Application 2│ 3├── Navbar 4│ 5├── Home Page 6│ ├── Hero 7│ ├── Featured Courses 8│ └── CTA 9│ 10├── Courses 11│ ├── Search 12│ ├── Filters 13│ └── Course Cards 14│ 15├── Course Page 16│ ├── Course Header 17│ ├── Sidebar 18│ ├── Course Content 19│ └── Progress 20│ 21├── Dashboard 22│ ├── Sidebar 23│ ├── Statistics 24│ ├── My Courses 25│ └── Progress 26│ 27├── Login 28│ 29└── Footer
Final Project Architecture
Your UI could eventually look like:
1app/ 2├── (public)/ 3│ ├── page.tsx 4│ ├── courses/ 5│ └── login/ 6│ 7├── (protected)/ 8│ ├── dashboard/ 9│ ├── profile/ 10│ └── courses/ 11│ 12components/ 13├── navbar.tsx 14├── hero.tsx 15├── course-card.tsx 16├── sidebar.tsx 17├── course-content.tsx 18├── footer.tsx 19└── ui/ 20 ├── button.tsx 21 ├── input.tsx 22 └── card.tsx
Tailwind handles the visual layer:
1Components 2 ↓ 3Tailwind Utilities 4 ↓ 5Responsive Design 6 ↓ 7Design System 8 ↓ 9Production UI
Module 22 Learning Checklist
After completing this module, you should understand:
- Tailwind CSS fundamentals
- Utility-first CSS
- Tailwind installation
- Tailwind configuration
- Utility classes
- Spacing
- Typography
- Colors
- Borders
- Border radius
- Shadows
- Flexbox
- CSS Grid
- Responsive breakpoints
- Mobile-first design
- Dark mode
- Component styling
- Conditional classes
- Reusable UI components
- Design tokens
- Responsive dashboards
- Responsive course layouts
- Tailwind with Server Components
- Tailwind with Client Components
- Building a complete UI system
Final Mental Model
Think of Tailwind as the visual construction system for your Next.js application:
1Next.js 2 ↓ 3Components 4 ↓ 5Tailwind Utilities 6 ↓ 7Layout + Typography + Spacing 8 ↓ 9Responsive Design 10 ↓ 11Reusable Components 12 ↓ 13Design System 14 ↓ 15Production UI
The goal is not simply to memorize Tailwind classes.
The real goal is to learn how to turn:
1Design 2 ↓ 3Layout 4 ↓ 5Responsive structure 6 ↓ 7Reusable components 8 ↓ 9Consistent design system 10 ↓ 11Production interface
into maintainable Next.js code.