How to install Tailwind CSS in React

in this section we will see how to add tailwind css in react js. we will also create tailwind configure file with postCSS and purge tailwind css class file into minimal size.

Setup Tailwind CSS 2 with React

Create react app

Installing a fresh new react application.

npx create-react-app react-app

Next, Move to the directory

cd react-app

Install Tailwind CSS via npm

Install tailwind css via npm. Remember tailwind requires Node.js 12.13.0 or higher.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Install CRACO and setup configure 

Next, install CRACO to setup tailwind configurtion 

npm install @craco/craco

After craco install you need to modify package.json

Before package.json

{
    "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
}

After package.json

{
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
      "eject": "react-scripts eject"
    },
}

Next, you need to create craco.config.js file and add tailwindcss and autoprefixer as PostCSS plugins.

craco.config.js

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

Include Tailwind in your CSS File

First you need to remove default css code and put tailwind css directive to include Tailwind’s base, components, and utilities.

src/index.css

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.btn{
  @apply py-2 px-6 rounded;
}
.btn-blue {
  @apply  bg-blue-500 text-blue-100;
}

Create tailwind configuration file

Next, generate your tailwind.config.js file.

npx tailwindcss-cli@latest init

Now, you can edit tailwind.config.js

Before tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

react folder structure

After tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// src/App.js

import './App.css';

function App() {
  return (
    <div className="App mt-20">
      <div>
        <h1 className="text-4xl font-bold text-indigo-600">
          React with Tailwind CSS
        </h1>
        <div className="flex justify-center">
          <button className="btn btn-blue">Button</button>
        </div>
      </div>
    </div>
  );
}

export default App;

tailwind react

run command

npm run build 
npm start
#or
yarn build
yarn start  

Install Tailwind CSS 3 in React JS

In mid december 2021 tailwind css 3 official launch. Tailwind CSS v3 installation & setup in react js is now much easier than tailwind css 2, lets start.

Create react project

npx create-react-app react-tailwindv3

Install Tailwind CSS v3

run below command to install tailwindcss version 3 & create tailwind config file.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.js

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

src/index.css

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

src/App.js

function App() {
  return (
    <div className="container m-40 mx-auto">
      <h1 className="text-2xl font-bold text-cyan-800">
        Tailwind 3 With React Js
      </h1>
      <button className="px-6 py-2 text-sm text-white rounded shadow-xl bg-emerald-500">
        success
      </button>
    </div>
  );
}

export default App;

tailwind css 3 with react

npm run start

Read Also

React Tailwind CSS Accordion (FAQ) Example

React Tailwind CSS Tabs Examples

How to use Tailwind CSS 3 with Headless UI In React

Toggle Switch in React JS with Tailwind CSS Example

Create Reusable Button Component with React & Tailwind CSS

React Tailwind CSS Search Bar Example

React Tailwind CSS Sidebar Example

React JS Login Form with Tailwind CSS Example

React Responsive Navbar Menu With Tailwind CSS Example

How to install Tailwind CSS in React

React Tailwind CSS Dialog (Modal) Example

React Tailwind Registration Form Example

React Tailwind CSS Table Example

React Tailwind CSS Responsive Gallery Example