Tailwind CSS Development Patterns
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
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
Apply styles directly in markup using utility classes:
Responsive Design
Mobile-first breakpoints with prefixes:
Breakpoint prefixes:
sm: - 640px and above md: - 768px and above lg: - 1024px and above xl: - 1280px and above 2xl: - 1536px and above Layout Utilities Flexbox Layouts
Basic flex container:
Responsive flex direction:
Common flex patterns:
Grid Layouts
Basic grid:
Responsive grid:
Auto-fit columns:
Container & Max Width
Centered container with max width:
Responsive max width:
Spacing Padding & Margin
Uniform spacing:
Individual sides:
Axis-based spacing:
Responsive spacing:
Space between children:
Typography Font Size & Weight
Large Heading
Subheading
Body text
Small text
Responsive typography:
Responsive Heading
Line Height & Letter Spacing
Text with relaxed line height and wide letter spacing
Text Alignment
Left aligned on mobile, centered on tablet+
Colors Background Colors
Text Colors
Dark text
Blue text
Error text
Opacity
Interactive States Hover States
Focus States
Active & Disabled States
Group Hover
Hover the parent
Component Patterns Card Component
Card Title
Card description text goes here.
Responsive User Card
John Doe
Building amazing products with modern technology.
Navigation Bar
Form Elements
Modal/Dialog
Modal Title
Modal content goes here.
Responsive Design Patterns Mobile-First Responsive Layout
Welcome to Our Site
Build amazing things with Tailwind CSS
Responsive Grid Gallery
Dark Mode Basic Dark Mode Support
Title
Description
Enable dark mode in tailwind.config.js:
module.exports = { darkMode: 'class', // or 'media' // ... }
Animations & Transitions Basic Transitions
Transform Effects
Built-in Animations
Performance Optimization Bundle Size Optimization
Configure content sources for optimal purging:
// 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
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
Screen Reader Support
Learn how to use our API and integration guides
Color Contrast
Motion Preferences
Best Practices Mobile-First: Start with mobile styles, add responsive prefixes for larger screens Consistent Spacing: Use Tailwind's spacing scale (4, 8, 12, 16, etc.) Color Palette: Stick to Tailwind's color system for consistency Component Extraction: Extract repeated patterns into components Utility Composition: Prefer utility classes over @apply for better maintainability Semantic HTML: Use proper HTML elements with Tailwind classes Performance: Configure content paths correctly for optimal CSS purging Accessibility: Include focus styles, ARIA labels, and respect user preferences CSS-First Config: Use @theme directive for v4.1+ instead of JavaScript config Custom Utilities: Create reusable utilities with @utility for complex patterns Configuration CSS-First Configuration (v4.1+)
Use the @theme directive for CSS-based configuration:
/ 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
Enhanced Arbitrary Values
Container Queries
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 ( ); }
References Tailwind CSS Docs: https://tailwindcss.com/docs Tailwind UI: https://tailwindui.com Tailwind Play: https://play.tailwindcss.com Headless UI: https://headlessui.com