Set Up Tailwind CSS in a React JS Project

If you don’t have a React app already, create one:

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

1. Install Tailwind CSS Run the following command to install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Then initialize Tailwind CSS:

npx tailwindcss init

This will create a tailwind.config.js file in your project.

1. Configure Tailwind Edit the tailwind.config.js file to configure the content paths. Replace the content key with the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Scan these files for Tailwind classes
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

1. Add Tailwind Directives to CSS In the src folder, locate or create a file called index.css. Add the following Tailwind directives:

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

1. Import CSS in React Ensure index.css is imported into your project. In the src/index.js file, you should have:

import './index.css';

1. Start the Development Server Run your React app to see Tailwind CSS in action:

npm start