🎨 Styling in React

🗺️ Styling Approaches Overview

React doesn't enforce a specific styling approach - you have options! Let's understand the landscape before diving into each method.

The Styling Spectrum

React styling approaches range from traditional to cutting-edge:

What We'll Cover

This lesson focuses on the most practical, widely-used approaches:

• Traditional CSS - The foundation everyone knows
• CSS Modules - Scoped styles without conflicts
• Inline Styles - JavaScript-powered dynamic styling
• CSS-in-JS - Modern component-centric styling
• Tailwind CSS - Utility-first rapid development

📄 Traditional CSS Stylesheets

Let's start with what you already know - regular CSS files! This is the simplest approach and works great for many projects.

Basic CSS Import

You can import CSS files directly into your components:

// Button.tsx
import './Button.css';

function Button({ text, onClick }: ButtonProps) {
    return (
        <button className="btn" onClick={onClick}>
            {text}
        </button>
    );
}

export default Button;

/* Button.css */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    background-color: #667eea;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: #5568d3;
}

.btn:active {
    background-color: #4451b8;
}

.btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

Global vs Component Styles

Structure your CSS for maintainability:

src/
├── index.css              # Global styles, resets
├── App.tsx
├── App.css                # App-level styles
└── components/
    ├── Button/
    │   ├── Button.tsx
    │   └── Button.css     # Button-specific styles
    └── Card/
        ├── Card.tsx
        └── Card.css       # Card-specific styles

Class Name Composition

Build class names dynamically:

interface ButtonProps {
    text: string;
    variant?: 'primary' | 'secondary' | 'danger';
    size?: 'small' | 'medium' | 'large';
    disabled?: boolean;
    onClick?: () => void;
}

function Button({ 
    text, 
    variant = 'primary', 
    size = 'medium', 
    disabled = false,
    onClick 
}: ButtonProps) {
    // Method 1: Template literal
    const className = `btn btn-${variant} btn-${size}`;
    
    // Method 2: Array join
    const classes = ['btn', `btn-${variant}`, `btn-${size}`];
    if (disabled) classes.push('btn-disabled');
    const classNameAlt = classes.join(' ');
    
    return (
        <button 
            className={className}
            disabled={disabled}
            onClick={onClick}
        >
            {text}
        </button>
    );
}

/* Button variants */
.btn-primary {
    background-color: #667eea;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-danger {
    background-color: #dc3545;
}

