Tailwind Patterns

This is a reference guide for Tailwind CSS v4's major architectural shift from JavaScript config files to CSS-native theming with the @theme directive. It covers the new Oxide engine, container queries, OKLCH color tokens, and the move away from @apply directives. Use it when you're migrating from v3 or building new projects with CSS-first configuration. The tables are dense with specifics: breakpoint values, when to use container queries over viewport media queries, dark mode strategies, and modern layout patterns. One thing to note is that v4 discourages some old patterns like heavy @apply usage, so if you're used to v3 habits, this will push you toward component extraction instead.

skills.sh installs: 1.1K
GitHub stars: 43.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --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.

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