Tailwind Patterns

---
name: tailwind-patterns
description: Tailwind CSS v4 principles and modern design tokens.
category: design
version: 4.1.0-fractal
layer: master-skill
---

# Tailwind CSS Patterns (v4 - 2025)

> Modern utility-first CSS with CSS-native configuration.

---

## 1. Tailwind v4 Architecture

## 🧠 Knowledge Modules (Fractal Skills)

### 1. [What Changed from v3](./sub-skills/what-changed-from-v3.md)
### 2. [v4 Core Concepts](./sub-skills/v4-core-concepts.md)
### 3. [Theme Definition](./sub-skills/theme-definition.md)
### 4. [When to Extend vs Override](./sub-skills/when-to-extend-vs-override.md)
### 5. [Breakpoint vs Container](./sub-skills/breakpoint-vs-container.md)
### 6. [Container Query Usage](./sub-skills/container-query-usage.md)
### 7. [When to Use](./sub-skills/when-to-use.md)
### 8. [Breakpoint System](./sub-skills/breakpoint-system.md)
### 9. [Mobile-First Principle](./sub-skills/mobile-first-principle.md)
### 10. [Configuration Strategies](./sub-skills/configuration-strategies.md)
### 11. [Dark Mode Pattern](./sub-skills/dark-mode-pattern.md)
### 12. [Flexbox Patterns](./sub-skills/flexbox-patterns.md)
### 13. [Grid Patterns](./sub-skills/grid-patterns.md)
### 14. [OKLCH vs RGB/HSL](./sub-skills/oklch-vs-rgbhsl.md)
### 15. [Color Token Architecture](./sub-skills/color-token-architecture.md)
### 16. [Font Stack Pattern](./sub-skills/font-stack-pattern.md)
### 17. [Type Scale](./sub-skills/type-scale.md)
### 18. [Built-in Animations](./sub-skills/built-in-animations.md)
### 19. [Transition Patterns](./sub-skills/transition-patterns.md)
### 20. [When to Extract](./sub-skills/when-to-extract.md)
### 21. [Extraction Methods](./sub-skills/extraction-methods.md)