Tailwind Patterns

If you're working with Tailwind v4, this covers the CSS-first configuration shift and container queries that actually matter now. It's built around the new @theme directive and Oxide engine patterns, so you're not reaching for v3 config files anymore. Good for understanding when to use container queries over breakpoints, how OKLCH colors work, and why the docs keep telling you to avoid @apply. Honest take: the anti-patterns section alone will save you from cargo-culting old v3 habits into your v4 projects.

skills.sh installs: 564
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill tailwind-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS Patterns (v4 - 2025)

Modern utility-first CSS with CSS-native configuration.

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