Agent Skills › legions-developer/evilcharts › tailwind-css-patterns

tailwind-css-patterns

GitHub

提供 Tailwind CSS v4.1+ 实用工具类开发模式，涵盖响应式布局、Flexbox/Grid、暗色模式及组件样式构建，适用于 React/Vue/Svelte 前端 UI 开发与设计系统实现。

.agents/skills/tailwind-css-patterns/SKILL.md legions-developer/evilcharts

Trigger Scenarios

使用 Tailwind CSS 进行前端组件样式编写构建响应式网页布局或网格系统配置暗色模式支持优化前端 CSS 工作流

Install

npx skills add legions-developer/evilcharts --skill tailwind-css-patterns -g -y

More Options

Non-standard path

npx skills add https://github.com/legions-developer/evilcharts/tree/main/.agents/skills/tailwind-css-patterns -g -y

Use without installing

npx skills use legions-developer/evilcharts@tailwind-css-patterns

指定 Agent (Claude Code)

npx skills add legions-developer/evilcharts --skill tailwind-css-patterns -a claude-code -g -y

安装 repo 全部 skill

npx skills add legions-developer/evilcharts --all -g -y

预览 repo 内 skill

npx skills add legions-developer/evilcharts --list

SKILL.md

Frontmatter

{
    "name": "tailwind-css-patterns",
    "description": "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.",
    "allowed-tools": "Read, Write, Edit, Glob, Grep, Bash"
}

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 CSS with the @theme directive (v4 is CSS-first — there is no tailwind.config.js)
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: v4 auto-detects template files (no content array) and ships only the utilities you use
Accessibility: Include focus styles, ARIA labels, and respect user preferences (reduced-motion)

Troubleshooting

Classes Not Applying

Check @import "tailwindcss": Ensure it's at the top of your CSS entry file (v4 replaces the old @tailwind directives)
Source detection: v4 auto-scans your project; if a file is ignored (e.g. via .gitignore), include it explicitly with @source "./path"
Verify build: Restart the dev server / rebuild so the v4 engine re-scans for class names

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

Define the variant: v4 uses class-based dark mode via @custom-variant dark (&:where(.dark, .dark *)); in CSS (no darkMode config key)
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

tailwind-css-patterns

Trigger Scenarios

Install

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

Version History

Same Skill Collection

Metadata

文库