tailwind-css-v4-mastery

# Tailwind CSS V4 Mastery Skill ## Philosophy: CSS-First Thinking Tailwind V4 represents a **philosophical shift** from JavaScript-centric utility frameworks to **CSS-native, declarative styling**. This skill installs that mental model: - **Configuration is CSS** — `@theme {}` replaces `tailwind.config.js` - **Speed is Architectural** — Oxide engine (Rust) replaces JavaScript parser - **Modern Standards First** — Leverages `@property`, `color-mix()`, CSS nesting - **Performance as a First-Class Citizen** — 10-100x faster than v3 The correct mental model for V4: **"CSS is the source of truth. JavaScript configuration is outdated."** --- ## Core Conceptual Landscape ### 1. The Oxide Engine Revolution **What Changed:** ``` v3: JavaScript → JavaScript Parser → CSS Output v4: CSS @theme → Rust/Oxide Engine → Optimized CSS Output ``` **Why It Matters:** - **Performance:** 10-100x faster build times, 15-30x faster HMR - **Simplicity:** One language (CSS) instead of two (JS + CSS) - **Future-Proofing:** Aligned with native browser capabilities **Mental Model:** Think of the Oxide engine as a compiler, not a preprocessor. It compiles CSS declarations into optimized output. ### 2. CSS-First Configuration Paradigm **The Core Shift:** | Aspect | v3 | v4 | |--------|-----|-----| | Config Format | JavaScript Object | CSS `@theme {}` Block | | Location | `tailwind.config.js` | `styles.css` | | Execution | Node.js at build time | Oxide engine | | Debugging | Console logs, file i...