/* Button sizes */
.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-medium {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

.btn-large {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
}

Composing Class Names with a Helper

Once your class logic grows past a simple template literal, reach for a tiny helper. In 2026 the go-to is clsx — it's roughly 200 bytes, ships its own TypeScript types (no separate @types package to install), and has the same API as the older classnames. It joins string arguments and includes object keys whose value is truthy:

# clsx bundles its own types — nothing extra to install
npm install clsx

import clsx from 'clsx';
import './Button.css';

function Button({
    text,
    variant = 'primary',
    size = 'medium',
    disabled = false,
    loading = false,
    onClick
}: ButtonProps) {
    const buttonClasses = clsx('btn', {
        [`btn-${variant}`]: variant,
        [`btn-${size}`]: size,
        'btn-disabled': disabled,
        'btn-loading': loading,
    });
    
    return (
        <button 
            className={buttonClasses}
            disabled={disabled || loading}
            onClick={onClick}
        >
            {loading ? 'Loading...' : text}
        </button>
    );
}

BEM Naming Convention

Use BEM (Block Element Modifier) to avoid conflicts:

/* Block */
.card { }

/* Elements */
.card__header { }
.card__body { }
.card__footer { }

/* Modifiers */
.card--primary { }
.card--large { }
.card__header--highlighted { }

function Card({ variant = 'default', size = 'medium' }: CardProps) {
    return (
        <div className={`card card--${variant} card--${size}`}>
            <div className="card__header">
                <h2>Card Title</h2>
            </div>
            <div className="card__body">
                <p>Card content</p>
            </div>
            <div className="card__footer">
                <button>Action</button>
            </div>
        </div>
    );
}

🔒 CSS Modules

CSS Modules solve the global namespace problem by automatically scoping styles to components. They're like regular CSS but with superpowers!

Creating a CSS Module

Name your CSS file with the .module.css extension:

Button.tsx
Button.module.css    ← Notice the .module.css extension

/* Button.module.css */
.button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.primary {
    background-color: #667eea;
    color: white;
}

.secondary {
    background-color: #6c757d;
    color: white;
}

.large {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
}

Using CSS Modules

Import the CSS Module as an object:

// Button.tsx
import styles from './Button.module.css';

interface ButtonProps {
    text: string;
    variant?: 'primary' | 'secondary';
    size?: 'medium' | 'large';
    onClick?: () => void;
}

function Button({ 
    text, 
    variant = 'primary', 
    size = 'medium',
    onClick 
}: ButtonProps) {
    // Access classes as object properties
    return (
        <button 
            className={`${styles.button} ${styles[variant]} ${styles[size]}`}
            onClick={onClick}
        >
            {text}
        </button>
    );
}

export default Button;

How CSS Modules Work

At build time, class names are transformed:

/* You write: */
.button { }

/* Browser sees: */
.Button_button__2Xk3q { }

The generated class name is unique, preventing conflicts!

Composition in CSS Modules

CSS Modules support composition - reusing styles:

/* Button.module.css */
.base {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.primary {
    composes: base;
    background-color: #667eea;
    color: white;
}

.secondary {
    composes: base;
    background-color: #6c757d;
    color: white;
}

/* Can even compose from other files */
.special {
    composes: primary;
    composes: animated from './animations.module.css';
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

// Simpler usage - no need to combine classes!
function Button({ variant = 'primary' }: ButtonProps) {
    return (
        <button className={styles[variant]}>
            Click me
        </button>
    );
}

Global Styles in CSS Modules

Sometimes you need global classes:

/* Button.module.css */

/* Local by default */
.button {
    padding: 0.5rem 1rem;
}

/* Explicitly global */
:global(.btn-reset) {
    all: unset;
}

/* Mix local and global */
.button :global(.icon) {
    margin-right: 0.5rem;
}

Using with clsx

Combine CSS Modules with the clsx helper — you pass the scoped styles.* values instead of raw strings:

import clsx from 'clsx';
import styles from './Button.module.css';

function Button({
    variant = 'primary',
    size = 'medium',
    disabled = false
}: ButtonProps) {
    const buttonClasses = clsx(
        styles.button,
        styles[variant],
        styles[size],
        {
            [styles.disabled]: disabled
        }
    );
    
    return (
        <button className={buttonClasses}>
            Click me
        </button>
    );
}

TypeScript Support

Out of the box, TypeScript types a .module.css import loosely as { readonly [key: string]: string } — so styles.anything compiles even if that class doesn't exist. To get real autocomplete and catch typos, add the editor plugin:

# Install the TypeScript language-service plugin
npm install --save-dev typescript-plugin-css-modules

// tsconfig.json
{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

With the plugin installed, your editor knows exactly which classes exist:

import styles from './Button.module.css';

// TypeScript knows what classes exist!
styles.button    // ✅ Autocomplete works
styles.primary   // ✅ Autocomplete works
styles.invalid   // ❌ TypeScript error!

✍️ Inline Styles

React lets you write styles directly in JavaScript using the style prop. This is perfect for dynamic styling based on props or state!

Basic Inline Styles

Pass a JavaScript object to the style prop:

function Box() {
    return (
        <div style={{
            backgroundColor: '#667eea',
            color: 'white',
            padding: '1rem',
            borderRadius: '8px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
            Styled Box
        </div>
    );
}

const boxStyle: React.CSSProperties = {
    backgroundColor: '#667eea',
    padding: 16,              // ✅ numbers are OK — React adds 'px' for lengths
    borderRadius: '8px',
    // 'background-color': 'red' // ❌ hyphenated key is not assignable
    // display: 'flx',           // ❌ not a valid value for 'display'
};

Check Yourself: Is It a Valid Style Object?

Click each candidate below to see whether it would satisfy React.CSSProperties — and if not, why the compiler rejects it.

Dynamic Inline Styles

The real power of inline styles is dynamic values:

interface ProgressBarProps {
    percentage: number;
    color?: string;
    height?: number;
}

function ProgressBar({ 
    percentage, 
    color = '#667eea',
    height = 20 
}: ProgressBarProps) {
    const containerStyle = {
        width: '100%',
        height: `${height}px`,
        backgroundColor: '#e0e0e0',
        borderRadius: '10px',
        overflow: 'hidden'
    };
    
    const fillStyle = {
        width: `${percentage}%`,
        height: '100%',
        backgroundColor: color,
        transition: 'width 0.3s ease'
    };
    
    return (
        <div style={containerStyle}>
            <div style={fillStyle} />
        </div>
    );
}

// Usage with dynamic values
<ProgressBar percentage={75} color="#4CAF50" height={30} />

Conditional Inline Styles

Change styles based on conditions:

interface MessageProps {
    type: 'info' | 'success' | 'warning' | 'error';
    text: string;
}

function Message({ type, text }: MessageProps) {
    const getBackgroundColor = () => {
        switch (type) {
            case 'info': return '#2196F3';
            case 'success': return '#4CAF50';
            case 'warning': return '#FFC107';
            case 'error': return '#F44336';
            default: return '#666';
        }
    };
    
    const messageStyle = {
        padding: '1rem',
        borderRadius: '4px',
        backgroundColor: getBackgroundColor(),
        color: 'white',
        marginBottom: '1rem'
    };
    
    return <div style={messageStyle}>{text}</div>;
}

Extracting Style Objects

For cleaner code, extract style objects. Define them outside the component so they aren't recreated on every render, and type them so TypeScript validates every property:

// Typed with React.CSSProperties — no `as const` gymnastics needed.
// Without the annotation, 'column' would widen to `string` and error.
const styles: Record<string, React.CSSProperties> = {
    container: {
        display: 'flex',
        flexDirection: 'column',   // ✅ checked against the allowed union
        gap: '1rem',
        padding: '2rem'
    },
    header: {
        fontSize: '2rem',
        fontWeight: 'bold',
        color: '#333'
    },
    content: {
        fontSize: '1rem',
        lineHeight: 1.6,
        color: '#666'
    }
};

function Article() {
    return (
        <div style={styles.container}>
            <h1 style={styles.header}>Article Title</h1>
            <p style={styles.content}>Article content...</p>
        </div>
    );
}

Merging Style Objects

Combine multiple style objects:

const baseButtonStyle = {
    padding: '0.5rem 1rem',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
};

const primaryButtonStyle = {
    ...baseButtonStyle,
    backgroundColor: '#667eea',
    color: 'white'
};

const disabledButtonStyle = {
    ...baseButtonStyle,
    backgroundColor: '#ccc',
    cursor: 'not-allowed'
};

function Button({ disabled }: { disabled: boolean }) {
    const buttonStyle = disabled ? disabledButtonStyle : primaryButtonStyle;
    
    return <button style={buttonStyle}>Click me</button>;
}

When to Use Inline Styles

Inline styles work best for:

• Dynamic values calculated from props/state
• Values that change frequently
• Component-specific styles that won't be reused
• Quick prototyping

Avoid inline styles for:

• Static styles that don't change
• Complex layouts requiring media queries
• Styles needing pseudo-classes
• Reusable design systems

🎭 Dynamic and Conditional Styling

React's real power comes from making styles react to your data. Let's master dynamic styling techniques!

Conditional Classes

Apply classes based on conditions:

interface ButtonProps {
    text: string;
    variant: 'primary' | 'secondary';
    isActive: boolean;
    isLoading: boolean;
}

function Button({ text, variant, isActive, isLoading }: ButtonProps) {
    // Method 1: Template literal
    const className = `btn btn-${variant} ${isActive ? 'active' : ''} ${isLoading ? 'loading' : ''}`;
    
    // Method 2: Array filter join
    const classNameAlt = [
        'btn',
        `btn-${variant}`,
        isActive && 'active',
        isLoading && 'loading'
    ].filter(Boolean).join(' ');
    
    // Method 3: clsx helper (recommended)
    const classNameBest = clsx('btn', `btn-${variant}`, {
        active: isActive,
        loading: isLoading
    });
    
    return <button className={classNameBest}>{text}</button>;
}

Style Based on Props

Calculate styles from prop values:

interface AvatarProps {
    name: string;
    size?: number;
    color?: string;
    imageUrl?: string;
}

function Avatar({ name, size = 40, color, imageUrl }: AvatarProps) {
    // Generate color from name if not provided
    const getColorFromName = (str: string) => {
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
            hash = str.charCodeAt(i) + ((hash << 5) - hash);
        }
        const hue = hash % 360;
        return `hsl(${hue}, 70%, 60%)`;
    };
    
    const backgroundColor = color || getColorFromName(name);
    const initials = name.split(' ').map(n => n[0]).join('').toUpperCase();
    
    const avatarStyle = {
        width: size,
        height: size,
        borderRadius: '50%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: size * 0.4,
        fontWeight: 'bold',
        color: 'white',
        backgroundColor: backgroundColor,
        backgroundImage: imageUrl ? `url(${imageUrl})` : 'none',
        backgroundSize: 'cover',
        backgroundPosition: 'center'
    };
    
    return (
        <div style={avatarStyle}>
            {!imageUrl && initials}
        </div>
    );
}

// Usage
<Avatar name="Alice Johnson" size={60} />
<Avatar name="Bob Smith" size={40} color="#FF6B6B" />
<Avatar name="Charlie Brown" imageUrl="/charlie.jpg" />

Theme-Based Styling

Create a theme system:

// Theme definition
const theme = {
    colors: {
        primary: '#667eea',
        secondary: '#6c757d',
        success: '#4CAF50',
        danger: '#F44336',
        text: '#333',
        textLight: '#666',
        background: '#fff',
        border: '#e0e0e0'
    },
    spacing: {
        xs: '0.25rem',
        sm: '0.5rem',
        md: '1rem',
        lg: '1.5rem',
        xl: '2rem'
    },
    borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '12px',
        full: '9999px'
    }
};

// Use theme in component
interface CardProps {
    children: React.ReactNode;
    variant?: 'default' | 'primary' | 'success';
}

function Card({ children, variant = 'default' }: CardProps) {
    const getBackgroundColor = () => {
        switch (variant) {
            case 'primary': return theme.colors.primary;
            case 'success': return theme.colors.success;
            default: return theme.colors.background;
        }
    };
    
    const cardStyle = {
        padding: theme.spacing.lg,
        borderRadius: theme.borderRadius.md,
        backgroundColor: getBackgroundColor(),
        border: `1px solid ${theme.colors.border}`,
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
    };
    
    return <div style={cardStyle}>{children}</div>;
}

Animation with State

Animate components by changing styles:

import { useState } from 'react';

function AnimatedBox() {
    const [isExpanded, setIsExpanded] = useState(false);
    
    const boxStyle = {
        width: isExpanded ? '200px' : '100px',
        height: isExpanded ? '200px' : '100px',
        backgroundColor: isExpanded ? '#4CAF50' : '#667eea',
        borderRadius: isExpanded ? '50%' : '8px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        cursor: 'pointer',
        transition: 'all 0.3s ease',
        transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'
    };
    
    return (
        <div 
            style={boxStyle}
            onClick={() => setIsExpanded(!isExpanded)}
        >
            Click me!
        </div>
    );
}

Live Playground: A Box Driven by Inline Styles

Dynamic styling shines when the numbers come from real input. Move the sliders below — each one feeds a value straight into a React.CSSProperties object applied to the preview box, exactly the way useState values would in a real component:

const style: React.CSSProperties = {
  width: 100,
  height: 100,
  borderRadius: 8,
  backgroundColor: '#667eea',
  transform: 'rotate(0deg)',
};

Notice there's no CSS file here at all — the object is the styling, computed live from JavaScript. That's the sweet spot for inline styles: values that genuinely change at runtime, like this box, a progress bar's width, or a user-picked accent color.

Responsive Values

Adjust styles based on screen size:

import { useState, useEffect } from 'react';

function useWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);
    
    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    
    return width;
}

function ResponsiveGrid() {
    const width = useWindowWidth();
    
    const getColumns = () => {
        if (width < 768) return 1;
        if (width < 1024) return 2;
        return 3;
    };
    
    const gridStyle = {
        display: 'grid',
        gridTemplateColumns: `repeat(${getColumns()}, 1fr)`,
        gap: '1rem'
    };
    
    return (
        <div style={gridStyle}>
            {/* Grid items */}
        </div>
    );
}

function ProgressBar({ percentage }: { percentage: number }) {
    return (
        <div className="progress-container">
            <div 
                className="progress-fill"
                style={{ width: `${percentage}%` }}  // Dynamic value
            />
        </div>
    );
}

💅 CSS-in-JS Solutions

CSS-in-JS libraries let you write CSS directly in your JavaScript with the full power of both languages. For years the most popular was styled-components, and it's still a great way to learn the pattern — so we'll use it as our example below.

Introduction to styled-components

styled-components lets you create components with built-in styles:

# styled-components v6 bundles its own types — no @types package needed
npm install styled-components

import styled from 'styled-components';

// Create a styled component
const Button = styled.button`
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    background-color: #667eea;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    
    &:hover {
        background-color: #5568d3;
    }
    
    &:active {
        background-color: #4451b8;
    }
`;

// Use it like a regular component
function App() {
    return <Button>Click me</Button>;
}

Props in styled-components

styled-components can use props to change styles:

interface ButtonProps {
    $variant?: 'primary' | 'secondary' | 'danger';
    $size?: 'small' | 'medium' | 'large';
}

const Button = styled.button<ButtonProps>`
    padding: ${props => {
        switch (props.$size) {
            case 'small': return '0.25rem 0.5rem';
            case 'large': return '0.75rem 1.5rem';
            default: return '0.5rem 1rem';
        }
    }};
    
    font-size: ${props => {
        switch (props.$size) {
            case 'small': return '0.875rem';
            case 'large': return '1.125rem';
            default: return '1rem';
        }
    }};
    
    background-color: ${props => {
        switch (props.$variant) {
            case 'secondary': return '#6c757d';
            case 'danger': return '#F44336';
            default: return '#667eea';
        }
    }};
    
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
        opacity: 0.9;
    }
    
    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
`;

// Usage
<Button $variant="primary" $size="large">Large Primary</Button>
<Button $variant="danger" $size="small">Small Danger</Button>

Extending Styles

Create variations by extending styled components:

const Button = styled.button`
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
`;

const PrimaryButton = styled(Button)`
    background-color: #667eea;
    color: white;
`;

const OutlineButton = styled(Button)`
    background-color: transparent;
    color: #667eea;
    border: 2px solid #667eea;
`;

const IconButton = styled(Button)`
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
`;

Theming with styled-components

Create a theme provider for global styles:

import { ThemeProvider } from 'styled-components';

const theme = {
    colors: {
        primary: '#667eea',
        secondary: '#6c757d',
        text: '#333',
        background: '#fff'
    },
    spacing: {
        sm: '0.5rem',
        md: '1rem',
        lg: '1.5rem'
    }
};

// Components can access theme
const Container = styled.div`
    padding: ${props => props.theme.spacing.lg};
    background-color: ${props => props.theme.colors.background};
    color: ${props => props.theme.colors.text};
`;

const Title = styled.h1`
    color: ${props => props.theme.colors.primary};
    margin-bottom: ${props => props.theme.spacing.md};
`;

// Wrap your app
function App() {
    return (
        <ThemeProvider theme={theme}>
            <Container>
                <Title>Themed App</Title>
            </Container>
        </ThemeProvider>
    );
}

Global Styles

Define global styles with createGlobalStyle:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu;
        line-height: 1.6;
        color: #333;
    }
    
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 1rem;
    }
