Tailwind Patterns

If you're building with Tailwind v4, this skill has the migration knowledge you need. It covers the CSS-first configuration model that replaces tailwind.config.js, container queries for component-level responsive design, and the Oxide engine's performance improvements. The tables are dense with practical comparisons: when to use container queries versus breakpoints, OKLCH versus HSL for colors, what changed from v3. Honestly, the anti-patterns section alone (like avoiding @apply overuse) is worth having on hand. It's written for people actually shipping Tailwind code, not learning CSS from scratch.

skills.sh installs: 126
GitHub stars: 7.6K
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add vudovn/antigravity-kit --skill tailwind-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

Tailwind CSS Patterns (v4)

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 (full builds ~5x, incremental >100x)
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