Skill

tailwind-css-patterns

Provides Tailwind CSS utility patterns for responsive layouts, flexbox, grid, typography, colors, and components. Use for styling React/Vue/Svelte apps, design systems, and CSS optimization.

Tailwind

Popularity

Parent stars

247

Parent forks

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/developer-kit-typescript:tailwind-css-patterns

User invocable

Model invocable

Inline context

Default effort

Tool Access

This skill is limited to the following tools:

ReadWriteEditGlobGrepBash

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

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.

Supporting Files

references/accessibility.mdreferences/animations.mdreferences/component-patterns.mdreferences/configuration.mdreferences/layout-patterns.mdreferences/performance.mdreferences/reference.mdreferences/responsive-design.md

SKILL.md

153 lines · ~1.6k tokens

Stats

LanguagePython

Parent stars247

Parent forks27

MaintenanceExcellent

Last CommitMar 24, 2026

Actions

View Source View Plugin View on GitHub View README

Tailwind CSS Development Patterns

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

Start Mobile-First: Write base styles for mobile, add responsive prefixes (sm:, md:, lg:) for larger screens
Use Design Tokens: Leverage Tailwind's spacing, color, and typography scales
Compose Utilities: Combine multiple utilities for complex styles
Extract Components: Create reusable component classes for repeated patterns
Configure Theme: Customize design tokens in tailwind.config.js or using @theme
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="[email protected]"
/>

Best Practices

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 reusable components
Utility Composition: Prefer utility classes over @apply for maintainability
Semantic HTML: Use proper HTML elements with Tailwind classes
Performance: Ensure content paths include all template files for optimal purging
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 — Flexbox, grid, spacing, typography, colors
references/component-patterns.md — Cards, navigation, forms, modals, React patterns
references/responsive-design.md — Responsive patterns, dark mode, container queries
references/animations.md — Transitions, transforms, built-in animations, motion preferences
references/performance.md — Bundle optimization, CSS optimization, production builds
references/accessibility.md — Focus management, screen readers, color contrast, ARIA
references/configuration.md — CSS-first config, JavaScript config, plugins, presets
references/reference.md — Additional reference materials

tailwind-css-patterns

Popularity

Invocation

Tool Access

Context Preview

Supporting Files

SKILL.md

tailwind-css-patterns

Popularity

Invocation

Tool Access

Context Preview

Supporting Files

SKILL.md

Tailwind CSS Development Patterns

Overview

When to Use

Quick Reference

Responsive Breakpoints

Common Patterns

Instructions

Examples

Responsive Card Component

Dark Mode Toggle

Form Input

Best Practices

Troubleshooting

Classes Not Applying

Responsive Styles Not Working

Dark Mode Issues

Constraints and Warnings

References

External Resources

Similar Skills

Tailwind CSS Development Patterns

Overview

When to Use

Quick Reference

Responsive Breakpoints

Common Patterns

Instructions

Examples

Responsive Card Component

Dark Mode Toggle

Form Input

Best Practices

Troubleshooting

Classes Not Applying

Responsive Styles Not Working

Dark Mode Issues

Constraints and Warnings

References

External Resources

Similar Skills