React with Tailwind CSS

Tailwind CSS is a utility-first CSS framework. Instead of creating a large number of custom CSS classes, developers can combine small utility classes to style elements.

<button className="bg-blue-600 text-white px-4 py-2">
    Click Me
</button>

Tailwind CSS can be used with React to create responsive and reusable interfaces quickly.

• Utility-based styling
• Responsive design
• Reusable React components
• Flexible layouts
• Less need for custom CSS files

Tailwind CSS setup depends on the version and build tool used by the React project. A current Tailwind setup should follow the installation method recommended for the project.

For example, a project can install Tailwind through npm:

npm install tailwindcss

Additional configuration may be required depending on the Tailwind version and project setup.

Tailwind provides small utility classes that each perform a specific styling task.

<div className="p-4 bg-white rounded-lg shadow">

    Hello React

</div>

Here, different classes control padding, background, border radius, and shadow.

Tailwind provides utility classes for background colors.

<div className="bg-blue-500">
    Blue Background
</div>

<div className="bg-green-500">
    Green Background
</div>

<div className="bg-red-500">
    Red Background
</div>

Text color can be changed using Tailwind utility classes.

<p className="text-blue-600">
    Blue Text
</p>

<p className="text-green-600">
    Green Text
</p>

<p className="text-red-600">
    Red Text
</p>

Padding utilities control the space inside an element.

<div className="p-4">
    Content
</div>

<div className="px-6 py-3">
    Content
</div>

p-4 applies padding, while px-6 controls horizontal padding and py-3 controls vertical padding.

Margin utilities control the space outside an element.

<div className="mt-4">
    Content
</div>

<div className="mb-6">
    Content
</div>

<div className="mx-auto">
    Centered Element
</div>

Tailwind provides utility classes for different text sizes.

<h1 className="text-4xl">
    React
</h1>

<p className="text-lg">
    Learn React with Tailwind
</p>

<p className="text-sm">
    Small Text
</p>

Font weight can be controlled with utility classes.

<p className="font-normal">
    Normal Text
</p>

<p className="font-semibold">
    Semi Bold Text
</p>

<p className="font-bold">
    Bold Text
</p>

Tailwind provides utilities for creating Flexbox layouts.

<div className="flex">

    <div>Item 1</div>
    <div>Item 2</div>

</div>

The flex class sets the element's display mode to Flexbox.

Tailwind provides utilities for horizontal and vertical alignment.

<div className="flex items-center justify-center">

    <h2>
        Centered Content
    </h2>

</div>

items-center controls cross-axis alignment and justify-center controls main-axis alignment.

Tailwind provides utilities for CSS Grid layouts.

<div className="grid grid-cols-3 gap-4">

    <div>One</div>
    <div>Two</div>
    <div>Three</div>

</div>

Tailwind uses responsive prefixes to apply styles at different screen sizes.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>

</div>

The layout can change as the screen becomes wider.

Tailwind utility classes can be combined to create buttons.

<button
    className="
        bg-blue-600
        text-white
        px-4
        py-2
        rounded
    "
>

    Save

</button>

Tailwind supports state variants such as hover:.

<button
    className="
        bg-blue-600
        hover:bg-blue-700
        text-white
        px-4
        py-2
    "
>

    Hover Me

</button>

Tailwind styling can be combined with normal React event handlers.

function App() {

    function handleClick() {

        alert("Hello React");

    }

    return (
        <button
            className="
                bg-green-600
                text-white
                px-4
                py-2
                rounded
            "
            onClick={handleClick}
        >

            Click Me

        </button>
    );
}

Tailwind utility classes can be used to style form controls.

<input
    type="text"
    placeholder="Enter your name"
    className="
        border
        border-gray-300
        rounded
        px-4
        py-2
        w-full
    "
/>

React state can control a Tailwind-styled input.

const [name, setName] =
    useState("");

return (
    <input
        type="text"
        value={name}
        onChange={e =>
            setName(
                e.target.value
            )
        }
        className="
            border
            px-4
            py-2
            rounded
        "
    />
);

React expressions can dynamically change Tailwind classes.

const [active, setActive] =
    useState(false);

return (
    <button
        className={
            active
                ? "bg-green-600 text-white px-4 py-2 rounded"
                : "bg-gray-500 text-white px-4 py-2 rounded"
        }
        onClick={() =>
            setActive(!active)
        }
    >

        {active
            ? "Active"
            : "Inactive"}

    </button>
);

Tailwind utility classes can be combined to create reusable card designs.

<div className="
    max-w-sm
    bg-white
    rounded-lg
    shadow
    p-6
