How to Install Tailwind CSS with Create React App?

We will see how to set up Tailwind CSS in a React project using the Create React App. Tailwind CSS is a utility-first CSS framework that allows for rapid development of custom user interfaces. When combined with Create React App, it offers a flexible approach to build modern React applications.

Prerequisites

Before proceeding, ensure you have the following installed:

• Node.js: Download and install from Node.js official website.
• Create React App: A simple way to create a new React application.

Steps to Set Up Tailwind CSS with Create React App

Follow these steps to integrate Tailwind CSS into your React project:

Step 1: Create a New React App

If you haven't already installed Create React App, you can do so by running the following command:

npx create-react-app my-tailwind-app

Note: Replace my-tailwind-app with the name of your project.

Step 2: Install Tailwind CSS

Navigate into your project directory:

cd my-tailwind-app

Now, install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer

Step 3: Configure Tailwind CSS

Create a tailwind.config.js file in the root directory of your project:

npx tailwindcss init

This command generates a tailwind.config.js file where you can customize Tailwind CSS according to your needs.

Step 4: Create PostCSS Configuration

Create a postcss.config.js file in the root directory and add the following content:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

This configures PostCSS to use Tailwind CSS and autoprefixer.

Step 5: Include Tailwind CSS in Your Stylesheets

Open the src/index.css file and import Tailwind CSS:

/* ./src/index.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Step 6: Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file

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

Step 7: Start Your React App

Now, start your React app:

npm start

Your app should now be up and running with Tailwind CSS integrated. You can start using Tailwind CSS utility classes in your React components.

Example: Using Tailwind CSS in a React Component

Let's create a simple React component to demonstrate how to use Tailwind CSS classes:

// ./src/App.js
import React from 'react';

function App() {
  return (
    <div className="flex justify-center items-center h-screen bg-blue-500">
      <h1 className="text-4xl text-white font-bold">Hello, Tailwind CSS!</h1>
    </div>
  );
}

export default App;

Output: