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 -D tailwindcss@3 postcss autoprefixer

Step 3: Configure Tailwind CSS

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

npx tailwindcss init -p

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:

Output: