tailwind-css-patterns

Q: How do I install tailwind-css-patterns?

Run npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tailwind-css-patterns/ (personal) or .claude/skills/tailwind-css-patterns/ (project).

by giuseppe-trisciuoglioFrontend & Design

Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

Installs: 17.7K
Last 24h: +26
Trending rank: #4747
Security: Pass

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads tailwind-css-patterns automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·No security issues detected. The skill provides legitimate technical documentation and design patterns for Tailwind CSS development, including responsive design, accessibility, and performance optimization guides.

Socket PassNo alerts

Snyk PassLOW ·Risk: LOW · No issues

Runlayer PassLOW ·1/2 files flagged

ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the tailwind-css-patterns skill do?

How do I install tailwind-css-patterns?

Run npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tailwind-css-patterns/ (personal) or .claude/skills/tailwind-css-patterns/ (project).

Which AI agents can use tailwind-css-patterns?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is tailwind-css-patterns safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains tailwind-css-patterns?

It is published by giuseppe-trisciuoglio in giuseppe-trisciuoglio/developer-kit. It has 17,683 recorded installs.