SKILL.md

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

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="you@example.com"

/>

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

External Resources

Tailwind CSS Docs

Tailwind UI

Tailwind Play

tailwind-css-patterns

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

Stop writing automation&scrapers

tailwind-css-patterns

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

Let your agent run on any real-world website

Related skills

Stop writing automation&scrapers