tailwind-patterns
Helps your agent use modern Tailwind CSS principles. It focuses on configuration, design tokens, and visual patterns. Creates efficient and well-structured interfaces.
What it does
This tool helps configure and use the latest Tailwind CSS features, like styling elements directly in CSS, using smaller screen sizes for individual components, and creating modern layouts.
When to use it
- ✓When configuring Tailwind CSS version 4.
- ✓When defining colors, spacing, and fonts in an organized way.
- ✓When creating designs that adapt to different screen sizes or specific parts of the page.
Example of what to ask your AI
“How do I set up primary and secondary colors using the new token system?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
You can define styles directly in CSS files using the `@theme` directive. This allows for more efficient organization of colors, fonts, and spacing, and enables new features like 'container queries' to adapt components.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill tailwind-patternsOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/tailwind-patterns/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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;
--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
- Write mobile styles first (no prefix)
- Add larger screen overrides with prefixes
- 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
…
FAQ
What's the difference between 'breakpoint' and 'container query'?
Breakpoints refer to the entire screen size, while container queries refer to the size of the parent element, allowing components to adapt independently of the page size.
How do I make my site automatically go dark when the operating system is in dark mode?
You can configure dark mode to follow the system preference using the 'media' strategy in the Tailwind configuration.
What are 'design tokens'?
These are variables representing design values, like colors and spacing. They help maintain visual consistency and make it easier to update styles throughout the project.
Details
Original description by the author
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
Popularity
- GitHub stars
- 48k
- Ranking position
- #4308
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
brand-discovery
Helps define a brand's identity through structured interviews. It creates a complete guide with the brand's purpose, audience, and personality.
affaan-m/ECC
brand-voice
Creates a writing profile based on actual brand texts. It ensures content and communications maintain a consistent and authentic style.
affaan-m/ECC
brand-guidelines
Has your agent apply Anthropic's brand colors and visual style to materials. It's useful for maintaining the company's visual identity across projects.
anthropics/skills