“`html

How to Use Tailwind CSS with React: A Step-by-Step Tutorial

Tailwind CSS is a utility-first framework that pairs perfectly with React, letting you style components directly in your JSX without writing custom CSS. This guide walks you through setup and practical usage.

Make sure you have Node.js installed and a React app ready. For a fast start, use Vite: npm create vite@latest my-app -- --template react.

Install Tailwind and Configure Vite

Inside your project folder, set up the Vite plugin:

• Install packages: npm install tailwindcss @tailwindcss/vite
• Open vite.config.js and add tailwindcss() to the plugins array.

Your config should look like this:

import tailwindcss from '@tailwindcss/vite'
export default defineConfig({ plugins: [react(), tailwindcss()] })

Add Tailwind to Your Global CSS

Open your main stylesheet, src/index.css, and replace its contents with a single line:

@import "tailwindcss";

Use Utility Classes in JSX

You can now apply Tailwind classes using the className prop. Example button:

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Submit</button>

Responsive variants like md:px-8 and dark mode classes work the same way in React.

Customize Your Theme

Need brand colors? Run npx @tailwindcss/cli init to create tailwind.config.js, then extend the theme object with your custom values.

Conclusion

Tailwind with React removes the need for sprawling stylesheets. You can scaffold, style, and ship a responsive UI quickly — all within your component files.

“`