`;

function App() {
    return (
        <>
            <GlobalStyle />
            {/* Your app components */}
        </>
    );
}

Other CSS-in-JS Libraries

Alternatives to styled-components:

• Emotion - Similar to styled-components, slightly faster
• JSS - More flexible, used by Material-UI
• Linaria - Zero-runtime CSS-in-JS
• Vanilla Extract - Type-safe, zero-runtime

🌬️ Tailwind CSS

Tailwind is a utility-first CSS framework that lets you build designs rapidly by composing utility classes. It's become incredibly popular in the React ecosystem!

What is Utility-First CSS?

Instead of writing custom CSS, you use pre-made utility classes:

// Traditional approach
<button className="custom-button">Click me</button>

/* custom-button {
    padding: 0.5rem 1rem;
    background-color: blue;
    color: white;
    border-radius: 0.25rem;
} */

// Tailwind approach
<button className="px-4 py-2 bg-blue-500 text-white rounded">
    Click me
</button>

Installing Tailwind (v4)

Tailwind CSS v4 (released 2025) is a big simplification: there's no tailwind.config.js to generate and no PostCSS/autoprefixer setup. For a Vite project you add the official plugin and a single CSS import:

# Tailwind v4 with the Vite plugin
npm install tailwindcss @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

/* index.css — one line replaces the old three @tailwind directives */
@import "tailwindcss";

Common Tailwind Utilities

Here are the most frequently used classes:

Building Components with Tailwind

interface ButtonProps {
    children: React.ReactNode;
    variant?: 'primary' | 'secondary' | 'danger';
    size?: 'sm' | 'md' | 'lg';
    onClick?: () => void;
}

function Button({ 
    children, 
    variant = 'primary', 
    size = 'md',
    onClick 
}: ButtonProps) {
    const baseClasses = 'font-semibold rounded transition-colors duration-200';
    
    const variantClasses = {
        primary: 'bg-blue-500 hover:bg-blue-600 text-white',
        secondary: 'bg-gray-500 hover:bg-gray-600 text-white',
        danger: 'bg-red-500 hover:bg-red-600 text-white'
    };
    
    const sizeClasses = {
        sm: 'px-3 py-1 text-sm',
        md: 'px-4 py-2 text-base',
        lg: 'px-6 py-3 text-lg'
    };
    
    const className = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`;
    
    return (
        <button className={className} onClick={onClick}>
            {children}
        </button>
    );
}

