tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
Profile →npx skills add sickn33/agentic-awesome-skills --skill tailwind-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Tailwind CSS Patterns (v4 - 2025) > Modern utility-first CSS with CSS-native configuration. ## When to Use Use this skill when configuring Tailwind v4, using CSS-first theme and design tokens, or implementing container queries and modern Tailwind patterns. --- ## 1. Tailwind v4 Architecture ### What Changed from v3 | v3 (Legacy) | v4 (Current) | |-------------|--------------| | `tailwind.config.js` | CSS-based `@theme` directive | | PostCSS plugin | Oxide engine (10x faster) | | JIT mode | Native, always-on | | Plugin system | CSS-native features | | `@apply` directive | Still works, discouraged | ### v4 Core Concepts | Concept | Description | |---------|-------------| | **CSS-first** | Configuration in CSS, not JavaScript | | **Oxide Engine** | Rust-based compiler, much faster | | **Native Nesting** | CSS nesting without PostCSS | | **CSS Variables** | All tokens exposed as `--*` vars | --- ## 2. CSS-Based Configuration ### Theme Definition ``` @theme { /* Colors - use semantic names */ --color-primary: oklch(0.7 0.15 250); --color-surface: oklch(0.98 0 0); --color-surface-dark: oklch(0.15 0 0); /* Spacing scale */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem;
- When to Use
- 1. Tailwind v4 Architecture
- What Changed from v3
- v4 Core Concepts
- 2. CSS-Based Configuration
- Theme Definition
- When to Extend vs Override
- 3. Container Queries (v4 Native)
- Breakpoint vs Container
- Container Query Usage
- 4. Responsive Design
- Breakpoint System
- Mobile-First Principle
- 5. Dark Mode
What does the tailwind-patterns skill do?
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill tailwind-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.