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

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

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

tailwind css 3 with react

npm run start


Read Also



Tags: