Tailwind CSS Development Patterns

When to Use

• Styling React/HTML components with utility classes
• Building responsive layouts with breakpoints
• Implementing flexbox and grid layouts
• Managing spacing, colors, and typography
• Creating custom design systems
• Optimizing for mobile-first design
• Building dark mode interfaces

Core Concepts

Utility-First Approach

Copy
<button>
  Click me
</button>

Responsive Design

Copy
<div>
  <!-- Full width on mobile, half on tablet, third on desktop -->
</div>

• sm: - 640px and above
• md: - 768px and above
• lg: - 1024px and above
• xl: - 1280px and above
• 2xl: - 1536px and above

Layout Utilities

Flexbox Layouts

Copy
<div>
  <div>Left</div>
  <div>Center</div>
  <div>Right</div>
</div>
`Responsive flex direction:`
<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
`Common flex patterns:`
<!-- Center content -->
<div>
  <div>Centered Content</div>
</div>

<!-- Space between items -->
<div>
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Vertical stack with gap -->
<div>
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Grid Layouts

Copy
<div>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>
`Responsive grid:`
<div>
  <!-- 1 column mobile, 2 tablet, 4 desktop -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
`Auto-fit columns:`
<div>
  <!-- Automatically fit columns based on container width -->
</div>

Container & Max Width

Copy
<div>
  <!-- Centered content with padding -->
</div>
`Responsive max width:`
<div>
  <!-- Max 448px width, centered -->
</div>

Spacing

Padding & Margin

Copy
<div>Padding all sides</div>
<div>Margin all sides</div>
`Individual sides:`
<div>
  <!-- Top 1rem, Right 2rem, Bottom 1rem, Left 2rem -->
</div>
`Axis-based spacing:`
<div>
  <!-- Horizontal padding 1rem, Vertical padding 2rem -->
</div>
`Responsive spacing:`
<div>
  <!-- Increases padding at larger breakpoints -->
</div>
`Space between children:`
<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Typography

Font Size & Weight

Copy
<h1>Large Heading</h1>
<h2>Subheading</h2>
<p>Body text</p>
<small>Small text</small>
`Responsive typography:`
<h1>
  Responsive Heading
</h1>
`### Line Height & Letter Spacing`
<p>
  Text with relaxed line height and wide letter spacing
</p>
`### Text Alignment`
<p>
  Left aligned on mobile, centered on tablet+
</p>

Colors

Background Colors

Copy
<div>Blue background</div>
<div>Light gray background</div>
<div>
  Gradient background
</div>
`### Text Colors`
<p>Dark text</p>
<p>Blue text</p>
<p>Error text</p>
`### Opacity`
<div>
  Semi-transparent blue
</div>

Interactive States

Hover States

Copy
<button>
  Hover me
</button>

<a>
  Hover link
</a>
`### Focus States`
<input>
`### Active & Disabled States`
<button>
  Button
</button>
`### Group Hover`
<div>
  <img src="image.jpg" />
  <p>Hover the parent</p>
</div>

Component Patterns

Card Component

Copy
<div>
  <img src="image.jpg" alt="Card image" />
  <div>
    <h3>Card Title</h3>
    <p>Card description text goes here.</p>
    <button>
      Action
    </button>
  </div>
</div>
`### Responsive User Card`
<div>
  <img 
       src="profile.jpg" 
       alt="Profile" />
  <div>
    <div>
      Product Engineer
    </div>
    <h2>
      John Doe
    </h2>
    <p>
      Building amazing products with modern technology.
    </p>
    <button>
      Contact
    </button>
  </div>
</div>
`### Navigation Bar`
<nav>
  <div>
    <div>
      <div>
        <a href="#">Logo</a>
      </div>
      <div>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
      </div>
      <button>
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>
`### Form Elements`
<form>
  <div>
    <label>
      Email
    </label>
    <input 
      type="email"
      placeholder="you@example.com"
    />
  </div>
  
  <div>
    <label>
      Password
    </label>
    <input 
      type="password"
    />
  </div>
  
  <div>
    <input type="checkbox" />
    <label>Remember me</label>
  </div>
  
  <button 
    type="submit"
  >
    Sign In
  </button>
</form>
`### Modal/Dialog`
<div>
  <div>
    <div>
      <h3>Modal Title</h3>
      <button>
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <p>
      Modal content goes here.
    </p>
    <div>
      <button>
        Cancel
      </button>
      <button>
        Confirm
      </button>
    </div>
  </div>
</div>

Responsive Design Patterns

Mobile-First Responsive Layout

Copy
<div>
  <!-- Hero Section -->
  <div>
    <div>
      <h1>
        Welcome to Our Site
      </h1>
      <p>
        Build amazing things with Tailwind CSS
      </p>
      <button>
        Get Started
      </button>
    </div>
    <div>
      <img src="hero.jpg" />
    </div>
  </div>
</div>
`### Responsive Grid Gallery`
<div>
  <div>
    <img src="image1.jpg" />
  </div>
  <div>
    <img src="image2.jpg" />
  </div>
  <!-- More items... -->
</div>

Dark Mode

Basic Dark Mode Support

Copy
<div>
  <h1>Title</h1>
  <p>Description</p>
