How to Integrate Tailwind CSS with ReactJS

Tailwind CSS is a popular, utility-first CSS framework designed for rapidly building modern and responsive user interfaces, while React is a widely-used JavaScript library for creating interactive and dynamic web applications. Combining Tailwind CSS with React allows developers to leverage the best of both worlds, resulting in a streamlined and efficient development process. This integration facilitates the creation of visually appealing and highly performant web applications with minimal effort, enabling developers to focus on crafting exceptional user experiences. This article will guide you through the process of integrating Tailwind CSS with a React application, allowing you to harness the power of these two powerful tools in your web development projects.

Also Read: Find best ReactJS Developers

To use Tailwind CSS with React, you'll need to follow these steps:

1. Create a new React App

By using create-react-app, we are generating a boilerplate React application with a default configuration. This simplifies the setup process and allows you to focus on writing code.

npx create-react-app my-tailwind-react-app
cd my-tailwind-react-app

2. Install the necessary dependencies

We install Tailwind CSS, PostCSS, Autoprefixer, and PostCSS Loader. PostCSS is a tool for transforming CSS with JavaScript, while Autoprefixer automatically adds vendor prefixes to your CSS, ensuring compatibility with different browsers. PostCSS Loader is a webpack loader that processes CSS using PostCSS.

npm install tailwindcss@latest postcss@latest autoprefixer@latest postcss-loader@latest

3. Create a configuration file for Tailwind CSS

tailwind.config.js is the configuration file where you can customise the design system for your application. By default, it extends the Tailwind CSS default configuration.

npx tailwindcss init

This will create a tailwind.config.js file in your project's root directory. You can customise the configuration according to your project's needs.

4. Create a PostCSS configuration file

postcss.config.js is the configuration file where you define PostCSS plugins to be used in your project. In our case, we use Tailwind CSS and Autoprefixer plugins.

Create a postcss.config.js file in your project's root directory and add the following content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

5. Create a CSS file

src/tailwind.css is where you import the base styles, components, and utilities provided by Tailwind CSS. You can also add your custom CSS rules here.

Also Read: Multilingual in React

Create a new CSS file, for example src/tailwind.css, and add the following content:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

6. Configure webpack to handle the CSS file

By importing the tailwind.css file in your src/index.js, you ensure that the CSS is bundled together with your JavaScript code. Webpack, which is the default bundler used by create-react-app, will take care of this process.

Open your src/index.js file and add the following import statement at the top:

import './tailwind.css';

7. Modify the scripts section in package.json

Updating the start and build scripts with the --require postcss flag ensures that PostCSS is used when building or running the development server. This is necessary for processing the Tailwind CSS code and applying the Autoprefixer plugin.

Also Read: Popular React Animation Libraries

In the scripts section of your package.json file, replace the start and build commands with the following:

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

8. Start your development server

By running npm start, you start the development server, which will automatically compile your code, apply the PostCSS transformations, and open the application in your default browser. You can now use Tailwind CSS utility classes within your React components to style them.

npm start

Now you can use Tailwind CSS utility classes in your React components:

Also Read: Stateless functional components in React

import React from 'react';
function App() {
  return (
    <div className="App">
      <header className="bg-blue-500 text-white p-4">
        <h1 className="text-xl">Welcome to React with Tailwind CSS!</h1>
      </header>
    </div>
  );
}
export default App;

With these steps completed, you should have successfully integrated Tailwind CSS with your React app. Now you can build your React components using Tailwind CSS utility classes.

Also Read: Tailwind with Vue