tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
Best for Frontend developers adoptin…Works with GitHubLow risk
⌘source
- author
@sickn33- language
- Python
★34kstars
5.6kforks
Apr 18, 2026
✦overview.md
Key Features
- ·Configures Tailwind v4 with CSS-first theme and design tokens
- ·Implements container queries and modern Tailwind patterns
- ·Uses Oxide engine for faster compilation
- ·Exposes all design tokens as CSS variables
- ·Supports CSS native nesting
Use Cases
- →Configuring a new project with Tailwind CSS v4
- →Refactoring a legacy Tailwind v3 project to v4 architecture
- →Implementing responsive designs using container queries
- →Building a design system with CSS-based tokens
Best for
- ✓Frontend developers adopting Tailwind v4
- ✓Teams refactoring legacy CSS configurations
Not ideal for
- !Projects using Tailwind v3 or earlier without planned upgrades
- !Developers unfamiliar with CSS concepts like variables and nesting
name
tailwind-patterns
description
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
risk:unknown
source:community
date_added:2026-02-27
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;
$install
1-click copynpx skills add sickn33/antigravity-awesome-skills --skill tailwind-patternsSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
1/ 5
poorThe SKILL.md content is hard to understand and quite ambiguous.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
1/ 5
not actionableThe SKILL.md is hard to act on; an agent would not know what to do.