Tailwind Patterns
- 554 installs
- 29.9k repo stars
- Updated July 27, 2026
- davila7/claude-code-templates
tailwind-patterns is a frontend styling skill that teaches Tailwind CSS v4 CSS-first configuration, container queries, design tokens, and modern utility patterns without legacy tailwind.config.js habits.
About
tailwind-patterns is a Tailwind CSS v4 reference skill for developers migrating from v3 or starting fresh with CSS-native configuration. It documents the shift from tailwind.config.js to @theme directives, PostCSS plugin to the Oxide engine advertised as 10x faster, always-on JIT, and CSS-native features replacing the old plugin system. Developers reach for this skill when building responsive layouts with container queries, architecting design tokens, or avoiding discouraged @apply-heavy patterns. Allowed tools include Read, Write, Edit, Glob, and Grep for applying patterns directly in project CSS files.
- Documents Tailwind v4 CSS-first @theme configuration replacing tailwind.config.js
- Covers container queries with @container and @sm/@md/@lg container breakpoints
- Includes v3 versus v4 architecture table (Oxide engine, native nesting, CSS variables)
- Mobile-first breakpoint ladder plus touch-target guidance (e.g. min-h-11 min-w-11)
- Lists 8 anti-patterns including @apply overuse, breakpoint-only responsiveness, and v3 config migration gaps
Tailwind Patterns by the numbers
- 554 all-time installs (skills.sh)
- Ranked #591 of 2,277 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/davila7/claude-code-templates --skill tailwind-patternsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 554 |
|---|---|
| repo stars | ★ 29.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | davila7/claude-code-templates ↗ |
How do you configure Tailwind CSS v4 with @theme?
Ship consistent Tailwind CSS v4 layouts and tokens without fighting legacy tailwind.config.js habits.
Who is it for?
Frontend developers adopting Tailwind v4 who need CSS-native tokens and container queries without carrying v3 config habits forward.
Skip if: Projects locked on Tailwind v3 with no migration plan or teams using CSS-in-JS frameworks without Tailwind in the stack.
When should I use this skill?
The user asks about Tailwind v4, @theme directives, container queries, design tokens, or migrating off tailwind.config.js.
What you get
CSS-first @theme configs, container-query layouts, and design-token architecture in project stylesheets
- @theme configuration
- container-query layouts
By the numbers
- Documents Tailwind v4 Oxide engine as 10x faster than the legacy PostCSS plugin path
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 |
---
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;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}When to Extend vs Override
| Action | Use When |
|---|---|
| Extend | Adding new values alongside defaults |
| Override | Replacing default scale entirely |
| Semantic tokens | Project-specific naming (primary, surface) |
---
3. Container Queries (v4 Native)
Breakpoint vs Container
| Type | Responds To |
|---|---|
Breakpoint (md:) | Viewport width |
Container (@container) | Parent element width |
Container Query Usage
| Pattern | Classes |
|---|---|
| Define container | @container on parent |
| Container breakpoint | @sm:, @md:, @lg: on children |
| Named containers | @container/card for specificity |
When to Use
| Scenario | Use |
|---|---|
| Page-level layouts | Viewport breakpoints |
| Component-level responsive | Container queries |
| Reusable components | Container queries (context-independent) |
---
4. Responsive Design
Breakpoint System
| Prefix | Min Width | Target |
|---|---|---|
| (none) | 0px | Mobile-first base |
sm: | 640px | Large phone / small tablet |
md: | 768px | Tablet |
lg: | 1024px | Laptop |
xl: | 1280px | Desktop |
2xl: | 1536px | Large desktop |
Mobile-First Principle
1. Write mobile styles first (no prefix) 2. Add larger screen overrides with prefixes 3. Example: w-full md:w-1/2 lg:w-1/3
---
5. Dark Mode
Configuration Strategies
| Method | Behavior | Use When |
|---|---|---|
class | .dark class toggles | Manual theme switcher |
media | Follows system preference | No user control |
selector | Custom selector (v4) | Complex theming |
Dark Mode Pattern
| Element | Light | Dark |
|---|---|---|
| Background | bg-white | dark:bg-zinc-900 |
| Text | text-zinc-900 | dark:text-zinc-100 |
| Borders | border-zinc-200 | dark:border-zinc-700 |
---
6. Modern Layout Patterns
Flexbox Patterns
| Pattern | Classes |
|---|---|
| Center (both axes) | flex items-center justify-center |
| Vertical stack | flex flex-col gap-4 |
| Horizontal row | flex gap-4 |
| Space between | flex justify-between items-center |
| Wrap grid | flex flex-wrap gap-4 |
Grid Patterns
| Pattern | Classes |
|---|---|
| Auto-fit responsive | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| Asymmetric (Bento) | grid grid-cols-3 grid-rows-2 with spans |
| Sidebar layout | grid grid-cols-[auto_1fr] |
Note: Prefer asymmetric/Bento layouts over symmetric 3-column grids.
---
7. Modern Color System
OKLCH vs RGB/HSL
| Format | Advantage |
|---|---|
| OKLCH | Perceptually uniform, better for design |
| HSL | Intuitive hue/saturation |
| RGB | Legacy compatibility |
Color Token Architecture
| Layer | Example | Purpose |
|---|---|---|
| Primitive | --blue-500 | Raw color values |
| Semantic | --color-primary | Purpose-based naming |
| Component | --button-bg | Component-specific |
---
8. Typography System
Font Stack Pattern
| Type | Recommended |
|---|---|
| Sans | 'Inter', 'SF Pro', system-ui, sans-serif |
| Mono | 'JetBrains Mono', 'Fira Code', monospace |
| Display | 'Outfit', 'Poppins', sans-serif |
Type Scale
| Class | Size | Use |
|---|---|---|
text-xs | 0.75rem | Labels, captions |
text-sm | 0.875rem | Secondary text |
text-base | 1rem | Body text |
text-lg | 1.125rem | Lead text |
text-xl+ | 1.25rem+ | Headings |
---
9. Animation & Transitions
Built-in Animations
| Class | Effect |
|---|---|
animate-spin | Continuous rotation |
animate-ping | Attention pulse |
animate-pulse | Subtle opacity pulse |
animate-bounce | Bouncing effect |
Transition Patterns
| Pattern | Classes |
|---|---|
| All properties | transition-all duration-200 |
| Specific | transition-colors duration-150 |
| With easing | ease-out or ease-in-out |
| Hover effect | hover:scale-105 transition-transform |
---
10. Component Extraction
When to Extract
| Signal | Action |
|---|---|
| Same class combo 3+ times | Extract component |
| Complex state variants | Extract component |
| Design system element | Extract + document |
Extraction Methods
| Method | Use When |
|---|---|
| React/Vue component | Dynamic, JS needed |
| @apply in CSS | Static, no JS needed |
| Design tokens | Reusable values |
---
11. Anti-Patterns
| Don't | Do |
|---|---|
| Arbitrary values everywhere | Use design system scale |
!important | Fix specificity properly |
Inline style= | Use utilities |
| Duplicate long class lists | Extract component |
| Mix v3 config with v4 | Migrate fully to CSS-first |
Use @apply heavily | Prefer components |
---
12. Performance Principles
| Principle | Implementation |
|---|---|
| Purge unused | Automatic in v4 |
| Avoid dynamism | No template string classes |
| Use Oxide | Default in v4, 10x faster |
| Cache builds | CI/CD caching |
---
Remember: Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kHow it compares
Pick tailwind-patterns when adopting Tailwind v4 CSS-first config; use general CSS architecture skills when Tailwind is not in the stack.
FAQ
What replaces tailwind.config.js in Tailwind v4?
Tailwind CSS v4 replaces tailwind.config.js with CSS-based @theme directives for configuration. The skill documents this shift plus the move from a PostCSS plugin to the Oxide engine.
Does tailwind-patterns cover container queries?
tailwind-patterns covers container queries, design-token architecture, and modern v4 utility patterns. It targets developers building layouts without legacy v3 configuration habits.
Which tools can agents use with tailwind-patterns?
tailwind-patterns allows Read, Write, Edit, Glob, and Grep so agents can inspect and edit project CSS files while applying v4 @theme and container-query patterns.
Is Tailwind Patterns safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.