// Usage
<Button variant="primary" size="lg">Large Primary</Button>
<Button variant="danger" size="sm">Small Danger</Button>

Responsive Design with Tailwind

Tailwind makes responsive design incredibly easy:

function ResponsiveCard() {
    return (
        <div className="
            p-4 
            md:p-6 
            lg:p-8
            bg-white 
            rounded-lg 
            shadow-md
            w-full 
            md:w-1/2 
            lg:w-1/3
        ">
            <h2 className="text-xl md:text-2xl lg:text-3xl font-bold mb-4">
                Responsive Card
            </h2>
            <p className="text-sm md:text-base text-gray-600">
                This card adapts to different screen sizes.
            </p>
        </div>
    );
}

// Breakpoints:
// sm: 640px
// md: 768px
// lg: 1024px
// xl: 1280px
// 2xl: 1536px

Custom Tailwind Classes

Use @apply to create custom component classes:

/* index.css */
@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors;
    }
    
    .card {
        @apply p-6 bg-white rounded-lg shadow-md;
    }
    
    .input-field {
        @apply w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
    }
}

// Use custom classes
function Form() {
    return (
        <div className="card">
            <input type="text" className="input-field" />
            <button className="btn-primary">Submit</button>
        </div>
    );
}

📱 Responsive Design in React

