React — Tailwind

Installing Tailwind

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

Configuration

// tailwind.config.js
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Basic Usage

function App() {
    return (
        <div className="bg-gray-100 min-h-screen">
            <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
                <h1 className="text-3xl font-bold text-gray-900">
                    Hello Tailwind
                </h1>
            </div>
        </div>
    );
}

Components

// Button component
function Button({ children, variant = 'primary' }) {
    const variants = {
        primary: 'bg-blue-500 hover:bg-blue-700 text-white',
        secondary: 'bg-gray-500 hover:bg-gray-700 text-white',
        danger: 'bg-red-500 hover:bg-red-700 text-white',
    };

    return (
        <button className={`${variants[variant]} font-bold py-2 px-4 rounded`}>
            {children}
        </button>
    );
}

// Card component
function Card({ title, children }) {
    return (
        <div className="bg-white rounded-lg shadow-md p-6">
            <h3 className="text-xl font-bold mb-4">{title}</h3>
            <div>{children}</div>
        </div>
    );
}

Tailwind Examples

// Responsive navbar
function Navbar() {
    return (
        <nav className="bg-white shadow-lg">
            <div className="max-w-6xl mx-auto px-4">
                <div className="flex justify-between items-center py-4">
                    <div className="text-xl font-bold text-gray-800">
                        My App
                    </div>
                    <div className="hidden md:flex space-x-4">
                        <a href="#" className="text-gray-600 hover:text-gray-800">Home</a>
                        <a href="#" className="text-gray-600 hover:text-gray-800">About</a>
                        <a href="#" className="text-gray-600 hover:text-gray-800">Contact</a>
                    </div>
                </div>
            </div>
        </nav>
    );
}

// Product card
function ProductCard({ product }) {
    return (
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <img
                src={product.image}
                alt={product.name}
                className="w-full h-48 object-cover"
            />
            <div className="p-4">
                <h3 className="text-lg font-bold">{product.name}</h3>
                <p className="text-gray-600">${product.price}</p>
                <button className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                    Add to Cart
                </button>
            </div>
        </div>
    );
}

// Form
function Form() {
    return (
        <div className="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md">
            <h2 className="text-2xl font-bold mb-6">Contact Us</h2>
            <form>
                <div className="mb-4">
                    <label className="block text-gray-700 mb-2">Name</label>
                    <input
                        type="text"
                        className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
                    />
                </div>
                <div className="mb-4">
                    <label className="block text-gray-700 mb-2">Email</label>
                    <input
                        type="email"
                        className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
                    />
                </div>
                <button
                    type="submit"
                    className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600"
                >
                    Submit
                </button>
            </form>
        </div>
    );
}

Mini Practice

Write React code that:

1. Sets up Tailwind CSS
2. Creates a responsive navbar
3. Builds a product card
4. Implements a form with Tailwind

Up Next

Next: Learn about Performance optimization.