How to Set Up Tailwind CSS in a React Project

How to Set Up Tailwind CSS in a React Project

Setting up Tailwind in a React project is quick. Here is the step-by-step setup and the common mistakes.

Step 1: Install Tailwind

Install Tailwind and its peer dependencies with npm. Use the official Tailwind packages, not a random CDN, for a real project.

Step 2: Generate the Config

Run the Tailwind init command to generate a configuration file. This file lets you customize the theme, colors, and which files Tailwind scans.

Step 3: Configure the Content Paths

In the config, list the files Tailwind should scan for class names, like your src folder and HTML files. This is critical: Tailwind only generates CSS for classes it finds in these files.

Step 4: Add the Tailwind Directives

In your main CSS file, add the three Tailwind directives: base, components, and utilities. This injects Tailwind's styles into your project.

Step 5: Import the CSS

Import the CSS file into your React entry point so Tailwind's styles are bundled and applied.

Step 6: Use Utility Classes

Start using utility classes in your components, like className="flex p-4 text-center". You should see the styling apply immediately.

The Common Mistakes

Forgetting to configure the content paths, so Tailwind generates no CSS. Or using a CDN in production, which ships the entire framework instead of only your used classes.

The Takeaway

Install Tailwind, generate the config, configure the content paths, add the directives to your CSS, import it, and use utility classes. The biggest mistake is forgetting the content paths, which produces no CSS.