Making your React apps look great on all screen sizes is crucial. Let's explore responsive design techniques!

Media Queries in CSS

Traditional media queries work perfectly in React:

/* Component.module.css */
.container {
    padding: 1rem;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .container {
        padding: 3rem;
    }
    
    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

JavaScript-Based Responsive Design

Use JavaScript to detect screen size and adjust components:

import { useState, useEffect } from 'react';

// Custom hook for window width
function useWindowWidth() {
    const [width, setWidth] = useState(
        typeof window !== 'undefined' ? window.innerWidth : 0
    );
    
    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    
    return width;
}

// Custom hook for breakpoints
function useBreakpoint() {
    const width = useWindowWidth();
    
    return {
        isMobile: width < 768,
        isTablet: width >= 768 && width < 1024,
        isDesktop: width >= 1024,
        width
    };
}

// Usage in component
function ResponsiveNav() {
    const { isMobile, isDesktop } = useBreakpoint();
    
    return (
        <nav>
            {isMobile && <MobileMenu />}
            {isDesktop && <DesktopMenu />}
        </nav>
    );
}

Container Queries (Modern Approach)

React components can adapt to their container size:

/* Modern CSS Container Queries */
.card-container {
    container-type: inline-size;
}

.card {
    padding: 1rem;
}

.card-title {
    font-size: 1rem;
}

/* When container is at least 400px wide */
@container (min-width: 400px) {
    .card {
        padding: 2rem;
    }
    
    .card-title {
        font-size: 1.5rem;
    }
}

Mobile-First vs Desktop-First

Choose your approach wisely:

/* Mobile-First (Recommended) */
/* Base styles for mobile */
.container {
    padding: 1rem;
    font-size: 14px;
}

/* Enhanced for larger screens */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
        font-size: 16px;
    }
}

