How To Set Up Tailwind CSS In React And Next.js

|

In modern web development, Tailwind CSS has become one of the most popular utility-first CSS frameworks, beloved by developers for its speed, flexibility, and scalability. Its unique approach lets you style your application directly in your HTML or JSX using pre-defined utility classes, rather than writing traditional CSS.

If you’re building projects in React or Next.js, integrating Tailwind CSS can greatly accelerate your workflow. It provides responsive, maintainable, and customizable styling options right out of the box.

This article will guide you step-by-step through setting up Tailwind CSS in both React (with Create React App) and Next.js. We’ll explore not only installation but also configuration, folder structure, and examples to demonstrate how easily you can start building visually appealing applications.

Understanding Tailwind CSS

Before diving into the setup, it’s important to understand what makes Tailwind CSS unique.

Unlike traditional CSS frameworks (like Bootstrap or Bulma), Tailwind doesn’t provide pre-styled components. Instead, it gives you low-level utility classes that you can combine to build any design.

For example, instead of writing custom CSS like this:

.button {
background-color: #2563eb;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
}

You can achieve the same in Tailwind with:

<button className="bg-blue-600 text-white px-4 py-2 rounded-md">
Click Me
</button>

This approach eliminates context switching between CSS and JSX files and promotes consistent, maintainable styling.

Setting Up Tailwind CSS in React

Let’s start with a React project created using Create React App (CRA).

Create a New React App

If you haven’t created your React app yet, run the following command in your terminal:

npx create-react-app my-tailwind-app

Navigate into your project directory:

cd my-tailwind-app

This will generate a boilerplate React app structure that looks like this:

my-tailwind-app/
├── node_modules/
├── public/
├── src/
│ ├── App.js
│ ├── index.js
│ └── App.css
├── package.json
└── README.md

Install Tailwind CSS and Dependencies

You’ll need to install Tailwind CSS along with its dependencies:

npm install -D tailwindcss postcss autoprefixer

Then initialize Tailwind by running:

npx tailwindcss init -p

This command generates two files:

  • tailwind.config.js → Tailwind configuration file

  • postcss.config.js → PostCSS configuration file

Configure Tailwind

Open your tailwind.config.js file. You’ll see something like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}

You need to tell Tailwind where to find your files. Modify the content array to include all React component files:

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

This ensures that Tailwind scans all files in the src folder to remove unused styles during production builds.

Add Tailwind Directives to CSS

Next, open your src/index.css (or create one if you’ve removed it) and replace its content with:

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

These directives import Tailwind’s core layers — base styles, reusable components, and utility classes.

Clean Up and Test Tailwind

Now, remove unused CSS from App.css and open App.js. Replace its content with the following code to verify if Tailwind works correctly:

function App() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<h1 className="text-4xl font-bold text-blue-600 mb-4">Hello, Tailwind!</h1>
<p className="text-gray-700">Your React app is now powered by Tailwind CSS.</p>
<button className="mt-6 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg">
Get Started
</button>
</div>
);
}export default App;

Now run your app:

npm start

You should see a clean, responsive interface styled entirely with Tailwind classes.

Optional Customization

You can easily customize your Tailwind configuration by editing the theme.extend section in tailwind.config.js.

For example, to add a custom color palette:

theme: {
extend: {
colors: {
brand: {
light: '#93c5fd',
DEFAULT: '#3b82f6',
dark: '#1e3a8a',
},
},
},
},

Then use it in your components:

<h2 className="text-brand-dark">Custom Brand Color</h2>

That’s it — your React project is now fully integrated with Tailwind CSS!

Setting Up Tailwind CSS in Next.js

Now let’s move on to setting up Tailwind CSS in a Next.js project. The process is similar but slightly more streamlined since Next.js offers first-class integration with modern tooling.

Create a New Next.js App

Create a new Next.js app using the official command:

npx create-next-app@latest my-next-tailwind-app

Then navigate into your project directory:

cd my-next-tailwind-app

You’ll see a structure similar to this:

