Add Tailwind CSS to Next.jsQuickly In 4 Steps

Recent versions of Next.js come packaged with Tailwind CSS, which we can enable during project creation. If you missed installing it out of the box, this guide will walk you through four simple steps to install and configure Tailwind CSS. Even though this post is tailored for Next.js, a similar method can be used to set up Tailwind in a React.js application as well.

minimalistic cartoon style laptop nextjs app tailwindcss color swatches code snippets black outline jpeg

Prerequisites

Ensure your React.js or Next.js app is initialized without Tailwind CSS and configured for JavaScript. If you prefer TypeScript, simply substitute the .js files with .tsx files in the following steps.

1. Install Tailwind CSS, PostCSS, and Autoprefixer

Tailwind CSS works best when paired with PostCSS and Autoprefixer. These tools help transform your CSS with JavaScript plugins, enabling features like browser compatibility through auto prefixing, minification, rule nesting, and custom properties. Luckily, React.js and Next.js come with built-in support for PostCSS, making it easy to integrate Tailwind CSS.

Open your terminal and run the command: npm install tailwindcss postcss autoprefixer

Once the installation is complete, initialize Tailwind CSS in your project by generating its configuration files:

This command creates two essential files:

tailwind.config.js: Customize Tailwind's default configuration here.
postcss.config.js: Manages PostCSS processing.

2. Configure Tailwind CSS

Next, open the tailwind.config.js file and define the paths to your components and pages. This step is crucial as it ensures Tailwind purges unused CSS in production, optimizing your app's performance.

If you prefer to use a src folder to contain your app's source code, keep the above configuration. If your project structure differs, simply adjust the content paths:

3. Add Tailwind Directives to Your CSS

Now it’s time to ensure Tailwind's styles are applied globally. Open your global.css file and add the following Tailwind directives. If you use a custom CSS file, place this code in your root CSS file to ensure it loads first in your HTML layout.

4. Start Using Tailwind CSS in Your Components

With everything set up, you're ready to use Tailwind CSS classes in your components! Here’s a quick example of creating a simple button using Tailwind CSS:

Let’s Test!

Now that the setup is complete, run or restart your application to see Tailwind CSS in action! Take advantage of Tailwind’s extensive customization options to create a unique design that fits your project needs.