[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-41bb5ca8-d6aa-44a0-88d1-771b79484073":3,"$fb6-9jBiUPzQ9Mr94gctiVi7g5-vhr34sUEeBZJ0Fx_k":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"41bb5ca8-d6aa-44a0-88d1-771b79484073","tailwind-patterns","Tailwind CSS v4 原则。CSS优先配置，容器查询，现代模式，设计令牌架构。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: tailwind-patterns\ndescription: \"Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Tailwind CSS Patterns (v4 - 2025)\n\n> Modern utility-first CSS with CSS-native configuration.\n\n## When to Use\nUse this skill when configuring Tailwind v4, using CSS-first theme and design tokens, or implementing container queries and modern Tailwind patterns.\n\n---\n\n## 1. Tailwind v4 Architecture\n\n### What Changed from v3\n\n| v3 (Legacy) | v4 (Current) |\n|-------------|--------------|\n| `tailwind.config.js` | CSS-based `@theme` directive |\n| PostCSS plugin | Oxide engine (10x faster) |\n| JIT mode | Native, always-on |\n| Plugin system | CSS-native features |\n| `@apply` directive | Still works, discouraged |\n\n### v4 Core Concepts\n\n| Concept | Description |\n|---------|-------------|\n| **CSS-first** | Configuration in CSS, not JavaScript |\n| **Oxide Engine** | Rust-based compiler, much faster |\n| **Native Nesting** | CSS nesting without PostCSS |\n| **CSS Variables** | All tokens exposed as `--*` vars |\n\n---\n\n## 2. CSS-Based Configuration\n\n### Theme Definition\n\n```\n@theme {\n  \u002F* Colors - use semantic names *\u002F\n  --color-primary: oklch(0.7 0.15 250);\n  --color-surface: oklch(0.98 0 0);\n  --color-surface-dark: oklch(0.15 0 0);\n  \n  \u002F* Spacing scale *\u002F\n  --spacing-xs: 0.25rem;\n  --spacing-sm: 0.5rem;\n  --spacing-md: 1rem;\n  --spacing-lg: 2rem;\n  \n  \u002F* Typography *\u002F\n  --font-sans: 'Inter', system-ui, sans-serif;\n  --font-mono: 'JetBrains Mono', monospace;\n}\n```\n\n### When to Extend vs Override\n\n| Action | Use When |\n|--------|----------|\n| **Extend** | Adding new values alongside defaults |\n| **Override** | Replacing default scale entirely |\n| **Semantic tokens** | Project-specific naming (primary, surface) |\n\n---\n\n## 3. Container Queries (v4 Native)\n\n### Breakpoint vs Container\n\n| Type | Responds To |\n|------|-------------|\n| **Breakpoint** (`md:`) | Viewport width |\n| **Container** (`@container`) | Parent element width |\n\n### Container Query Usage\n\n| Pattern | Classes |\n|---------|---------|\n| Define container | `@container` on parent |\n| Container breakpoint | `@sm:`, `@md:`, `@lg:` on children |\n| Named containers | `@container\u002Fcard` for specificity |\n\n### When to Use\n\n| Scenario | Use |\n|----------|-----|\n| Page-level layouts | Viewport breakpoints |\n| Component-level responsive | Container queries |\n| Reusable components | Container queries (context-independent) |\n\n---\n\n## 4. Responsive Design\n\n### Breakpoint System\n\n| Prefix | Min Width | Target |\n|--------|-----------|--------|\n| (none) | 0px | Mobile-first base |\n| `sm:` | 640px | Large phone \u002F small tablet |\n| `md:` | 768px | Tablet |\n| `lg:` | 1024px | Laptop |\n| `xl:` | 1280px | Desktop |\n| `2xl:` | 1536px | Large desktop |\n\n### Mobile-First Principle\n\n1. Write mobile styles first (no prefix)\n2. Add larger screen overrides with prefixes\n3. Example: `w-full md:w-1\u002F2 lg:w-1\u002F3`\n\n---\n\n## 5. Dark Mode\n\n### Configuration Strategies\n\n| Method | Behavior | Use When |\n|--------|----------|----------|\n| `class` | `.dark` class toggles | Manual theme switcher |\n| `media` | Follows system preference | No user control |\n| `selector` | Custom selector (v4) | Complex theming |\n\n### Dark Mode Pattern\n\n| Element | Light | Dark |\n|---------|-------|------|\n| Background | `bg-white` | `dark:bg-zinc-900` |\n| Text | `text-zinc-900` | `dark:text-zinc-100` |\n| Borders | `border-zinc-200` | `dark:border-zinc-700` |\n\n---\n\n## 6. Modern Layout Patterns\n\n### Flexbox Patterns\n\n| Pattern | Classes |\n|---------|---------|\n| Center (both axes) | `flex items-center justify-center` |\n| Vertical stack | `flex flex-col gap-4` |\n| Horizontal row | `flex gap-4` |\n| Space between | `flex justify-between items-center` |\n| Wrap grid | `flex flex-wrap gap-4` |\n\n### Grid Patterns\n\n| Pattern | Classes |\n|---------|---------|\n| Auto-fit responsive | `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` |\n| Asymmetric (Bento) | `grid grid-cols-3 grid-rows-2` with spans |\n| Sidebar layout | `grid grid-cols-[auto_1fr]` |\n\n> **Note:** Prefer asymmetric\u002FBento layouts over symmetric 3-column grids.\n\n---\n\n## 7. Modern Color System\n\n### OKLCH vs RGB\u002FHSL\n\n| Format | Advantage |\n|--------|-----------|\n| **OKLCH** | Perceptually uniform, better for design |\n| **HSL** | Intuitive hue\u002Fsaturation |\n| **RGB** | Legacy compatibility |\n\n### Color Token Architecture\n\n| Layer | Example | Purpose |\n|-------|---------|---------|\n| **Primitive** | `--blue-500` | Raw color values |\n| **Semantic** | `--color-primary` | Purpose-based naming |\n| **Component** | `--button-bg` | Component-specific |\n\n---\n\n## 8. Typography System\n\n### Font Stack Pattern\n\n| Type | Recommended |\n|------|-------------|\n| Sans | `'Inter', 'SF Pro', system-ui, sans-serif` |\n| Mono | `'JetBrains Mono', 'Fira Code', monospace` |\n| Display | `'Outfit', 'Poppins', sans-serif` |\n\n### Type Scale\n\n| Class | Size | Use |\n|-------|------|-----|\n| `text-xs` | 0.75rem | Labels, captions |\n| `text-sm` | 0.875rem | Secondary text |\n| `text-base` | 1rem | Body text |\n| `text-lg` | 1.125rem | Lead text |\n| `text-xl`+ | 1.25rem+ | Headings |\n\n---\n\n## 9. Animation & Transitions\n\n### Built-in Animations\n\n| Class | Effect |\n|-------|--------|\n| `animate-spin` | Continuous rotation |\n| `animate-ping` | Attention pulse |\n| `animate-pulse` | Subtle opacity pulse |\n| `animate-bounce` | Bouncing effect |\n\n### Transition Patterns\n\n| Pattern | Classes |\n|---------|---------|\n| All properties | `transition-all duration-200` |\n| Specific | `transition-colors duration-150` |\n| With easing | `ease-out` or `ease-in-out` |\n| Hover effect | `hover:scale-105 transition-transform` |\n\n---\n\n## 10. Component Extraction\n\n### When to Extract\n\n| Signal | Action |\n|--------|--------|\n| Same class combo 3+ times | Extract component |\n| Complex state variants | Extract component |\n| Design system element | Extract + document |\n\n### Extraction Methods\n\n| Method | Use When |\n|--------|----------|\n| **React\u002FVue component** | Dynamic, JS needed |\n| **@apply in CSS** | Static, no JS needed |\n| **Design tokens** | Reusable values |\n\n---\n\n## 11. Anti-Patterns\n\n| Don't | Do |\n|-------|-----|\n| Arbitrary values everywhere | Use design system scale |\n| `!important` | Fix specificity properly |\n| Inline `style=` | Use utilities |\n| Duplicate long class lists | Extract component |\n| Mix v3 config with v4 | Migrate fully to CSS-first |\n| Use `@apply` heavily | Prefer components |\n\n---\n\n## 12. Performance Principles\n\n| Principle | Implementation |\n|-----------|----------------|\n| **Purge unused** | Automatic in v4 |\n| **Avoid dynamism** | No template string classes |\n| **Use Oxide** | Default in v4, 10x faster |\n| **Cache builds** | CI\u002FCD caching |\n\n---\n\n> **Remember:** Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,219,2091,"2026-05-16 13:42:57",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"aaf765e2-769c-41da-ba21-df96c15a19e1","1.0.0","tailwind-patterns.zip",3202,"uploads\u002Fskills\u002F41bb5ca8-d6aa-44a0-88d1-771b79484073\u002Ftailwind-patterns.zip","9a46484db3cf984a1438aed4343d01b82736e3f5838b4c9a83623ddc8fd3b366","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":7256}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]