🎨 Styling, Images & Fonts · Lesson 16
Tailwind CSS in Next.js
What is Tailwind CSS?
Tailwind is a utility-first CSS framework. Instead of writing CSS rules in a separate file, you combine small classes directly in your JSX: p-4 = padding 1rem, text-center, bg-white. It is the most popular styling choice for Next.js projects.
Traditional CSS
- Think of a class name (.course-card)
- Switch to the CSS file
- Write 8 properties
- Switch back
Tailwind
- Write classes in JSX
- See result instantly
- No naming, no switching
- Unused CSS removed automatically
Setup in Next.js
Terminal
# Option A: choose "Yes" for Tailwind when creating the app npx create-next-app@latest my-app # Option B: add to an existing project npm install tailwindcss @tailwindcss/postcss postcss
JS – postcss.config.mjs
// postcss.config.mjs
export default {
plugins: { '@tailwindcss/postcss': {} },
}CSS – app/globals.css
/* app/globals.css */ @import "tailwindcss";
Make sure app/layout.jsx imports ./globals.css. Restart npm run dev and Tailwind classes work everywhere.
Core utility classes
| Need | Class | CSS it creates |
|---|---|---|
| Padding / margin | p-4, px-6, mt-3, mx-auto | padding:1rem; margin-top:.75rem… |
| Text | text-lg, font-bold, text-slate-500 | font-size, font-weight, color |
| Background | bg-white, bg-indigo-600 | background-color |
| Border & radius | border, border-slate-200, rounded-2xl | border, border-radius:1rem |
| Flexbox | flex, items-center, justify-between, gap-4 | display:flex … |
| Grid | grid, grid-cols-3, gap-5 | display:grid; grid-template-columns |
| Size | w-full, max-w-xl, h-12 | width / max-width / height |
| Shadow | shadow-sm, shadow-lg | box-shadow |
Spacing scale: 1 unit = 0.25rem (4px). So p-4 = 16px, p-6 = 24px.
Example: course card
JSX – components/CourseCardTw.jsx
// components/CourseCardTw.jsx
import Link from 'next/link'
export default function CourseCardTw({ course }) {
return (
<Link href={`/courses/${course.slug}`}
className="block rounded-2xl border border-slate-200 bg-white p-5 shadow-sm
transition hover:-translate-y-1 hover:shadow-lg">
<span className="rounded-full bg-indigo-50 px-3 py-1 text-xs font-bold text-indigo-700">
{course.level}
</span>
<h3 className="mt-3 text-lg font-bold text-slate-900">{course.title}</h3>
<p className="mt-1 text-sm text-slate-500">{course.summary}</p>
<div className="mt-4 flex items-center justify-between">
<span className="text-xl font-extrabold text-indigo-600">₹{course.fee}</span>
<span className="text-sm font-semibold text-indigo-600">View →</span>
</div>
</Link>
)
}Responsive design: sm: md: lg:
Tailwind is mobile-first: a class without a prefix applies to all sizes; md: applies from 768px up.
JSX – responsive grid and hero
// 1 column on phones, 2 on tablets (md ≥ 768px), 3 on laptops (lg ≥ 1024px)
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
{courses.map((c) => <CourseCardTw key={c.slug} course={c} />)}
</div>
// Hero: text stacks on mobile, side-by-side on desktop
<section className="flex flex-col gap-8 py-12 md:flex-row md:items-center">
<h1 className="text-3xl font-black md:text-5xl">Learn coding in Hindi</h1>
</section>hover:, focus: and dark:
JSX – state variants
<button className="rounded-full bg-indigo-600 px-6 py-3 font-bold text-white
hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300
disabled:opacity-50">
Enroll now
</button>
<input className="w-full rounded-xl border border-slate-300 px-4 py-3
focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200" />
<div className="bg-white text-slate-900 dark:bg-slate-900 dark:text-white">…</div>Custom colours with @theme
CSS – brand colours
/* app/globals.css */
@import "tailwindcss";
@theme {
--color-brand: #4f46e5;
--color-brand-dark: #3730a3;
--font-display: "Inter", sans-serif;
}
/* now you can write: bg-brand text-brand-dark font-display */Tailwind vs CSS Modules
Tailwind
- Very fast to build
- Consistent spacing/colours
- Long class strings
CSS Modules
- Clean JSX
- Full CSS power
- More files and naming
Common mistakes
- Building class names dynamically like
`bg-${color}-500`→ Tailwind cannot detect them; write full names (color === 'red' ? 'bg-red-500' : 'bg-blue-500'). - Forgetting the
@import "tailwindcss"line → no styles appear. - Using
sm:to mean "small screens only" → it means "640px and above".
Summary
- Install
tailwindcss @tailwindcss/postcss, add PostCSS config and@import "tailwindcss". - Utilities for spacing, colour, flex, grid; mobile-first breakpoints
md: lg:. - Variants
hover: focus: dark:; brand colours with@theme.
✅ Practice
Rebuild the course grid with Tailwind: 1 column on mobile, 3 on desktop, cards lifting on hover, and an "Enroll" button with a focus ring.
Frequently Asked Questions
Does Tailwind make the CSS file huge?
No. Tailwind scans your files and generates only the classes you actually use, so production CSS is usually a few kilobytes.
Is tailwind.config.js needed in Tailwind v4?
No. Tailwind v4 is configured in CSS with @import "tailwindcss" and an optional @theme block. A config file is only needed for advanced plugins.
Can I mix Tailwind and CSS Modules?
Yes. Many projects use Tailwind for layout and spacing and a module file for one complex animation.
