How to Add Tailwind CSS to a Next.js Project

March 8th, 2023

Tailwind CSS is a very popular utility CSS framework that allows developers to quickly create custom and responsive user interfaces.

This article includes step-by-step instructions for setting up Tailwind CSS in Next.js project, including installing necessary dependencies and making configurations.

In previous tutorials, we explained how to build a static site and blog. In this tutorial, we aim to add Tailwind to the blog project we created.

First, install Tailwind CSS and all necessary packages using a package manager.

pnpm add --save-dev tailwindcss postcss autoprefixer

After that, create tailwind.config.js and postcss.config.js files with default settings using the following command.

pnpx tailwindcss init -p

Now you need to add the paths of all template files to the content section in the tailwind.config.js file.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
}

This code tells Tailwind to only include the CSS classes used in your project files. The content array specifies the files to be scanned for the used CSS classes.

The next step is to import Tailwind styles. To import the styles, replace the following code with the content of the globals.css file in the styles folder in the root directory of your project.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now you can use Tailwind classes throughout the entire project. With Tailwind added to the project, let's improve the appearance of the project a bit.

First, open the layout.tsx file in the components folder, then modify its content as follows.

import Head from 'next/head'
import React, { ReactNode } from 'react'

type Props = {
  title: string
  children?: ReactNode
}

const Layout: React.FC<Props> = ({ title, children }) => {
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content="My static site" />
      </Head>
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl">
          <div className="flex flex-col">
            <header className="relative mx-auto max-w-7xl py-24 px-6 sm:py-32 lg:px-8">
              <h1 className="text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
                My Static Site
              </h1>
            </header>
            <main>{children}</main>
            <footer>
              <p className="mt-10 text-center text-xs leading-5 text-gray-500">
                © {new Date().getFullYear()} My Static Site
              </p>
            </footer>
          </div>
        </div>
      </div>
    </>
  )
}

export default Layout

Then update the content of the index.tsx file in the pages directory as follows.

import type { NextPage } from 'next'
import Layout from '../components/layout'

const Home: NextPage = () => {
  return (
    <>
      <Layout title="My Static Site">
        <div className="mt-6 max-w-3xl text-center text-xl">
          <p>Welcome to my static site!</p>
        </div>
      </Layout>
    </>
  )
}

export default Home

By using the command below in the terminal, you will be able to activate Next.js in development mode and see the result of your changes instantly in the browser.

pnpm run dev