Styling with Tailwind CSS: A Practical Guide for Next.js

Previously in this course, we explored the building blocks of the root layout to establish our global HTML structure. Now, it’s time to move away from traditional stylesheets and adopt a faster, more maintainable approach to styling: Tailwind CSS.

Tailwind is a utility-first CSS framework that allows you to style your application directly in your JSX by composing small, single-purpose classes. Instead of context-switching between your code and a massive CSS file, you declare your design system directly in your components.

Installing Tailwind CSS

If you used create-next-app as shown in our first lesson, you likely already have Tailwind installed. If not, you can add it to any existing Next.js project by running:

Bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This command generates two critical files: tailwind.config.js and postcss.config.js. These act as the "brain" of your styling system.

Applying Utility Classes

In Tailwind, you don't write custom CSS rules like .container { display: flex; }. Instead, you use the built-in utility classes.

For example, to create a centered card with a border and shadow, you write:

JSX
<div className="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md">
  <h2 className="text-xl font-bold text-gray-900">Hello World</h2>
  <p className="mt-2 text-gray-600">This card is styled with utility classes.</p>
</div>

The power of this approach is consistency. Because you are pulling from a predefined design scale (e.g., text-xl, p-6), you don't have to worry about "magic numbers" or accidental CSS specificity wars.

Configuring tailwind.config.js

The tailwind.config.js file is where you define your brand identity—colors, fonts, and spacing. By modifying this file, you extend the framework rather than fighting it.

Open your tailwind.config.js and look for the theme object:

JAVASCRIPT
/** @type {import(CE9178">'tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          500: CE9178">'#3b82f6',
        }
      }
    },
  },
  plugins: [],
}

By adding a brand color under extend, you immediately get access to classes like bg-brand-500 or text-brand-500.

Responsive Design from First Principles

Tailwind uses a "mobile-first" approach. By default, classes apply to all screen sizes. If you want a style to change at a specific breakpoint, you add a prefix like md: or lg:.

For instance, className="grid grid-cols-1 md:grid-cols-2" will stack items vertically on mobile and switch to two columns on medium screens and up.

Hands-on Exercise: Building a Hero Section

Let's advance our blog project. Open app/page.js and replace the default code with a simple hero section using Tailwind:

1. Create a div with bg-gray-50 and py-20.
2. Add an h1 with text-4xl, font-bold, and text-center.
3. Add a paragraph with text-gray-600 and mt-4.

Challenge: Make the text-size responsive so it is text-2xl on mobile (sm) and text-5xl on desktop (lg).

Common Pitfalls

1. Over-using arbitrary values: Tailwind allows you to write w-[342px], but try to use the design system scales (w-80, w-96) first to maintain visual consistency.
2. Ignoring the content array: If your styles aren't applying, check your tailwind.config.js. If you create a new folder (like components/), ensure it is included in the content array so Tailwind knows to scan those files for class names.
3. Specificity confusion: Tailwind classes don't follow standard CSS specificity. They are applied in the order they appear in your HTML. If you have conflicting utilities, check their order.

FAQ

Q: Does Tailwind make my final bundle size large? A: No. Tailwind scans your files and only includes the CSS for the classes you actually use in your production build.

Q: Can I use CSS Modules with Tailwind? A: You can, but it is rarely necessary. Utility-first styling is designed to replace the need for separate CSS modules.

Q: How do I handle dark mode? A: Tailwind has a built-in dark: variant. You can enable it in your config to toggle styles based on the user's system preference.

Recap

We’ve installed Tailwind CSS, learned how to apply utility classes for rapid development, and configured our design system in tailwind.config.js. You now have the tools to build complex, responsive layouts without leaving your JSX.

Up next: We will apply these styling skills to structure our Blog Homepage.