tailwind-patterns is agent-read markdown (skill) from kunanonj/ai-skills-hub: Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture..
Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.
What the file says
# 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;
…
Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.
GET https://markdownregistry.com/api/v1/artifacts/art_tl2ep3dzxv2ti67n
GET https://markdownregistry.com/api/v1/resolve?ref=kunanonj/ai-skills-hub/tailwind-patterns
GET https://markdownregistry.com/api/v1/blob/cf9bc4a0a3739207f15599d9010a91bfe573b1de4ac8e195d741eccb450804d9
Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
kunanonj/ai-skills-hub · .agents/skills/analyze-codebase-for-mcp/SKILL.md · Analyze an arbitrary codebase to identify functions, APIs, and data sources suitable for exposure as MCP tools…
kunanonj/ai-skills-hub · .agents/skills/api-analyzer/SKILL.md · Validates whether an API request is correct based on provided inputs (method, URL, headers, body, auth, query params)…
kunanonj/ai-skills-hub · .agents/skills/api-design-principles/SKILL.md · Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight…
kunanonj/ai-skills-hub · .agents/skills/architecture-decision-records/SKILL.md · Comprehensive patterns for creating, maintaining, and managing Architecture Decision Records (ADRs) that capture the…
kunanonj/ai-skills-hub · .agents/skills/backend-api-design/SKILL.md · Design RPC-style APIs with layered architecture (Controller → Manager → Repository). Use when creating new API…
kunanonj/ai-skills-hub · .agents/skills/backend-dev-guidelines/SKILL.md · You are a senior backend engineer operating production-grade services under strict architectural and reliability…
kunanonj/ai-skills-hub · .agents/skills/backend-security-coder/SKILL.md · Expert in secure backend coding practices specializing in input validation, authentication, and API security. Use…
kunanonj/ai-skills-hub · .agents/skills/browser-screenshot-diff/SKILL.md · Visual + DOM diff between two recorded sessions at matching trajectory step ids; used for visual regression and replay…
kunanonj/ai-skills-hub · .agents/skills/browser-testing-with-devtools/SKILL.md · Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use…
