{

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, creates files and folders, Javascript CSS, and configuration required for react application.

This takes a couple of minutes, installs all required dependencies. Once It is done. You should see new brand new react application with 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 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 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 browser page as follows

React tailwind css button example

You can check code Source code

Conclusion

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.