/* Desktop-First (Alternative) */
/* Base styles for desktop */
.container {
    padding: 3rem;
    font-size: 16px;
}

/* Simplified for smaller screens */
@media (max-width: 767px) {
    .container {
        padding: 1rem;
        font-size: 14px;
    }
}

Responsive Images

Optimize images for different screen sizes:

function ResponsiveImage({ 
    src, 
    alt, 
    sizes 
}: { 
    src: string; 
    alt: string; 
    sizes?: string;
}) {
    return (
        <picture>
            <source 
                media="(min-width: 1024px)"
                srcSet={`${src}-large.jpg`}
            />
            <source 
                media="(min-width: 768px)"
                srcSet={`${src}-medium.jpg`}
            />
            <img 
                src={`${src}-small.jpg`}
                alt={alt}
                loading="lazy"
                style={{ width: '100%', height: 'auto' }}
            />
        </picture>
    );
}

Viewport Units

Use viewport-based units for fluid sizing:

.hero {
    /* 100% of viewport height */
    height: 100vh;
    
    /* 50% of viewport width */
    width: 50vw;
    
    /* Minimum of 2rem or 5% of viewport width */
    padding: max(2rem, 5vw);
    
    /* Fluid font size */
    font-size: clamp(1rem, 2.5vw, 3rem);
}

