Begin Your Journey with Next.js and Tailwind CSS

Md. Saad
June 02, 2024

Tailwind is a utility-first CSS framework that enables developers to design custom user interfaces directly within their HTML. Unlike traditional CSS frameworks, which provide pre-designed components, Tailwind offers low-level utility classes that let developers build complex designs without needing to write custom CSS.

In this tutorial, I'll guide you through the setup process for Using Next.js with Tailwind CSS so that you can fully utilise the benefits of Tailwind CSS in your application.

Why Use Tailwind CSS with Next.js?

Using Next.js with Tailwind CSS, we can easily incorporate Tailwind's utility classes into our application development workflow. Moreover, Next.js optimises the delivery of CSS styles by automatically removing unused CSS during the build process. Thus, the final build will contain only the styles we utilise in our application. This guarantees a quick and light application.

Prerequisites

To follow along with this guide and code, you should have the following:

Basic understanding of HTML, CSS, and JavaScript
At least a little experience or knowledge of Next.js
Node and npm or yarn installed on your local computer

Create A Next.js App

The first and foremost step to begin with is creating a Next.js App. Use the following command to create a next.js app.

npx create-next-app app-name

As it is not an article on creating the next.js app, we will not discuss it in detail. If you want to read it in detail follow the link.

Install Tailwind CSS

Install tailwind CSS and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

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

Configuring Tailwind

After installing Tailwind CSS, we must configure it to work with Next.js. Inside tailwind.config.js, add paths to the files that will use Tailwind CSS class names. Furthermore, we can also find more settings such as themes, plugins etc here:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The content section of your tailwind.config.js file is where you configure the paths to all your Next.js source files containing Tailwind class names.
In the theme section, you can configure your project’s theme options like colours, fonts, etc.
Through plugins, you can extend Tailwind with reusable third-party plugins. It also helps to utilise JavaScript rather than CSS to register new styles for Tailwind to add to the user's stylesheet.
You do not need to modify postcss.config.js.

Importing Styles

Now it's time to add the Tailwind directives to your CSS. To do that follow the steps:

Go to app/global.css.
In app/global.css file, Add the Tailwind CSS directives that Tailwind will use to inject its generated styles to a Global Stylesheet in your application, for example:

// app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, import the globals.css stylesheet into the root layout (app/layout.jsx) to apply the styles to each route in your application.

// These styles apply to every route in the application
import './globals.css'
 
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Using Classes

I hope you have followed the steps properly and can configure tailwind CSS in your project. Let’s use Tailwind’s utility classes to test whether it works. To do that follow the steps:

Go to app/page.jsx
Add the following codes:

//app/page.jsx 
export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Start your Building process

Run your build process with npm run dev. Your site will be opened on localhost:3000. You will find a simple, nicely styled heading.

Boom! You have successfully added Tailwind CSS to your Next.js application. You can explore Tailwind CSS more on their official website.

Need more help adding Tailwind CSS on your Next.js web application? Contact StaticMania. A dedicated Next.js expertise team will guide you on your journey.

Table of Contents