How to Install Tailwind CSS in React for Stylish UIs

Tailwind CSS is a well-known CSS framework, while React is a well-known JavaScript library. If you're working on a front-end project, Tailwind CSS and React are a wonderful combination for use.

Note: To run react project must include node JS in your system version 14 or higher

1. Start by creating a new React project using create-react-app. Open your terminal and run the following command:

npx create-react-app react-tailwind-project

This will create a new React project in a folder called react-tailwind-project. Customize folder name as per need after npx create-react-app *

2. Navigate to the project directory and install Tailwind CSS and its dependencies:

cd react-tailwind-project
npm install -D tailwindcss or yarn add -D tailwindcss

3. Next, create a configuration file for Tailwind CSS by running the following command:

npx tailwindcss init

This will create a tailwind.config.js file in your project's root directory.

4. Open the tailwind.config.js file and add the following configuration:

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

This configuration tells PostCSS to use Tailwind CSS and Autoprefixer to process your CSS.

5. Now we need to import Tailwind CSS styles into our project. Create a new file called index.css in the src directory and add the following code:

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

This code imports the base, components, and utilities styles from Tailwind CSS.

6. Finally, run your React app with the following command:

npm start or yarn start

This will start your app on http://localhost:3000.

7. See the result by modifying App.js file:

import React from 'react';
function App() {
  return (
    <div className="bg-blue-200">
      <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
    </div>
)}

That's it! You have now installed and set up Tailwind CSS with React for your project. You can now start customizing your styles using Tailwind CSS classes.