Part 31: Styling Your Next.js Project with Tailwind CSS

[Pages] Next Shop: Setup

[Pages] Next Shop: Setup

Now that we've set up our Next.js project, it's time to think about how we'll style our website. Previously, we used a styling solution that was integrated React components, but this time, we'll opt for a more versatile and popular CSS framework: Tailwind CSS. Let's explore how to integrate Tailwind into our project and why it could be an excellent choice for styling.

Why Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to build modern, responsive designs directly in your markup. It's not tied to any specific JavaScript framework, which means you can use it with any web project. However, it works exceptionally well with React components, making it a popular choice for many developers.

Installing Tailwind CSS

There are two primary ways to add Tailwind CSS to a Next.js project:

1. Using a Tailwind Template with Create Next App: This method creates a new project pre-configured with Tailwind. While convenient, it may not always have the latest versions of dependencies.

2. Adding Tailwind to an Existing Project: This is the method we'll use, as it provides more control and ensures compatibility with the latest packages.

Step 1: Install Tailwind and Related Packages

First, stop the development server if it's running. In your terminal, navigate to your project directory and run the following command to install Tailwind CSS, PostCSS, and Autoprefixer as development dependencies:

npm install -D tailwindcss postcss autoprefixer

These packages help transform and optimize your CSS.

Step 2: Initialize Configuration Files

Next, run the following command to create the necessary configuration files for Tailwind and PostCSS:

npx tailwindcss init -p

This command generates two files in your project:

• postcss.config.js: Configures PostCSS to use Tailwind CSS and Autoprefixer plugins.

• tailwind.config.js: Contains Tailwind-specific configuration.

Step 3: Configure Tailwind for Production

Open tailwind.config.js and set up the content paths to purge unused styles in production. Replace the default content array with the following:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

This configuration ensures that only the styles used in your components and pages are included in the production build, reducing the bundle size.

Step 4: Include Tailwind in Your CSS

To integrate Tailwind's styles into your project, open styles/globals.css and replace its content with the following Tailwind directives:

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

These directives import Tailwind's base styles, component styles, and utility classes, which will be processed by PostCSS.

Step 5: Restart the Development Server

With everything set up, restart the development server:

npm run dev

Reload your website in the browser to see the changes. You should notice that the default styles, such as the heading, have changed, indicating that Tailwind CSS is now applied.

Conclusion

By following these steps, you've successfully integrated Tailwind CSS into your Next.js project. This setup provides a powerful, utility-first approach to styling that can speed up your development process and maintain a consistent design across your site. Next, we'll explore how to use Tailwind's utility classes to style our components effectively.

For more information on setting up Tailwind CSS with Next.js, you can refer to the Tailwind CSS official guide.