How to Use Tailwind CSS in React JS

Tailwind CSS, a utility-first CSS framework, is rapidly gaining popularity among web developers. With its focus on building custom designs with low-level utility classes, it pairs particularly well with JavaScript frameworks like React. This article will guide you on how to set up and use Tailwind CSS in a React project.

Let’s jump right in How to Use Tailwind CSS in React!

Step 1: Set Up a React Project

If you don’t have a React project set up already, you can create one using Create React App. Open a terminal and run the following command:

npx create-react-app tailwind-react-app

This command will create a new directory named tailwind-react-app with a minimal React application. You can change tailwind-react-app to the name you prefer for your project. Navigate into your new project directory:

cd tailwind-react-app

Step 2: Install Tailwind CSS

The next step is to install Tailwind CSS into your project. In your project directory, run:

npm install tailwindcss

Step 3: Generate Tailwind Configuration File

You will need a Tailwind configuration file. You can generate one by running:

npx tailwindcss init

This will create a tailwind.config.js file in your project root. This file is where you can customize Tailwind’s default configuration, should you need to.

Step 4: Configure Tailwind CSS to PostCSS

To use Tailwind CSS in your React application, you need to configure it as a PostCSS plugin. Create a postcss.config.js file in your project root and add the following code:

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

You’ll also need to install postcss-cli and autoprefixer in your project. You can do this by running:

npm install postcss-cli autoprefixer

Step 5: Include Tailwind in Your CSS

Create a new CSS file, src/tailwind.css, and use the @import directive to include Tailwind’s base, components, and utilities styles:

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

Then, add a script to your package.json file to build your CSS:

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

This script, npm run build:css, processes your CSS using PostCSS.

Step 6: Import Generated CSS File

Lastly, replace the existing CSS file import in your src/index.js file with the new CSS file:

import './index.css';

Now, you can use Tailwind’s utility classes in your React components:

function App() {
  return (
    <div className="App">
      <header className="bg-blue-500 text-white text-center p-4">
        Welcome to React with Tailwind CSS!
      </header>
    </div>
  );
}

export default App;

Conclusion

Congratulations! You’ve successfully set up Tailwind CSS in your React application. This setup allows you to build custom and unique designs quickly and efficiently, leveraging the power of both Tailwind CSS and

React. With this foundation, you can now explore more complex components and layouts, knowing that you have the full flexibility of Tailwind’s utility-first classes at your disposal. Happy coding!

Here is the official guide from Tailwind Docs