">

    <h2 className="text-xl font-bold">
        React Course
    </h2>

    <p className="text-gray-600 mt-2">
        Learn React step by step.
    </p>

    <button
        className="
            mt-4
            bg-blue-600
            text-white
            px-4
            py-2
            rounded
        "
    >
        Start
    </button>

</div>

Tailwind provides classes for borders and rounded corners.

<div className="
    border
    border-gray-300
    rounded-lg
    p-4
">

    Content

</div>

Classes such as border and rounded-lg can be combined with other utilities.

React can generate multiple Tailwind-styled cards from an array.

const courses = [
    "React",
    "JavaScript",
    "Python"
];

function Courses() {

    return (
        <div className="
            grid
            grid-cols-1
            md:grid-cols-3
            gap-4
        ">

            {courses.map(
                (course, index) => (

                <div
                    key={index}
                    className="
                        bg-white
                        p-5
                        rounded-lg
                        shadow
                    "
                >

                    <h2 className="text-xl font-bold">
                        {course}
                    </h2>

                    <button
                        className="
                            mt-3
                            bg-blue-600
                            text-white
                            px-4
                            py-2
                            rounded
                        "
                    >

                        Start

                    </button>

                </div>

            ))}

        </div>
    );
}

Tailwind can support dark-mode styling using the appropriate dark-mode configuration.

<div className="
    bg-white
    text-black
    dark:bg-gray-900
    dark:text-white
">

    React Application

</div>

The dark: prefix applies styles when dark mode is active according to the project's Tailwind configuration.

Tailwind classes can be used inside reusable React components.

function CourseCard({
    title,
    description
}) {

    return (
        <div className="
            bg-white
            rounded-lg
            shadow
            p-5
        ">

            <h2 className="
                text-xl
                font-bold
            ">

                {title}

            </h2>

            <p className="
                text-gray-600
                mt-2
            ">

                {description}

            </p>

            <button className="
                mt-4
                bg-blue-600
                text-white
                px-4
                py-2
                rounded
            ">

                Learn More

            </button>

        </div>
    );
}

React props can be used to provide dynamic content while Tailwind classes provide the styling.

function Button({
    title
}) {

    return (
        <button className="
            bg-blue-600
            hover:bg-blue-700
            text-white
            px-4
            py-2
            rounded
        ">

            {title}

        </button>
    );
}

function App() {

    return (
        <div>

            <Button
                title="Login"
            />

            <Button
                title="Register"
            />

        </div>
    );
}

Both can be used with React. The choice depends on the project's design, workflow, and team preferences.

import { useState } from "react";

function Course() {

    const [started, setStarted] =
        useState(false);

    return (
        <div className="
            min-h-screen
            bg-gray-100
            flex
            items-center
            justify-center
            p-6
        ">

            <div className="
                max-w-md
                w-full
                bg-white
                rounded-xl
                shadow-lg
                p-6
            ">

                <h1 className="
                    text-3xl
                    font-bold
                    text-gray-800
                ">

                    React Course

                </h1>

                <p className="
                    text-gray-600
                    mt-3
                ">

                    Learn React with
                    Tailwind CSS.

                </p>

                {started && (

                    <div className="
                        mt-4
                        bg-green-100
                        text-green-700
                        p-3
                        rounded
                    ">

                        Course Started!

                    </div>

                )}

                <button
                    className="
                        mt-5
                        bg-blue-600
                        hover:bg-blue-700
                        text-white
                        px-5
                        py-2
                        rounded-lg
                    "
                    onClick={() =>
                        setStarted(true)
                    }
                >

                    Start Course

                </button>

            </div>

        </div>
    );
}

export default Course;

• Using class instead of className.
• Using Tailwind classes without completing the project's Tailwind setup.
• Using incorrect utility class names.
• Forgetting responsive prefixes when responsive behavior is required.
• Creating unnecessarily long and difficult class strings.
• Ignoring reusable component structure.
• Using dynamic class names in ways that the build process cannot detect.
• Mixing multiple styling approaches without a clear project strategy.

• Use reusable React components for repeated UI elements.
• Use Tailwind utility classes consistently.
• Use responsive prefixes for mobile-friendly layouts.
• Keep component markup readable.
• Extract repeated UI patterns into components.
• Use React state and events for interactive behavior.
• Keep application logic separate from presentation where practical.
• Use Tailwind configuration according to the project's requirements.
• Avoid unnecessary custom CSS when utility classes are sufficient.
• Choose a consistent styling strategy for the entire project.

React
  ↓
Components
  ↓
Tailwind Utilities
  ↓
Responsive UI