How to integrate Tailwind CSS In React Application?

React Tailwind Example: In this example, How to integrate tailwind CSS framework in react application. It also includes how to use the tailwind CSS button in the component.

#React TailwindCSS Example

• Step 1 Create React Application
• Step 2 Install TailwindCSS dependency using npm
• Step 3 Create tailwind configuration
• Step 4 Compile CSS files configuration
• Step 4 Add tailwind CSS styles
• Step 5 Add button to react component.
• Step 6: Test React Application

#Create React application

To create a react application, Open the terminal and run the following command.

npx create-react-app react-css-examples

create-react-app is a react CLI from Facebook, that creates files and folders, Javascript CSS, and configuration required for react application.

This takes a couple of minutes and installs all required dependencies. Once It is done. You should see a new brand new react application with the folder name - react-CSS-examples.

Next, Change to the application folder.

cd react-css-examples

#Start the development server

npm run start

This start react development server and opens a new browser window with localhost:3000 url

#Install tailwindcss dependencies using npm

tailwindcss needs peerdependencies -postcss and autoprefixer Consequently, we have to install tailwindcss,postcss, and autoprefixer dependencies using the below npm command

npm install -D tailwindcss postcss autoprefixer

Npm packages required

• tailwindcss: CSS framework with predefined CSS styles
• postcss: Tool to transform preprocessor CSS(sass,less) styles into another CSS files using javascript
• autoprefixer: It is a postcss plugin to add vendor prefix selector.

The installation will be done after a couple of minutes.

As a result, It installs and adds the dependencies in the package.json file.

{
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.2"
  }
}

#Add tailwind configuration

Next, Create tailwind.config.js with below command

A:\work\react-css-examples>npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

Therefore, you will see tailwind.config.js file created in application root folder.

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

Configure tailwind config files with all files regular expression

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

#Compile CSS files configuration

Create a folder css in src folder.

Create a new file input.css inside src/css folder

Following is the directory structure.

src/
├── css/
         ├── output.css
         └── input.css
├── app.js
└── index.js

In input.css, please include tailwind css styles

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

.btn-blue {
  @apply bg-red-500 text-white;
}
.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-red-700;
}

Next, configure package.json to run and convert input.css into output.css

Please add compilecss target and change this to start command

  "scripts": {
    "start": "npm run compilecss && react-scripts start ",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "compilecss":"npx tailwindcss -i src/css/input.css -o src/css/output.css "
  }

by running the npm run start command, output.css is generated in the src/css folder

#Add button to react component

In react component App.js

• Please import output.css into this component
• update the component to include tailwind button HTML and CSS classnames

import "./css/output.css";

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">
        Simple Tailwindo CSS application
      </h1>
      <button className="btn btn-blue">Submit</button>
    </div>
  );
}

export default App;

Run npm run start command and You will see output on the browser page as follows

You can check code Source code🔗

#Conclusion

A Step by Step guide to creating a react application and adding a tailwind CSS framework into it for example.