How to Use Tailwind CSS in React: Simple Setup and Example

To use Tailwind CSS in a React project, install Tailwind via npm, configure it with PostCSS, and import its styles in your React app. Then, apply Tailwind utility classes directly in your JSX elements' className attributes to style components quickly and responsively.

Syntax

In React, Tailwind CSS classes are added using the className attribute inside JSX. Each utility class controls a specific style, like colors, spacing, or layout.

• className="bg-blue-500 text-white p-4 rounded" applies a blue background, white text, padding, and rounded corners.
• Multiple classes are separated by spaces.
• Use responsive prefixes like md: or hover: for different screen sizes or states.

jsx

function Button() {
  return <button className="bg-blue-500 text-white p-4 rounded hover:bg-blue-700">Click me</button>;
}

Output

A blue button with white text, padding, rounded corners, and a darker blue background on hover.

Example

This example shows a simple React component styled with Tailwind CSS classes. It demonstrates how to import Tailwind styles and use utility classes in JSX.

jsx

import React from 'react';
import './index.css'; // Tailwind styles imported here

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <button className="bg-green-500 text-white font-bold py-2 px-6 rounded shadow hover:bg-green-700">
        Press Me
      </button>
    </div>
  );
}

export default App;

Output

A full screen light gray background with a centered green button that darkens on hover.

Common Pitfalls

Common mistakes when using Tailwind in React include:

• Not installing or configuring Tailwind properly, so styles don't apply.
• Using class instead of className in JSX, which breaks styling.
• Forgetting to import the Tailwind CSS file in your React entry point.
• Not restarting the development server after Tailwind config changes.

jsx

/* Wrong: Using 'class' in JSX */
function Wrong() {
  return <div className="bg-red-500">Wrong class attribute</div>;
}

/* Right: Use 'className' */
function Right() {
  return <div className="bg-red-500">Correct className attribute</div>;
}

Output

The first component will not style correctly; the second will show a red background.

Quick Reference

Remember these tips when using Tailwind in React:

• Always use className for styling JSX elements.
• Import Tailwind CSS in your main CSS or JS file.
• Use utility classes for fast styling without writing custom CSS.
• Leverage responsive and state variants like sm:, hover:.

Key Takeaways

Install and configure Tailwind CSS properly before using it in React.

Use the JSX attribute className to add Tailwind utility classes.

Import Tailwind styles in your React app entry point to apply styles globally.

Use responsive and state prefixes to create adaptive and interactive UI easily.

Restart your development server after changing Tailwind configuration.