Template listing hero section background

How to Install Tailwind CSS in React for Stylish UIs

React JS blog | Published on : 5th June, 2023

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 *

  1. 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
  1. 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.

  1. 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.

  1. 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.

  1. Finally, run your React app with the following command:
npm start or yarn start

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

  1. 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.

Colorfull background image for highlight footer
TailwindTap
Our team is creating and sharing useful resources on a regular basis and thousands of developers are using Tailwind CSS to create amazing websites with TailwindTap's free open-source pre-made components and templates.

Hire Tailwind CSS Developers

TailwindTap FacebookTailwindTap TwitterLinkedinInstagram