How to Install Tailwind CSS in React

Summary: in this tutorial, you’ll learn how to install Tailwind CSS in the React application.

Tailwind is a utility-first CSS framework that allows you to easily add CSS class names to the JSX (or TSX).

Prerequisites

• Node.js installed

Install Tailwind CSS React

Step 1. Open your terminal (command prompt on Windows or terminal on macOS and Linux).

Step 2. Create a new react application called react-tailwind using Vite

npm create vite@latest react-tailwind --template reactCode language: CSS (css)

Step 3. Navigate to the project directory react-tailwind:

cd react-tailwind

Step 4. Run the npm install command to install dependencies:

npm install

Step 5. Install tailwindcss and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer

Step 6. Generate  tailwind.config.js and postcss.config.js files by running the following command:

npx tailwindcss init -p

This command creates the tailwind.config.js and postcss.config.js files in the project directory.

Step 7. Add the path to your template files (html, jsx, tsx, …) to your tailwind.config.js file like this:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
Code language: JavaScript (javascript)

Step 8. Delete all files and directories in the src directory.

Step 9. Create a new index.css in the src directory and add @tailwind directives to the file as follows:

@tailwind base;
@tailwind components;
@tailwind utilities;Code language: CSS (css)

Step 10. Create the App.jsx in the src directory with the following code:

export default function App() {
  return (
    <div className='flex justify-center items-center min-h-screen'>
      React + Tailwind CSS
    </div>
  );
}Code language: JavaScript (javascript)

The App component includes some Tailwind CSS class names like flex, justify-center, items-center, and min-h-screen.

Step 11. Create the main.jsx file that shows the App component on the screen:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);Code language: JavaScript (javascript)

The main.jsx imports the index.css and renders the App component on the screen.

Step 12. Run the build process:

npm run dev

Output:

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show helpCode language: PHP (php)

Open the http://localhost:5173/ on your web browser, you should see the following message at the center of the screen:

React + Tailwind CSS