In this article, we will see how to install Tailwind CSS with React. Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. Combining it with Create React App offers a powerful combination for developing React applications.

Prerequisites

• Nodejs
• React

Steps to Set up Tailwind CSS with Create React App

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.

Output: