Tailwind Css Patterns

Name: Tailwind Css Patterns
Author: giuseppe-trisciuoglio

giuseppe-trisciuoglio/developer-kit

14k installs
314 repo stars
Updated June 22, 2026
giuseppe-trisciuoglio/developer-kit

Tailwind CSS Patterns is a skill providing reusable Tailwind CSS patterns and utilities for component development.

About

Tailwind CSS Patterns is a skill within the Developer Kit plugin system for Claude Code. It provides reusable Tailwind CSS patterns and best practices. Developers use it when building component-driven UIs with Tailwind CSS or needing pattern reference during frontend development.

Part of 150+ skills in Developer Kit plugin system
Tailwind CSS pattern library integrated with Claude Code
Auto-activation for .css and template files

Tailwind Css Patterns by the numbers

13,988 all-time installs (skills.sh)
+248 installs in the week ending Jul 29, 2026 (Skillselion tracking)
Ranked #40 of 2,244 Frontend Development skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 31, 2026 (Skillselion catalog sync)

At a glance

tailwind-css-patterns capabilities & compatibility

Capabilities: css patterns · component styling
Use cases: ui design · frontend

npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns.svg)](https://skillselion.com/skills/giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns)

Installs	14k
repo stars	★ 314
Security audit	3 / 3 scanners passed
Last updated	June 22, 2026
Repository	giuseppe-trisciuoglio/developer-kit ↗

How do you build accessible Tailwind CSS components?

Provide reusable Tailwind CSS patterns and best practices for frontend development.

Who is it for?

Frontend developers building component-based UIs with Tailwind

Skip if: Projects using CSS-in-JS, Bootstrap, or teams that outsource accessibility to a dedicated component library only.

When should I use this skill?

User asks for accessible Tailwind patterns, WCAG focus styles, skip links, or screen reader markup.

What you get

HTML snippets with WCAG AA focus styles, skip links, focus-visible rings, and screen-reader-friendly ARIA patterns.

Accessible Tailwind HTML snippets
ARIA-labeled component patterns

By the numbers

Documents WCAG AA focus ring patterns with focus:ring-4 utilities

Files

SKILL.mdMarkdownGitHub ↗

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.

Overview

Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.

When to Use

Styling React/Vue/Svelte components
Building responsive layouts and grids
Implementing design systems
Adding dark mode support
Optimizing CSS workflow

Quick Reference

Responsive Breakpoints

Prefix	Min Width	Description
`sm:`	640px	Small screens
`md:`	768px	Tablets
`lg:`	1024px	Desktops
`xl:`	1280px	Large screens
`2xl:`	1536px	Extra large

Common Patterns

<!-- Center content -->
<div class="flex items-center justify-center min-h-screen">
  Content
</div>

<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- Items -->
</div>

<!-- Card component -->
<div class="bg-white rounded-lg shadow-lg p-6">
  <h3 class="text-xl font-bold">Title</h3>
  <p class="text-gray-600">Description</p>
</div>

Instructions

1. Start Mobile-First: Write base styles for mobile, add responsive prefixes (sm:, md:, lg:) for larger screens 2. Use Design Tokens: Leverage Tailwind's spacing, color, and typography scales 3. Compose Utilities: Combine multiple utilities for complex styles 4. Extract Components: Create reusable component classes for repeated patterns 5. Configure Theme: Customize design tokens in tailwind.config.js or using @theme 6. Verify Changes: Test at each breakpoint using DevTools responsive mode. Check for visual regressions and accessibility issues before committing.

Examples

Responsive Card Component

function ProductCard({ product }: { product: Product }) {
  return (
    <div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
      <img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
      <div className="p-6">
        <h3 className="text-lg font-semibold">{product.name}</h3>
        <button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
          Add to Cart
        </button>
      </div>
    </div>
  );
}

Dark Mode Toggle

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 class="dark:text-white">Title</h1>
</div>

Form Input

<input
  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="you@example.com"
/>

Best Practices

1. Consistent Spacing: Use Tailwind's spacing scale (4, 8, 12, 16, etc.) 2. Color Palette: Stick to Tailwind's color system for consistency 3. Component Extraction: Extract repeated patterns into reusable components 4. Utility Composition: Prefer utility classes over @apply for maintainability 5. Semantic HTML: Use proper HTML elements with Tailwind classes 6. Performance: Ensure content paths include all template files for optimal purging 7. Accessibility: Include focus styles, ARIA labels, and respect user preferences (reduced-motion)

Troubleshooting

Classes Not Applying

Check content paths: Ensure all template files are included in content: [] in config
Verify build: Run npm run build to regenerate purged CSS
Dev mode: Use npx tailwindcss -o with --watch flag for live updates

Responsive Styles Not Working

Order matters: Responsive prefixes must come before non-responsive (e.g., md:flex not flex md:flex)
Check breakpoint values: Verify breakpoints match your design requirements
DevTools: Use browser DevTools responsive mode to test at each breakpoint

Dark Mode Issues

Verify config: Ensure darkMode: 'class' or 'media' is set correctly
Toggle implementation: Use document.documentElement.classList.toggle('dark') for class strategy
Initial flash: Add dark class to <html> before body renders

Constraints and Warnings

Class Proliferation: Long class strings reduce readability; extract into components
Content Paths: Misconfigured paths cause classes to be purged in production
Arbitrary Values: Use sparingly; prefer design tokens for consistency
Specificity Issues: Avoid @apply with complex selectors
Dark Mode: Requires correct configuration (class or media strategy)
Browser Support: Check Tailwind docs for compatibility notes

References

[references/layout-patterns.md](references/layout-patterns.md) — Flexbox, grid, spacing, typography, colors
[references/component-patterns.md](references/component-patterns.md) — Cards, navigation, forms, modals, React patterns
[references/responsive-design.md](references/responsive-design.md) — Responsive patterns, dark mode, container queries
[references/animations.md](references/animations.md) — Transitions, transforms, built-in animations, motion preferences
[references/performance.md](references/performance.md) — Bundle optimization, CSS optimization, production builds
[references/accessibility.md](references/accessibility.md) — Focus management, screen readers, color contrast, ARIA
[references/configuration.md](references/configuration.md) — CSS-first config, JavaScript config, plugins, presets
[references/reference.md](references/reference.md) — Additional reference materials

External Resources

Tailwind CSS Accessibility Guidelines

Focus Management

<!-- Custom focus styles that meet WCAG AA -->
<button class="focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-2">
  Accessible Button
</button>

<!-- Skip links for keyboard navigation -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4">
  Skip to main content
</a>

Focus Visible vs Focus

<!-- Only show focus ring on keyboard navigation -->
<button class="focus-visible:ring-2 focus-visible:ring-blue-500">
  Keyboard-only focus indicator
</button>

---

Screen Reader Support

<!-- Semantic buttons with ARIA labels -->
<button aria-label="Close dialog" class="p-2">
  <svg class="w-5 h-5" 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" class="sr-only">
  Learn how to use our API and integration guides
</p>

<!-- Live regions for dynamic content -->
<div aria-live="polite" class="sr-only">
  <p>3 new notifications</p>
</div>

Screen Reader Only Content

<span class="sr-only">Opens in new window</span>

---

Color Contrast

<!-- Ensure sufficient contrast ratios -->
<div class="bg-gray-900 text-white">
  High contrast text (WCAG AAA)
</div>

<div class="bg-blue-500 text-blue-100">
  Good contrast on colored backgrounds
</div>

<!-- Use contrast utilities for testing -->
<div class="bg-red-500 text-white contrast-more:bg-red-600 contrast-more:text-red-100">
  Adjusts for high contrast mode
</div>

Contrast Guidelines

Normal text: Minimum 4.5:1 contrast ratio
Large text: Minimum 3:1 contrast ratio
UI components: Minimum 3:1 contrast ratio

---

Motion Preferences

<!-- Respect prefers-reduced-motion -->
<div class="transform transition-transform motion-reduce:transition-none">
  Doesn't animate when user prefers reduced motion
</div>

<!-- Conditional animations -->
<div class="animate-pulse motion-safe:hover:animate-spin">
  Only animates when motion is preferred
</div>

Reduced Motion Media Query

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

---

ARIA Patterns with Tailwind

Toggle Button

<button
  type="button"
  role="switch"
  aria-checked="false"
  class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 aria-checked:bg-blue-600"
>
  <span class="sr-only">Enable notifications</span>
  <span class="inline-block h-4 w-4 transform rounded-full bg-white transition translate-x-1 aria-checked:translate-x-6"></span>
</button>

Alert Dialog

<div
  role="alertdialog"
  aria-labelledby="alert-title"
  aria-describedby="alert-description"
  class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
>
  <div class="max-w-md w-full bg-white rounded-lg shadow-xl p-6">
    <h2 id="alert-title" class="text-lg font-bold mb-2">
      Are you sure?
    </h2>
    <p id="alert-description" class="text-gray-600 mb-4">
      This action cannot be undone.
    </p>
    <div class="flex justify-end gap-2">
      <button class="px-4 py-2 text-gray-600">Cancel</button>
      <button class="px-4 py-2 bg-red-500 text-white rounded">Delete</button>
    </div>
  </div>
</div>

---

Accessibility Checklist

[ ] All interactive elements have visible focus indicators
[ ] Color contrast meets WCAG standards
[ ] Images have alt text
[ ] Form inputs have associated labels
[ ] ARIA labels used for icon-only buttons
[ ] Animations respect reduced motion preference
[ ] Skip links provided for keyboard navigation
[ ] Landmarks (header, main, nav, footer) used appropriately

Tailwind CSS Animations & Transitions

Basic Transitions

<button class="bg-blue-500 hover:bg-blue-700 transition duration-300">
  Smooth transition
</button>

Transition Properties

Class	Description
`transition`	All properties
`transition-colors`	Color properties only
`transition-opacity`	Opacity only
`transition-transform`	Transform only
`duration-150`	150ms duration
`duration-300`	300ms duration
`ease-in`	Ease in timing
`ease-out`	Ease out timing
`ease-in-out`	Ease in-out timing

---

Transform Effects

<!-- Scale on hover -->
<div class="transform hover:scale-110 transition duration-300">
  Scale on hover
</div>

<!-- Rotate on hover -->
<img class="transform hover:rotate-6 transition duration-300" />

<!-- Multiple transforms -->
<div class="transform hover:scale-105 hover:-translate-y-1 transition">
  Scale up and move up
</div>

---

Built-in Animations

<div class="animate-spin">Spinning</div>
<div class="animate-pulse">Pulsing</div>
<div class="animate-bounce">Bouncing</div>
<div class="animate-ping">Pinging (radar effect)</div>

Common Use Cases

<!-- Loading spinner -->
<svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

<!-- Skeleton loading -->
<div class="animate-pulse space-y-4">
  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded"></div>
  <div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>

<!-- Notification badge -->
<span class="absolute -top-1 -right-1 h-3 w-3 animate-ping rounded-full bg-red-400 opacity-75"></span>
<span class="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-red-500"></span>

---

Custom Animations (v4.1+)

/* In your CSS with @theme */
@theme {
  --animate-fade-in: fadeIn 0.5s ease-in-out;
  --animate-slide-up: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Usage:

<div class="animate-fade-in">Fades in on load</div>
<div class="animate-slide-up">Slides up on load</div>

---

Motion Preferences

Respect user's motion preferences:

<!-- Disable animations for users who prefer reduced motion -->
<div class="transform transition-transform motion-reduce:transition-none">
  Doesn't animate when user prefers reduced motion
</div>

<!-- Only animate when motion is preferred -->
<div class="animate-pulse motion-safe:hover:animate-spin">
  Only animates when motion is preferred
</div>

Global Reduced Motion Support

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwind CSS Component Patterns

Card Component

<div class="bg-white rounded-lg shadow-lg overflow-hidden">
  <img class="w-full h-48 object-cover" src="image.jpg" alt="Card image" />
  <div class="p-6">
    <h3 class="text-xl font-bold mb-2">Card Title</h3>
    <p class="text-gray-700 mb-4">Card description text goes here.</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Action
    </button>
  </div>
</div>

Responsive User Card

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden sm:flex sm:max-w-2xl">
  <img class="h-48 w-full object-cover sm:h-auto sm:w-48"
       src="profile.jpg"
       alt="Profile" />
  <div class="p-8">
    <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
      Product Engineer
    </div>
    <h2 class="mt-1 text-xl font-semibold text-gray-900">
      John Doe
    </h2>
    <p class="mt-2 text-gray-500">
      Building amazing products with modern technology.
    </p>
    <button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
      Contact
    </button>
  </div>
</div>

Navigation Bar

<nav class="bg-white shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <div class="flex items-center">
        <a href="#" class="text-xl font-bold text-gray-800">Logo</a>
      </div>
      <div class="hidden md:flex space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">Home</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">About</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">Services</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">Contact</a>
      </div>
      <button class="md:hidden">
        <svg class="w-6 h-6" 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 class="space-y-6 max-w-md mx-auto">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-2">
      Email
    </label>
    <input
      type="email"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
      placeholder="you@example.com"
    />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-2">
      Password
    </label>
    <input
      type="password"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
    />
  </div>

  <div class="flex items-center">
    <input type="checkbox" class="mr-2" />
    <label class="text-sm text-gray-600">Remember me</label>
  </div>

  <button
    type="submit"
    class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition"
  >
    Sign In
  </button>
</form>

Modal/Dialog

<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
  <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-xl font-bold">Modal Title</h3>
      <button class="text-gray-500 hover:text-gray-700">
        <svg class="w-6 h-6" 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 class="text-gray-700 mb-6">
      Modal content goes here.
    </p>
    <div class="flex justify-end space-x-4">
      <button class="px-4 py-2 text-gray-600 hover:text-gray-800">
        Cancel
      </button>
      <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
        Confirm
      </button>
    </div>
  </div>
</div>

React Button Component with Variants

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>
  );
}

Tailwind CSS 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

<div class="bg-[var(--color-brand-500)] text-[var(--color-white)]">
  Using CSS custom properties directly
</div>

Enhanced Arbitrary Values

<!-- Complex grid with custom tracks -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  Responsive grid without custom CSS
</div>

<!-- Custom animation timing -->
<div class="animate-bounce ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]">
  Bounce with custom easing
</div>

Custom Utilities

@utility content-auto {
  content-visibility: auto;
}

@utility text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

---

Plugins

Custom Plugin Example

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, config }) {
      // Add custom utilities
      addUtilities({
        '.content-auto': {
          contentVisibility: 'auto',
        },
      })

      // Add custom components
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
      })
    }),
  ],
}

---

Presets

Creating a Reusable Preset

// tailwind-preset.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#3b82f6',
          light: '#60a5fa',
          dark: '#1d4ed8',
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Using a Preset

// tailwind.config.js
module.exports = {
  presets: [
    require('./tailwind-preset.js'),
  ],
}

Tailwind CSS Layout Patterns

Layout Utilities

Flexbox Layouts

Basic flex container:

<div class="flex items-center justify-between">
  <div>Left</div>
  <div>Center</div>
  <div>Right</div>
</div>

Responsive flex direction:

<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1">Item 1</div>
  <div class="flex-1">Item 2</div>
  <div class="flex-1">Item 3</div>
</div>

Common flex patterns:

<!-- Center content -->
<div class="flex items-center justify-center min-h-screen">
  <div>Centered Content</div>
</div>

<!-- Space between items -->
<div class="flex justify-between items-center">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Vertical stack with gap -->
<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Grid Layouts

Basic grid:

<div class="grid grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Responsive grid:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- 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 class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <!-- Automatically fit columns based on container width -->
</div>

Container & Max Width

Centered container with max width:

<div class="container mx-auto px-4 max-w-7xl">
  <!-- Centered content with padding -->
</div>

Responsive max width:

<div class="w-full max-w-md mx-auto">
  <!-- Max 448px width, centered -->
</div>

---

Spacing

Padding & Margin

Uniform spacing:

<div class="p-4">Padding all sides</div>
<div class="m-4">Margin all sides</div>

Individual sides:

<div class="pt-4 pr-8 pb-4 pl-8">
  <!-- Top 1rem, Right 2rem, Bottom 1rem, Left 2rem -->
</div>

Axis-based spacing:

<div class="px-4 py-8">
  <!-- Horizontal padding 1rem, Vertical padding 2rem -->
</div>

Responsive spacing:

<div class="p-4 md:p-8 lg:p-12">
  <!-- Increases padding at larger breakpoints -->
</div>

Space between children:

<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

---

Typography

Font Size & Weight

<h1 class="text-4xl font-bold">Large Heading</h1>
<h2 class="text-2xl font-semibold">Subheading</h2>
<p class="text-base font-normal">Body text</p>
<small class="text-sm text-gray-600">Small text</small>

Responsive typography:

<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Responsive Heading
</h1>

Line Height & Letter Spacing

<p class="leading-relaxed tracking-wide">
  Text with relaxed line height and wide letter spacing
</p>

Text Alignment

<p class="text-left md:text-center">
  Left aligned on mobile, centered on tablet+
</p>

---

Colors

Background Colors

<div class="bg-blue-500">Blue background</div>
<div class="bg-gray-100">Light gray background</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  Gradient background
</div>

Text Colors

<p class="text-gray-900">Dark text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500">Error text</p>

Opacity

<div class="bg-blue-500 bg-opacity-50">
  Semi-transparent blue
</div>

---

Responsive Breakpoints Reference

Prefix	Min Width	CSS Equivalent
`sm:`	640px	`@media (min-width: 640px)`
`md:`	768px	`@media (min-width: 768px)`
`lg:`	1024px	`@media (min-width: 1024px)`
`xl:`	1280px	`@media (min-width: 1280px)`
`2xl:`	1536px	`@media (min-width: 1536px)`

Tailwind CSS 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,
}

Content Path Best Practices

1. Be specific: Don't use "./**/*" - it scans too many files 2. Include UI libraries: Add paths to component libraries 3. Exclude tests: Don't include test files in content paths

---

CSS Optimization Techniques

<!-- Use content-visibility for offscreen content -->
<div class="content-visibility-auto">
  <div>Heavy content that's initially offscreen</div>
</div>

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

<!-- Use contain for paint optimization -->
<div class="contain-layout">
  Complex layout that doesn't affect outside elements
</div>

---

Development Performance (v4.1+)

/* 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;
  }
}

---

Production Build Optimization

PurgeCSS Configuration

// tailwind.config.js
module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/**/*.html',
      './src/**/*.jsx',
      './src/**/*.tsx',
    ],
    options: {
      safelist: [
        'bg-red-500',
        'text-center',
        // Classes that shouldn't be purged
      ],
    },
  },
}

Minification

# Use cssnano for minification
npm install -D cssnano

# In postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...(process.env.NODE_ENV === 'production' ? [require('cssnano')] : []),
  ],
}

---

Best Practices for Performance

1. Use the JIT engine: Faster builds, smaller output 2. Configure content correctly: Only include files that use Tailwind 3. Minimize custom CSS: Use Tailwind utilities over custom CSS 4. Enable purging in production: Removes unused styles 5. Use `@layer` for custom styles: Helps with organization and purging 6. Avoid `@apply` in components: Prefer composing utilities in markup

Tailwind CSS Documentation

Tailwind CSS is a utility-first CSS framework that generates styles by scanning HTML, JavaScript, and template files for class names. It provides a comprehensive design system through CSS utility classes, enabling rapid UI development without writing custom CSS. The framework operates at build-time, analyzing source files and generating only the CSS classes actually used in the project, resulting in optimized production bundles with zero runtime overhead.

The framework includes an extensive default color palette (18 colors with 11 shades each), responsive breakpoint system, customizable design tokens via CSS custom properties, and support for dark mode, pseudo-classes, pseudo-elements, and media queries through variant prefixes. Tailwind CSS v4.1 introduces CSS-first configuration using the @theme directive, native support for custom utilities via @utility, seamless integration with modern build tools through Vite, PostCSS, and framework-specific plugins, and enhanced arbitrary value syntax for maximum flexibility.

Installation with Vite

Installing Tailwind CSS using the Vite plugin for modern JavaScript frameworks.

# Create a new Vite project
npm create vite@latest my-project
cd my-project

# Install Tailwind CSS and Vite plugin
npm install tailwindcss @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

/* src/style.css */
@import "tailwindcss";




# Hello world!

Utility Classes with Variants

Applying conditional styles using variant prefixes for hover, focus, and responsive breakpoints.


 Save changes

Content adapts to color scheme preference

 Submit

Custom Theme Configuration

Defining custom design tokens using the @theme directive in CSS.

/* app.css */
@import "tailwindcss";

@theme {
 /* Custom fonts */
 --font-display: "Satoshi", "sans-serif";
 --font-body: "Inter", system-ui, sans-serif;

 /* Custom colors */
 --color-brand-50: oklch(0.98 0.02 264);
 --color-brand-100: oklch(0.95 0.05 264);
 --color-brand-500: oklch(0.55 0.22 264);
 --color-brand-900: oklch(0.25 0.12 264);

 /* Custom breakpoints */
 --breakpoint-3xl: 120rem;
 --breakpoint-4xl: 160rem;

 /* Custom spacing */
 --spacing-18: calc(var(--spacing) * 18);

 /* Custom animations */
 --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
 --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}


Custom design system

Arbitrary Values

Using square bracket notation for one-off custom values without leaving HTML.


Pixel-perfect positioning

Custom hex colors, font sizes, and content

Any CSS property

Reference custom properties

Complex grid layouts

Font size from CSS variable

Color from CSS variable

Color System

Working with Tailwind's comprehensive color palette and opacity modifiers.


Color utilities across all properties

Alpha channel with percentage

Arbitrary opacity values

Opacity from CSS variable

Adapts to color scheme

Dark Mode

Implementing dark mode with CSS media queries or manual toggle.


Content automatically adapts

/* Manual dark mode toggle with class selector */
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));


Controlled by .dark class

// Dark mode toggle logic
// On page load or theme change
document.documentElement.classList.toggle(
 "dark",
 localStorage.theme === "dark" ||
 (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
);

// User chooses light mode
localStorage.theme = "light";

// User chooses dark mode
localStorage.theme = "dark";

// User chooses system preference
localStorage.removeItem("theme");

State Variants

Styling elements based on pseudo-classes and parent/sibling state.


- Item content


**Title**
Description

Please provide a valid email address.


 Option

Responsive Design

Building mobile-first responsive layouts with breakpoint variants.


# Responsive heading

Text scales with viewport


Desktop only

Mobile only

Custom breakpoint

Below medium

Custom Utilities

Creating reusable custom utility classes with variant support.

/* Simple custom utility */
@utility content-auto {
 content-visibility: auto;
}

/* Complex utility with nesting */
@utility scrollbar-hidden {
 &::-webkit-scrollbar {
 display: none;
 }
}

/* Functional utility with theme values */
@theme {
 --tab-size-2: 2;
 --tab-size-4: 4;
 --tab-size-github: 8;
}

@utility tab-* {
 tab-size: --value(--tab-size-*);
}

/* Supporting arbitrary, bare, and theme values */
@utility opacity-* {
 opacity: --value([percentage]);
 opacity: calc(--value(integer) * 1%);
 opacity: --value(--opacity-*);
}

/* Utility with modifiers */
@utility text-* {
 font-size: --value(--text-*, [length]);
 line-height: --modifier(--leading-*, [length], [*]);
}

/* Negative value support */
@utility inset-* {
 inset: --spacing(--value(integer));
 inset: --value([percentage], [length]);
}

@utility -inset-* {
 inset: --spacing(--value(integer) * -1);
 inset: calc(--value([percentage], [length]) * -1);
}


Custom utilities work with variants

Variants and arbitrary values supported

Utility with modifier (font-size/line-height)

Custom Variants

Registering custom conditional styles with the @custom-variant directive.

/* Simple custom variant */
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

/* Variant with media query */
@custom-variant any-hover {
 @media (any-hover: hover) {
 &:hover {
 @slot;
 }
 }
}

/* ARIA state variant */
@custom-variant aria-asc (&[aria-sort="ascending"]);
@custom-variant aria-desc (&[aria-sort="descending"]);

/* Data attribute variant */
@custom-variant data-checked (&[data-ui~="checked"]);


 Midnight theme button


 Sortable column

Checked state

One-off custom selectors

Applying Variants in CSS

Using the @variant directive to apply variants within custom CSS.

/* Single variant */
.my-element {
 background: white;

 @variant dark {
 background: black;
 }
}

/* Nested variants */
.my-button {
 background: white;

 @variant dark {
 background: gray;

 @variant hover {
 background: black;
 }
 }
}

/* Compiled output */
.my-element {
 background: white;
}

@media (prefers-color-scheme: dark) {
 .my-element {
 background: black;
 }
}

Layer Organization

Organizing custom styles into Tailwind's cascade layers.

@import "tailwindcss";

/* Base styles for HTML elements */
@layer base {
 h1 {
 font-size: var(--text-2xl);
 font-weight: bold;
 }

 h2 {
 font-size: var(--text-xl);
 font-weight: 600;
 }

 body {
 font-family: var(--font-body);
 }
}

/* Reusable component classes */
@layer components {
 .btn {
 padding: --spacing(2) --spacing(4);
 border-radius: var(--radius);
 font-weight: 600;
 transition: all 150ms;
 }

 .btn-primary {
 background-color: var(--color-blue-500);
 color: white;
 }

 .card {
 background-color: var(--color-white);
 border-radius: var(--radius-lg);
 padding: --spacing(6);
 box-shadow: var(--shadow-xl);
 }

 /* Third-party component overrides */
 .select2-dropdown {
 border-radius: var(--radius);
 box-shadow: var(--shadow-lg);
 }
}


Square corners despite card class

 Component with utility overrides

Functions and Directives

Using Tailwind's CSS functions for dynamic values and opacity adjustments.

/* Alpha function for opacity */
.my-element {
 color: --alpha(var(--color-lime-300) / 50%);
 background: --alpha(var(--color-blue-500) / 25%);
}

/* Spacing function */
.my-element {
 margin: --spacing(4);
 padding: calc(--spacing(6) - 1px);
}

/* In arbitrary values */

/* Source directive for additional content */
@source "../node_modules/@my-company/ui-lib";

/* Apply directive for inline utilities */
.select2-dropdown {
 @apply rounded-b-lg shadow-md;
}

.select2-search {
 @apply rounded border border-gray-300;
}

.select2-results__group {
 @apply text-lg font-bold text-gray-900;
}

Pseudo-elements

Styling ::before, ::after, ::placeholder, and other pseudo-elements.


 Email


- First item
- Second item

Select this text to see custom colors

Typography with pseudo-elements

Media Queries

Conditional styling based on user preferences and device capabilities.


 Respects user preference

 Only animates if motion allowed

 Adjusts for contrast needs


Hidden in portrait mode

Layout adapts to orientation

 Not shown when printing

Only visible in print

Progressive enhancement

Summary

Tailwind CSS provides a complete utility-first design system that eliminates the need for writing custom CSS in most cases. The framework's primary use cases include rapid prototyping, building production applications with consistent design systems, creating responsive layouts, implementing dark mode, and maintaining design consistency across large teams. By using utility classes directly in markup, developers can iterate quickly, avoid naming conventions, and prevent CSS bloat since only used styles are generated.

The v4.1 release enhances the developer experience with CSS-first configuration, eliminating JavaScript configuration files for most projects. Integration patterns include using the Vite plugin for modern frameworks, PostCSS for custom build pipelines, the Tailwind CLI for simple projects, and CDN scripts for rapid prototyping. The framework excels at component-driven development when combined with React, Vue, Svelte, or other modern frameworks, where utility classes are co-located with component logic. Custom design systems can be fully defined in CSS using @theme, with project-specific utilities and variants extending the framework's capabilities without writing JavaScript plugins.

Tailwind CSS Responsive Design & Dark Mode

Responsive Design Patterns

Mobile-First Responsive Layout

<div class="container mx-auto px-4">
  <!-- Hero Section -->
  <div class="flex flex-col md:flex-row items-center gap-8 py-12">
    <div class="flex-1">
      <h1 class="text-3xl md:text-5xl font-bold mb-4">
        Welcome to Our Site
      </h1>
      <p class="text-lg text-gray-600 mb-6">
        Build amazing things with Tailwind CSS
      </p>
      <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">
        Get Started
      </button>
    </div>
    <div class="flex-1">
      <img src="hero.jpg" class="w-full rounded-lg shadow-lg" />
    </div>
  </div>
</div>

Responsive Grid Gallery

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
  <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
    <img src="image1.jpg" class="w-full h-full object-cover hover:scale-105 transition" />
  </div>
  <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
    <img src="image2.jpg" class="w-full h-full object-cover hover:scale-105 transition" />
  </div>
  <!-- More items... -->
</div>

Responsive Card Component

function ProductCard({ product }: { product: Product }) {
  return (
    <div className="bg-white rounded-lg shadow-lg overflow-hidden
                    sm:flex sm:max-w-2xl">
      <img
        className="h-48 w-full object-cover sm:h-auto sm:w-48"
        src={product.image}
        alt={product.name}
      />
      <div className="p-6">
        <h3 className="text-lg font-semibold text-gray-900">
          {product.name}
        </h3>
        <p className="mt-2 text-gray-600">
          {product.description}
        </p>
        <button className="mt-4 px-4 py-2 bg-indigo-600 text-white
                          rounded-lg hover:bg-indigo-700 transition">
          Add to Cart
        </button>
      </div>
    </div>
  );
}

---

Dark Mode

Basic Dark Mode Support

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 class="text-gray-900 dark:text-white">Title</h1>
  <p class="text-gray-600 dark:text-gray-400">Description</p>
</div>

Enable dark mode in tailwind.config.js:

module.exports = {
  darkMode: 'class', // or 'media'
  // ...
}

Dark Mode Toggle (React)

function ThemeToggle() {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode]);

  return (
    <button
      onClick={() => setDarkMode(!darkMode)}
      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-800"
    >
      {darkMode ? '🌙' : '☀️'}
    </button>
  );
}

Dark Mode Best Practices

1. Use semantic color names: Instead of bg-white use bg-surface custom color 2. Test with real content: Some colors look good in light but not in dark 3. Respect system preference: Use darkMode: 'media' for OS-level preference 4. Smooth transitions: Add transition utilities for theme changes

/* Global transition for theme changes */
* {
  @apply transition-colors duration-200;
}

---

Container Queries (v4.1+)

Component that responds to its container size, not viewport:

<div class="@container">
  <div class="@lg:text-xl @2xl:text-2xl">
    Text size based on container, not viewport
  </div>
</div>

Usage in a card component:

<div class="@container w-full">
  <div class="flex flex-col @[400px]:flex-row gap-4">
    <img class="w-full @[400px]:w-32 h-32 object-cover" src="image.jpg" />
    <div>
      <h3 class="text-base @[400px]:text-lg font-bold">Title</h3>
      <p class="text-sm @[400px]:text-base">Description</p>
    </div>
  </div>
</div>

Related skills

Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4k

Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k

ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k

Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72

Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9k

Vercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4k

Forks & variants (1)

Tailwind Css Patterns has 1 known copy in the catalog totaling 31 installs. They canonicalize to this original listing.

giuseppe-trisciuoglio - 31 installs

How it compares

Use tailwind-css-patterns for utility-class accessibility snippets instead of full component frameworks.

FAQ

What WCAG level do tailwind-css-patterns target?

tailwind-css-patterns documents Tailwind utilities for WCAG AA compliance, including focus ring contrast via focus:ring-4, focus:ring-offset-2, and keyboard-only focus-visible indicators.

How do tailwind-css-patterns handle skip navigation?

tailwind-css-patterns provides skip links using sr-only that become visible on focus with focus:not-sr-only and absolute positioning, letting keyboard users jump directly to main content.

Is Tailwind Css Patterns safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Frontend Developmentfrontend