🏋️ Hands-on Practice

// DashboardCard.tsx
import styles from './DashboardCard.module.css';

interface DashboardCardProps {
    title: string;
    value: string | number;
    change: number;
    variant?: 'light' | 'dark';
}

function DashboardCard({ title, value, change, variant = 'light' }: DashboardCardProps) {
    // TODO: Implement component
    return <div></div>;
}

export default DashboardCard;

// DashboardCard.tsx
import styles from './DashboardCard.module.css';

interface DashboardCardProps {
    title: string;
    value: string | number;
    change: number;
    variant?: 'light' | 'dark';
}

function DashboardCard({ 
    title, 
    value, 
    change, 
    variant = 'light' 
}: DashboardCardProps) {
    const isPositive = change >= 0;
    const cardClass = `${styles.card} ${styles[variant]}`;
    const changeClass = isPositive ? styles.positive : styles.negative;
    
    return (
        <div className={cardClass}>
            <div className={styles.header}>
                <h3 className={styles.title}>{title}</h3>
            </div>
            
            <div className={styles.body}>
                <div className={styles.value}>{value}</div>
                <div className={`${styles.change} ${changeClass}`}>
                    {isPositive ? '↑' : '↓'} {Math.abs(change)}%
                </div>
            </div>
        </div>
    );
}

export default DashboardCard;

