Setup Tailwind CSS in React

In this post we will see how to install tailwind.css in react

Installation

1. Install tailwind with the below command

yarn add tailwindcss postcss-cli autoprefixer -D

2. Create a PostCSS configuration file in your root directory manually or you can use the command:

touch postcss.config.js

3. paste the below code in the config file

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

4. Create 2 .css files in src/assets/ name them as tailwind.css and main.css
5. Add below code to tailwind.css file

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

6. Go to package.json and change the scripts as below

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css", 
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

7. Go to index.js and import the main.css and delete index.css import

import './assets/main.css'

That's it. whenever you run the build or start comand the tailwind css will be compiled and added to main.css file. Now you can use tailwind.css.