my-next-tailwind-app/
├── app/
├── pages/
├── public/
├── styles/
│ ├── globals.css
│ └── home.module.css
├── next.config.js
├── package.json
└── README.md

Install Tailwind CSS

Run the following commands:

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

This will create the same two files as before: tailwind.config.js and postcss.config.js.

Configure Tailwind Content Paths

Open your tailwind.config.js and update the content property to match all folders where components live:

module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}

This ensures Tailwind processes all Next.js pages and components.

Add Tailwind to Global CSS

Open the styles/globals.css file and include the Tailwind directives at the very top:

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

Test Tailwind in Next.js

Open pages/index.js (or app/page.js if using the App Router) and replace it with the following:

export default function Home() {
return (
<main className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-white">
<h1 className="text-5xl font-extrabold text-blue-700 mb-4">Welcome to Next.js + Tailwind</h1>
<p className="text-gray-600">Building fast, modern apps made simple.</p>
<button className="mt-6 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition duration-300">
Explore Now
</button>
</main>
);
}

Run your development server:

npm run dev

Visit http://localhost:3000, and you should see your styled page in action.

Customizing Tailwind in Next.js

Just like in React, you can extend Tailwind’s configuration. For instance, to add custom fonts:

  1. Install a Google Font or include it in your pages/_document.js.

  2. Then, update tailwind.config.js:

theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},

  1. Use it in your JSX:

<h1 className="font-sans text-3xl">This uses a custom font!</h1>

Common Issues and Troubleshooting

Here are a few common pitfalls developers face while setting up Tailwind:

  1. Styles not applying
    → Check that you added Tailwind’s directives in the correct CSS file and configured the content array properly.

  2. Outdated build or cache
    → Restart your dev server after changes to configuration files.

  3. Global CSS conflicts
    → Remove unused or conflicting global CSS rules from your React or Next.js default setup.

  4. Production build size
    → Tailwind automatically purges unused classes during production builds, but double-check your paths in tailwind.config.js to ensure this works correctly.

Benefits of Using Tailwind with React and Next.js

Combining Tailwind CSS with React or Next.js provides numerous advantages:

  • Faster Development: No need to leave your component files to style elements.

  • Responsive Design Made Easy: Built-in responsive utilities for mobile-first design.

  • Customization: Easily extend colors, spacing, or typography.

  • Performance: Tree-shaking removes unused CSS automatically.

  • Consistency: Utility classes encourage a consistent visual language across components.

  • Great for Teams: Readable, predictable class names simplify collaboration.

Example: Building a Simple Card Component

To see Tailwind in action, let’s create a reusable card component.

export default function Card({ title, description }) {
return (
<div className="max-w-sm bg-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition duration-300">
<h2 className="text-2xl font-semibold text-gray-800 mb-2">{title}</h2>
<p className="text-gray-600">{description}</p>
<button className="mt-4 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg">
Learn More
</button>
</div>
);
}

You can import this component into a page or parent component and use it multiple times with different props. Tailwind’s utility classes make it effortless to adjust styles per instance without creating new CSS files.

Conclusion

Setting up Tailwind CSS in React and Next.js is straightforward yet incredibly powerful.

In React, Tailwind enables a streamlined workflow, allowing developers to focus on building features instead of managing complex CSS files. With its utility-first philosophy, you can build responsive and modern interfaces rapidly — all while maintaining consistency and reducing code duplication.

In Next.js, Tailwind pairs perfectly with the framework’s component-driven architecture and optimized production builds. The result is an elegant, fast, and maintainable frontend stack ideal for startups, large-scale apps, and design-heavy projects alike.

Both setups follow nearly identical installation and configuration steps — install dependencies, configure tailwind.config.js, import core directives, and start using utility classes. From there, you can easily extend Tailwind with custom themes, plugins, and responsive breakpoints that match your project’s needs.

Ultimately, Tailwind CSS empowers developers to create visually polished, production-ready designs without writing custom CSS from scratch. Whether you’re building a small portfolio site in React or a full-scale application in Next.js, Tailwind ensures your development process remains fast, flexible, and future-proof.