--- id: sm-tailwind-css-patterns name: "tailwind-css-patterns" url: https://skills.yangsir.net/skill/sm-tailwind-css-patterns author: giuseppe-trisciuoglio domain: design tags: ["tailwind-css", "design-systems", "ui-patterns", "component-based-design", "atomic-css"] install_count: 11300 rating: 4.50 (54 reviews) github: https://github.com/giuseppe-trisciuoglio/developer-kit --- # tailwind-css-patterns > 此技能是Tailwind CSS开发模式的专家指南，用于使用该实用优先框架构建现代、响应式用户界面。 **Stats**: 11,300 installs · 4.5/5 (54 reviews) ## Before / After 对比 ### 遵循Tailwind CSS模式，构建现代UI ## Readme # tailwind-css-patterns # Tailwind CSS Development Patterns ## Overview 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. ## When to Use - Styling React/HTML components with utility classes - Building responsive layouts with breakpoints - Implementing flexbox and grid layouts - Managing spacing, colors, and typography - Creating custom design systems - Optimizing for mobile-first design - Building dark mode interfaces ## Instructions - **Start Mobile-First**: Write base styles for mobile, add responsive prefixes 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 - **Optimize for Production**: Ensure content paths are configured for CSS purging - **Test Responsive**: Verify layouts at all breakpoint sizes ## Examples ### Responsive Card Component ``` function ProductCard({ product }: { product: Product }) { return (
{product.name}

{product.name}

{product.description}

); } ``` ## Constraints and Warnings - **Class Proliferation**: Long class strings can reduce readability; extract components when needed - **Purge Configuration**: Must configure content paths correctly for production builds - **Arbitrary Values**: Use sparingly; prefer design tokens for consistency - **Specificity Issues**: Avoid `@`apply with complex selectors - **Dark Mode**: Requires proper configuration (class or media strategy) - **JIT Mode**: Some dynamic patterns may not be detected; use safelist if needed - **Browser Support**: Check Tailwind docs for browser compatibility ## Core Concepts ### Utility-First Approach Apply styles directly in markup using utility classes: ``` ``` ### Responsive Design Mobile-first breakpoints with prefixes: ```
``` Breakpoint prefixes: - `sm:` - 640px and above - `md:` - 768px and above - `lg:` - 1024px and above - `xl:` - 1280px and above - `2xl:` - 1536px and above ## Layout Utilities ### Flexbox Layouts Basic flex container: ```
Left
Center
Right
``` Responsive flex direction: ```
Item 1
Item 2
Item 3
``` Common flex patterns: ```
Centered Content
Left Right
Item 1
Item 2
``` ### Grid Layouts Basic grid: ```
Column 1
Column 2
Column 3
``` Responsive grid: ```
Item 1
Item 2
Item 3
Item 4
``` Auto-fit columns: ```
``` ### Container & Max Width Centered container with max width: ```
``` Responsive max width: ```
``` ## Spacing ### Padding & Margin Uniform spacing: ```
Padding all sides
Margin all sides
``` Individual sides: ```
``` Axis-based spacing: ```
``` Responsive spacing: ```
``` Space between children: ```
Item 1
Item 2
Item 3
``` ## Typography ### Font Size & Weight ```

Large Heading

Subheading

Body text

Small text ``` Responsive typography: ```

Responsive Heading

``` ### Line Height & Letter Spacing ```

Text with relaxed line height and wide letter spacing

``` ### Text Alignment ```

Left aligned on mobile, centered on tablet+

``` ## Colors ### Background Colors ```
Blue background
Light gray background
Gradient background
``` ### Text Colors ```

Dark text

Blue text

Error text

``` ### Opacity ```
Semi-transparent blue
``` ## Interactive States ### Hover States ``` Hover link ``` ### Focus States ``` ``` ### Active & Disabled States ``` ``` ### Group Hover ```

Hover the parent

``` ## Component Patterns ### Card Component ```
Card image

Card Title

Card description text goes here.

``` ### Responsive User Card ```
Profile
Product Engineer

John Doe

Building amazing products with modern technology.

``` ### Navigation Bar ``` ``` ### Form Elements ```
``` ### Modal/Dialog ```

Modal Title

Modal content goes here.

``` ## Responsive Design Patterns ### Mobile-First Responsive Layout ```

Welcome to Our Site

Build amazing things with Tailwind CSS

``` ### Responsive Grid Gallery ```
``` ## Dark Mode ### Basic Dark Mode Support ```

Title

Description

``` Enable dark mode in tailwind.config.js: ``` module.exports = { darkMode: 'class', // or 'media' // ... } ``` ## Animations & Transitions ### Basic Transitions ``` ``` ### Transform Effects ```
Scale on hover
``` ### Built-in Animations ```
Spinning
Pulsing
Bouncing
``` ## Performance Optimization ### Bundle Size Optimization Configure content sources for optimal purging: ``` // tailwind.config.js export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx,vue,svelte}", "./node_modules/@mycompany/ui-lib/**/*.{js,ts,jsx,tsx}", ], // Enable JIT for faster builds jit: true, } ``` ### CSS Optimization Techniques ```
Heavy content that's initially offscreen
Video thumbnail
Complex layout that doesn't affect outside elements
``` ### Development Performance ``` /* Enable CSS-first configuration in v4.1 */ @import "tailwindcss"; @theme { /* Define once, use everywhere */ --color-brand: #3b82f6; --font-mono: "Fira Code", monospace; } /* Critical CSS for above-the-fold content */ @layer critical { .hero-title { @apply text-4xl md:text-6xl font-bold; } } ``` ## Accessibility Guidelines ### Focus Management ``` Skip to main content ``` ### Screen Reader Support ``` Documentation

Learn how to use our API and integration guides

``` ### Color Contrast ```
High contrast text (WCAG AAA)
Good contrast on colored backgrounds
Adjusts for high contrast mode
``` ### Motion Preferences ```
Doesn't animate when user prefers reduced motion
Only animates when motion is preferred
``` ## Best Practices - **Mobile-First**: Start with mobile styles, add responsive prefixes for larger screens - **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 components - **Utility Composition**: Prefer utility classes over `@`apply for better maintainability - **Semantic HTML**: Use proper HTML elements with Tailwind classes - **Performance**: Configure content paths correctly for optimal CSS purging - **Accessibility**: Include focus styles, ARIA labels, and respect user preferences - **CSS-First Config**: Use `@`theme directive for v4.1+ instead of JavaScript config - **Custom Utilities**: Create reusable utilities with `@`utility for complex patterns ## Configuration ### CSS-First Configuration (v4.1+) Use the `@theme` directive for CSS-based configuration: ``` /* src/styles.css */ @import "tailwindcss"; @theme { /* Custom colors */ --color-brand-50: #f0f9ff; --color-brand-500: #3b82f6; --color-brand-900: #1e3a8a; /* Custom fonts */ --font-display: "Inter", system-ui, sans-serif; --font-mono: "Fira Code", monospace; /* Custom spacing */ --spacing-128: 32rem; /* Custom animations */ --animate-fade-in: fadeIn 0.5s ease-in-out; /* Custom breakpoints */ --breakpoint-3xl: 1920px; } /* Define custom animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Custom utilities */ @utility content-auto { content-visibility: auto; } ``` ### JavaScript Configuration (Legacy) ``` /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx,vue,svelte}", ], theme: { extend: { colors: { primary: { 50: '#f0f9ff', 500: '#3b82f6', 900: '#1e3a8a', }, }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, spacing: { '128': '32rem', }, }, }, plugins: [], } ``` ### Vite Integration (v4.1+) ``` // vite.config.ts import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) ``` ## Advanced v4.1 Features ### Native CSS Custom Properties ```
Using CSS custom properties directly
``` ### Enhanced Arbitrary Values ```
Responsive grid without custom CSS
Bounce with custom easing
``` ### Container Queries ```
Text size based on container, not viewport
``` ## Common Patterns with React/JSX ``` import { useState } from 'react'; function Button({ variant = 'primary', size = 'md', children }: { variant?: 'primary' | 'secondary'; size?: 'sm' | 'md' | 'lg'; children: React.ReactNode; }) { const baseClasses = 'font-semibold rounded transition'; const variantClasses = { primary: 'bg-blue-600 text-white hover:bg-blue-700', secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300', }; const sizeClasses = { sm: 'px-3 py-1 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg', }; return ( ); } ``` ## References - Tailwind CSS Docs: [https://tailwindcss.com/docs](https://tailwindcss.com/docs) - Tailwind UI: [https://tailwindui.com](https://tailwindui.com) - Tailwind Play: [https://play.tailwindcss.com](https://play.tailwindcss.com) - Headless UI: [https://headlessui.com](https://headlessui.com) Weekly Installs1.9KRepository[giuseppe-trisci…oper-kit](https://github.com/giuseppe-trisciuoglio/developer-kit)GitHub Stars167First SeenJan 20, 2026Security Audits[Gen Agent Trust HubPass](/giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns/security/agent-trust-hub)[SocketPass](/giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns/security/socket)[SnykPass](/giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns/security/snyk)Installed onopencode1.6Kgemini-cli1.5Kcodex1.5Kclaude-code1.4Kcursor1.4Kgithub-copilot1.4K --- *Source: https://skills.yangsir.net/skill/sm-tailwind-css-patterns* *Markdown mirror: https://skills.yangsir.net/api/skill/sm-tailwind-css-patterns/markdown*