React Tailwind CSS

Install Tailwind CSS

Inside your React project folder, install Tailwind and its required packages:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will generate two files:

tailwind.config.js
postcss.config.js

Configure tailwind.config.js

Open the tailwind.config.js file and configure the content option to include all your React component files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Include all source files
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind Directives to CSS

In React project, go to src/index.css (or create a new CSS file), and replace its content with:

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

Use Tailwind CSS Classes in JSX

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">Hello Tailwind + React!</h1>
    </div>
  );
}

export default App;

Check out the official Tailwind CSS website for full details and documentation.

React Tailwind CSS

Install Tailwind CSS

Configure tailwind.config.js

Add Tailwind Directives to CSS

Use Tailwind CSS Classes in JSX

On this page