TAILWIND CSS IN REACT Setup • Utility Classes • Responsive Design • Examples Prepared by Rachit Joshi 1. Introduction Tailwind CSS is a utility - first CSS framework that provides small, composable utility classes for styling web interfaces. In React, these classes are added to JSX elements through the className attribute. This approach lets developers style components directly in their markup while keeping designs consistent and reusable. Tailwind CSS utilities can control colour, spacing, typography, borders, layout, hover states, and responsive behaviour. The setup steps differ by Tailwind CSS version, so always follow the official installation instructions for the version used by your project. 2. Why Use Tailwind CSS with React? • Utility classes let developers apply common styles without creating a separate CSS rule for every element. • Responsive variants help adapt layouts to different screen sizes. • Hover, focus, and other state variants support interactive styling. • Reusable React components can share a consistent design system. • Build tooling can generate production CSS based on the classes detected in the project. 3. Creating a React Project If you do not already have a React application, one common approach is to use Vite. Run the following commands in a terminal with Node.js installed: npm create vite@latest my - react - app -- -- template react cd my - react - app npm install npm run dev These commands create and start a basic React development project. Follow the terminal output to open the local development URL. 4. Installing Tailwind CSS Tailwind installation differs between major versions. For a new project, consult the official Tailwind CSS installation guide for the current Vite and React setup rather than mixing instructions from older tutorials. For Tailwind CSS v4 with Vite, the typical plugin - based setup is: npm install tailwindcss @tailwindcss/vite Configure the Tailwind Vite plugin in vite.config.js, then import Tailwind in your main CSS file. For example: /* src/index.css */ @import "tailwindcss"; A typical Vite configuration includes the React plugin and Tailwind CSS plugin. Keep the exact configuration aligned with the installed package versions and the official documentation. 5. Import the CSS File Make sure the CSS file that imports Tailwind is loaded by your React entry point, commonly src/main.jsx: import React from "react"; import ReactDOM from "react - dom/client"; import App from "./App.jsx"; import "./index.css"; ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <App /> </React.StrictMode> ); 6. Using Tailwind Utility Classes In React JSX, use className rather than the HTML class attribute. The following component styles a heading, paragraph, and button: export default function App() { return ( <main className="mx - auto max - w - 2xl p - 6"> <h1 className="text - 3xl font - bold text - slate - 900"> Hello, Tailwind CSS! </h1> <p className="mt - 3 text - slate - 600"> Build a clean interface using utility classes. </p> <button className="mt - 5 rounded - lg bg - blue - 600 px - 4 py - 2 font - semibold text - white hover:bg - blue - 700"> Get Started </button> </main> ); } 7. Common Utility Classes Purpose Example class Effect Text size text - xl Sets a larger text size. Font weight font - bold Makes text bold. Text colour text - slate - 700 Sets the text colour. Background bg - blue - 600 Sets a blue background. Padding p - 4 Adds padding on all sides. Margin top mt - 4 Adds top margin. Rounded corners rounded - lg Rounds the corners. Flex layout flex items - center Creates a flex container and aligns items. Grid layout grid grid - cols - 2 Creates a two - column grid. Shadow shadow - md Adds a medium shadow. 8. Responsive Design Tailwind provides responsive variants such as sm:, md:, lg:, and xl:. A prefixed class applies at the corresponding breakpoint and above. This makes it possible to adapt a layout for mobile, tablet, and desktop screens. <div className="grid grid - cols - 1 gap - 4 md:grid - cols - 2 lg:grid - cols - 3"> <article className="rounded - lg border p - 4">Card One</article> <article className="rounded - lg border p - 4">Card Two</article> <article className="rounded - lg border p - 4">Card Three</article> </div> The example displays one column by default, two columns at the medium breakpoint, and three columns at the large breakpoint. 9. Conditional Styling in React React state or props can determine which classes are applied. Prefer complete class names in conditional branches so Tailwind's build process can detect the class names. function StatusLabel({ isActive }) { const statusClass = isActive ? "bg - green - 100 text - green - 800" : "bg - red - 100 text - red - 800"; return ( <span className={`rounded px - 3 py - 1 text - sm ${statusClass}`}> {isActive ? "Active" : "Inactive"} </span> ); } Avoid constructing class names from fragments such as `bg - ${color} - 500` unless you also configure a reliable way for the required classes to be included in the build. Dynamically assembled class names may not be detected automatically. 10. Creating a Reusable Button Component export default function Button({ children, variant = "primary" }) { const styles = { primary: "bg - blue - 600 text - white hover:bg - blue - 700", secondary: "bg - slate - 200 text - slate - 900 hover:bg - slate - 300", }; return ( <button className={`rounded - lg px - 4 py - 2 font - medium ${styles[variant]}`} > {children} </button> ); } This component keeps button markup reusable and lets callers select a visual variant through a prop. In a production component, validate the allowed variants and consider accessibility and disabled states. 11. Best Practices • Use className in JSX, not class. • Follow the installation guide for your exact Tailwind version. • Break complex interfaces into reusable React components. • Use responsive and state variants instead of duplicating styles unnecessarily. • Keep dynamically selected class names as complete strings where possible. • Test layouts at different screen widths and check colour contrast and keyboard focus. • Remove unused or outdated configuration left over from an older Tailwind version. 12. Common Problems and Solutions Styles are not appearing Check that the CSS file importing Tailwind is imported by the React entry point and that the required plugin/build setup is configured. The class attribute does not work as expected Use className in JSX. Dynamically generated styles are missing Use complete class strings in the source or configure the build process to include the needed classes. Tutorial commands do not match my project Confirm the Tailwind major version; v3 and v4 setup instructions differ. Responsive styles are not changing Check the breakpoint prefix and test the viewport width against the configured breakpoint. No. Installation and configuration differ, so follow documentation for the version installed. 1 3 . Conclusion Tailwind CSS can make React interface development faster by providing composable utility classes for layout, typography, colour, spacing, and responsive behaviour. A reliable setup, reusable components, complete class names, and testing across screen sizes help keep projects maintainable. Because Tailwind's setup changes between major versions, use documentation that matches your installed version.