Home / coco-research / coco · skills/tailwind-patterns/SKILL.md · GitHub

tailwind-patterns skillA

tailwind-patterns is agent-read markdown (skill) from coco-research/coco: Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind v4 or migrating from v3..

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)

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind CSS v4, migrating from v3, configuring design tokens in CSS, implementing responsive layouts, or applying utility-first 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

```css
@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);
…

Read the whole file at its exact version.

How to install

Latest version
mdr add coco-research/coco/tailwind-patterns@v0.1.0
Exact content
mdr add coco-research/coco/tailwind-patterns@sha256:9ab25982b45bf152

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.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_bier7urnmgb4a3mb.svg)](https://markdownregistry.com/a/art_bier7urnmgb4a3mb)

1 badge views in 30 days

Versions

versioncommittedcommitsizeaudit
v0.1.0 latest2026-04-26 d53cc6c 7,072 BA view

Audit of the latest version

A  17 of 17 checks passed. Deterministic, no model, same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (7072 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

coco-research/coco · 478 stars · license NOASSERTION · pushed 2026-09-25 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_bier7urnmgb4a3mb
GET https://markdownregistry.com/api/v1/resolve?ref=coco-research/coco/tailwind-patterns
GET https://markdownregistry.com/api/v1/blob/9ab25982b45bf1522429662e4286daafaa25b7ca988e769489429720c126fdf9

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.

More from coco-research/coco

create-rule skill
coco-research/coco · adapters/cursor/skills/create-rule/SKILL.md · Create Cursor rules for persistent AI guidance. Use when the user wants to create a rule, add coding standards, set up…
git:20260426.d53cc6c · audit A · 478 stars
create-skill skill
coco-research/coco · adapters/cursor/skills/create-skill/SKILL.md · Guides users through creating effective Agent Skills for Cursor. Use when the user wants to create, write, or author a…
git:20260426.d53cc6c · audit A · 478 stars
create-subagent skill
coco-research/coco · adapters/cursor/skills/create-subagent/SKILL.md · Create custom subagents for specialized AI tasks. Use when the user wants to create a new type of subagent, set up…
git:20260426.d53cc6c · audit A · 478 stars
migrate-to-skills skill
coco-research/coco · adapters/cursor/skills/migrate-to-skills/SKILL.md · Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent…
git:20260426.d53cc6c · audit A · 478 stars
update-cursor-settings skill
coco-research/coco · adapters/cursor/skills/update-cursor-settings/SKILL.md · Modify Cursor/VSCode user settings in settings.json. Use when the user wants to change editor settings, preferences…
git:20260426.d53cc6c · audit A · 478 stars
agent-lightning skill
coco-research/coco · skills/agent-lightning/SKILL.md · Train and optimize AI agents using Microsoft's Agent Lightning framework with reinforcement learning. Use when setting…
git:20260802.1479e32 · audit A · 478 stars
agent-self-eval skill
coco-research/coco · skills/agent-self-eval/SKILL.md · Post-run self-evaluation system that scores agent output on correctness, clarity, actionability, and conciseness. Use…
v0.1.0 · audit A · 478 stars
ai-marketing-videos skill
coco-research/coco · skills/ai-marketing-videos/SKILL.md · Create AI marketing videos for ads, promos, product launches, and brand content. Models: Veo, Seedance, Wan, FLUX for…
git:20260914.57d3294 · audit A · 478 stars
ai-product skill
coco-research/coco · skills/ai-product/SKILL.md · Use when building AI features into a product: LLM integration, RAG pipelines, guardrails, streaming, AI UX, prompt…
v0.1.0 · audit A · 478 stars
api-design-principles skill
coco-research/coco · skills/api-design-principles/SKILL.md · Use when designing a new REST or GraphQL API, reviewing an API spec before implementation, setting team API standards…
git:20260914.e75f220 · audit A · 478 stars
pmstudio-arb skill
coco-research/coco · skills/arb-review/SKILL.md · Generate an Architecture Review Board (ARB) presentation in Coco Inc's standard 11-slide format. Use when someone asks…
git:20260802.1479e32 · audit A · 478 stars
arch-index skill
coco-research/coco · skills/arch-index/SKILL.md · Build and validate .arch/index.json — a committed map from each architectural component of this repository to the real…
v1.0.0 · audit A · 478 stars

Every file in coco-research/coco

Other files named tailwind-patterns

tailwind-patterns skill
aiskillstore/marketplace · skills/0xdarkmatter/tailwind-patterns/SKILL.md · Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility…
git:20260113.222b7de · audit A · 427 stars
tailwind-patterns skill
vodailocz/kilo-kit-mcp · skills/design/tailwind-patterns/SKILL.md · Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
git:20260502.38d5305 · audit A · 26 stars
tailwind-patterns skill
kunanonj/ai-skills-hub · .agents/skills/tailwind-patterns/SKILL.md · Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
git:20260628.caecf60 · audit A · 5 stars

Browse by kind, by grade A, or by owner.