</div>
`Enable dark mode in tailwind.config.js:`
module.exports = {
  darkMode: 'class', // or 'media'
  // ...
}

Animations & Transitions

Basic Transitions

Copy
<button>
  Smooth transition
</button>
`### Transform Effects`
<div>
  Scale on hover
</div>

<img />
`### Built-in Animations`
<div>Spinning</div>
<div>Pulsing</div>
<div>Bouncing</div>

Performance Optimization

Bundle Size Optimization

Copy
// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue,svelte}",
    "./node_modules/@mycompany/ui-lib/**/*.{js,ts,jsx,tsx}",
  ],
  // Enable JIT for faster builds
  jit: true,
}
`### CSS Optimization Techniques`
<!-- Use content-visibility for offscreen content -->
<div>
  <div>Heavy content that's initially offscreen</div>
</div>

<!-- Optimize images with aspect-ratio -->
<img src="video.jpg" alt="Video thumbnail" />

<!-- Use contain for paint optimization -->
<div>
  Complex layout that doesn't affect outside elements
</div>
`### Development Performance`
/* Enable CSS-first configuration in v4.1 */
@import "tailwindcss";

@theme {
  /* Define once, use everywhere */
  --color-brand: #3b82f6;
  --font-mono: "Fira Code", monospace;
}

/* Critical CSS for above-the-fold content */
@layer critical {
  .hero-title {
    @apply text-4xl md:text-6xl font-bold;
  }
}

Accessibility Guidelines

Focus Management

Copy
<!-- Custom focus styles that meet WCAG AA -->
<button>
  Accessible Button
</button>

<!-- Skip links for keyboard navigation -->
<a href="#main-content">
  Skip to main content
</a>
`### Screen Reader Support`
<!-- Semantic buttons with ARIA labels -->
<button aria-label="Close dialog">
  <svg fill="none" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
  </svg>
</button>

<!-- Descriptive links -->
<a href="/docs" aria-describedby="docs-description">
  Documentation
</a>
<p id="docs-description">
  Learn how to use our API and integration guides
</p>
`### Color Contrast`
<!-- Ensure sufficient contrast ratios -->
<div>
  High contrast text (WCAG AAA)
</div>

<div>
  Good contrast on colored backgrounds
</div>

<!-- Use contrast utilities for testing -->
<div>
  Adjusts for high contrast mode
</div>
`### Motion Preferences`
<!-- Respect prefers-reduced-motion -->
<div>
  Doesn't animate when user prefers reduced motion
</div>

<!-- Conditional animations -->
<div>
  Only animates when motion is preferred
</div>

Best Practices

1. Mobile-First: Start with mobile styles, add responsive prefixes for larger screens
2. Consistent Spacing: Use Tailwind's spacing scale (4, 8, 12, 16, etc.)
3. Color Palette: Stick to Tailwind's color system for consistency
4. Component Extraction: Extract repeated patterns into components
5. Utility Composition: Prefer utility classes over @apply for better maintainability
6. Semantic HTML: Use proper HTML elements with Tailwind classes
7. Performance: Configure content paths correctly for optimal CSS purging
8. Accessibility: Include focus styles, ARIA labels, and respect user preferences
9. CSS-First Config: Use @theme directive for v4.1+ instead of JavaScript config
10. Custom Utilities: Create reusable utilities with @utility for complex patterns

Configuration

CSS-First Configuration (v4.1+)

Copy
/* src/styles.css */
@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-brand-50: #f0f9ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;

  /* Custom fonts */
  --font-display: "Inter", system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;

  /* Custom spacing */
  --spacing-128: 32rem;

  /* Custom animations */
  --animate-fade-in: fadeIn 0.5s ease-in-out;

  /* Custom breakpoints */
  --breakpoint-3xl: 1920px;
}

/* Define custom animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Custom utilities */
@utility content-auto {
  content-visibility: auto;
}
`### JavaScript Configuration (Legacy)`
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue,svelte}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      },
    },
  },
  plugins: [],
}
`### Vite Integration (v4.1+)`
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

Advanced v4.1 Features

Native CSS Custom Properties

Copy
<div>
  Using CSS custom properties directly
</div>
`### Enhanced Arbitrary Values`
<!-- Complex grid with custom tracks -->
<div>
  Responsive grid without custom CSS
</div>

<!-- Custom animation timing -->
<div>
  Bounce with custom easing
</div>
`### Container Queries`
<!-- Component that responds to its container size -->
<div>
  <div>
    Text size based on container, not viewport
  </div>
</div>
`## Common Patterns with React/JSX`
import { useState } from 'react';

function Button({ 
  variant = 'primary', 
  size = 'md', 
  children 
}: {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}) {
  const baseClasses = 'font-semibold rounded transition';
  
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  };
  
  const sizeClasses = {
    sm: 'px-3 py-1 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };
  
  return (
    <button 
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`}
    >
      {children}
    </button>
  );
}

References

• Tailwind CSS Docs: https://tailwindcss.com/docs
• Tailwind UI: https://tailwindui.com
• Tailwind Play: https://play.tailwindcss.com
• Headless UI: https://headlessui.com