/* DashboardCard.module.css */
.card {
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.light {
    background-color: white;
    color: #333;
}

.dark {
    background-color: #2d3748;
    color: white;
}

.header {
    margin-bottom: 1rem;
}

.title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.body {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.value {
    font-size: 2rem;
    font-weight: bold;
}

.change {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.positive {
    color: #10b981;
    background-color: #d1fae5;
}

.negative {
    color: #ef4444;
    background-color: #fee2e2;
}

/* Responsive */
@media (max-width: 768px) {
    .card {
        padding: 1rem;
    }
    
    .value {
        font-size: 1.5rem;
    }
}

// ThemeContext.tsx
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';

type Theme = 'light' | 'dark';

interface ThemeContextType {
    theme: Theme;
    toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children }: { children: ReactNode }) {
    const [theme, setTheme] = useState<Theme>(() => {
        const saved = localStorage.getItem('theme');
        return (saved as Theme) || 'light';
    });
    
    useEffect(() => {
        localStorage.setItem('theme', theme);
        document.documentElement.setAttribute('data-theme', theme);
    }, [theme]);
    
    const toggleTheme = () => {
        setTheme(prev => prev === 'light' ? 'dark' : 'light');
    };
    
    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

export function useTheme() {
    const context = useContext(ThemeContext);
    if (!context) {
        throw new Error('useTheme must be used within ThemeProvider');
    }
    return context;
}

// ThemeToggle.tsx
function ThemeToggle() {
    const { theme, toggleTheme } = useTheme();
    
    return (
        <button 
            onClick={toggleTheme}
            className="theme-toggle"
            aria-label="Toggle theme"
        >
            {theme === 'light' ? '🌙' : '☀️'}
        </button>
    );
}

/* Global theme styles */
:root[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f7fafc;
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --border-color: #e2e8f0;
}

:root[data-theme="dark"] {
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --text-primary: #f7fafc;
    --text-secondary: #cbd5e0;
    --border-color: #4a5568;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

.theme-toggle {
    padding: 0.5rem;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    transition: transform 0.2s;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

🎯 Choosing the Right Approach

With so many options, how do you choose? Here's a practical guide based on different scenarios.

Decision Matrix

A Quick Decision Flow

When you're not sure, this flowchart gets you to a sensible default in three questions:

Notice runtime CSS-in-JS isn't the default recommendation anymore — reach for it only when you specifically need JavaScript-driven theming and you're not in a React Server Components app.

Mixing Approaches

You can combine multiple styling methods in one project:

// Global styles with plain CSS
import './index.css';

// Component styles with CSS Modules
import styles from './Button.module.css';

// Dynamic styles with inline
const dynamicStyle = {
    width: `${percentage}%`
};

// Utility classes with Tailwind
function Component() {
    return (
        <div className="flex gap-4">  {/* Tailwind */}
            <button 
                className={styles.button}  {/* CSS Module */}
                style={dynamicStyle}        {/* Inline */}
            >
                Click me
            </button>
        </div>
    );
}

Performance Considerations

• Best Performance: Plain CSS, CSS Modules (compiled at build time)
• Good Performance: Tailwind (purges unused styles)
• Runtime Overhead: CSS-in-JS (generates styles in browser)
• Small Impact: Inline styles (for dynamic values only)

Team Considerations

• Junior developers: Plain CSS or Tailwind (familiar concepts)
• Mixed CSS/JS skills: CSS Modules (separation of concerns)
• JavaScript-focused team: CSS-in-JS (everything in JS)
• Large teams: Design system + Tailwind (consistency)

📝 Summary

Quick Reference

📚 Additional Resources

• React Docs: Styling React Components
• CSS Modules Documentation
• styled-components Official Site
• Tailwind CSS Documentation
• Responsive Web Design Basics

🚀 What's Next?

In the next lesson, we'll explore Events in React. You'll learn:

• Handling user interactions (clicks, inputs, forms)
• Event handling best practices
• Synthetic events in React
• Event delegation and bubbling
• Form handling and validation
• Keyboard and accessibility events

Your components look great - now let's make them interactive! 🎯