Tailwind Css Patterns

This is a comprehensive pattern library for Tailwind CSS that covers responsive design, component patterns, and dark mode implementation. You'll reach for it when building React, Vue, or Svelte components and need specific utility combinations for cards, forms, grids, or navigation. It includes mobile-first responsive patterns, accessibility considerations, and troubleshooting for common issues like purged classes and dark mode configuration. The reference files break down layout patterns, animations, and performance optimization. It's particularly strong on real-world examples and catches the gotchas that trip up developers moving from traditional CSS to utility-first approaches.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 11
skills.sh installs: 18K
GitHub stars: 369
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

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>

SKILL.md on GitHub