How to Install Tailwind CSS in React JS (2025)

Follow these steps to install and configure Tailwind CSS in your React JS project. Tailwind provides a utility-first approach to styling your application, making it easy to create responsive and customized designs directly in your JSX code.

1. Create a React App

First, create a new React app using the following command. If you already have an existing React app, you can skip this step.

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

2. Install Tailwind CSS

Next, install Tailwind CSS along with PostCSS and Autoprefixer. Run this command in your project directory:

        npm install -D tailwindcss postcss autoprefixer
    

3. Generate Tailwind Config Files

Generate the Tailwind configuration files by running the following command:

        npx tailwindcss init
    

This will create a tailwind.config.js file in your project. The content will look like this:

        // tailwind.config.js
        module.exports = {
          content: [
            "./src/**/*.{html,js,jsx,ts,tsx}",
          ],
          theme: {
            extend: {},
          },
          plugins: [],
        }
    

4. Configure Tailwind in Your CSS

Create a src/index.css file if it doesn't exist, and add the following Tailwind directives to import its base styles, components, and utilities:

        /* src/index.css */
        @tailwind base;
        @tailwind components;
        @tailwind utilities;
    

5. Update PostCSS Config

Create or update your postcss.config.js file in the root of your project. If it doesn't exist, create it with the following content:

        // postcss.config.js
        module.exports = {
          plugins: {
            tailwindcss: {},
            autoprefixer: {},
          },
        }
    

6. Import the CSS File

Ensure that you import the src/index.css file in your src/index.js (or src/index.tsx) file:

        // src/index.js
        import React from 'react';
        import ReactDOM from 'react-dom';
        import './index.css'; // Import Tailwind styles
        import App from './App';
        import reportWebVitals from './reportWebVitals';

        ReactDOM.render(
          
            
          ,
          document.getElementById('root')
        );

        reportWebVitals();
    

7. Start Your Development Server

Now, you can start your development server to see the changes live. Run the following command:

        npm start
    

8. Example of Tailwind Usage in React

Here’s an example of how you can use Tailwind CSS to style your components:

        // src/App.js
        import React from 'react';

        function App() {
          return (
            

              

                
Hello, Tailwind in React!
                

                  This is an example of a React app styled with Tailwind CSS.
                
                
                  Click Me
                
              
            
          );
        }

        export default App;
    

Conclusion

You have now successfully integrated Tailwind CSS into your React app! Tailwind's utility-first approach allows you to style your app directly within JSX using utility classes, making it easier to create responsive, customizable designs.