Getting Started with Tailwind CSS in React

Tailwind CSS is a utility-first CSS framework that allows you to build custom, responsive designs without writing traditional CSS. When combined with React, it can help you create modern, fast, and maintainable user interfaces.

In this article, we’ll walk through how to set up Tailwind CSS in a React project from scratch, using Create React App.

---

1. Setting Up the React Project

If you don't have a React project yet, start by creating one using Create React App:

bash

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

---

2. Installing Tailwind CSS

Tailwind can be added via npm. You'll also need postcss and autoprefixer for processing the CSS.

bash

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

This will create two files:

• tailwind.config.js
• postcss.config.js

---

3. Configuring Tailwind

Edit the tailwind.config.js file to specify the paths to your files:

js

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

---

4. Adding Tailwind Directives to CSS

Open src/index.css (or create it if it doesn't exist) and add the Tailwind base, components, and utilities:

css

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

---

5. Using Tailwind in Your Components

Now you can start using Tailwind classes in your React components.

Example App.js:

jsx

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded shadow-md">
        <h1 className="text-2xl font-bold text-gray-800 mb-4">Welcome to Tailwind + React</h1>
        <p className="text-gray-600">This UI is styled using Tailwind utility classes.</p>
      </div>
    </div>
  );
}

export default App;

---

6. Building for Production

Tailwind includes a purge feature to remove unused CSS classes in production. This is already configured in your tailwind.config.js if you used the content array correctly. When you run:

bash

npm run build

Tailwind will automatically purge unused styles, keeping your bundle size small.

---

Conclusion

Tailwind CSS pairs beautifully with React, offering complete styling flexibility directly in your JSX. It helps eliminate the need for writing custom CSS while encouraging a consistent and scalable design approach.

As a next step, try building a component library or converting a UI design into Tailwind-styled React components. You'll quickly get a feel for how powerful and productive this combination can be.