tailwind-patterns

Original：🇺🇸 English
Not Translated

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

1installs
Sourceneversight/skills_feed
Added on

NPX Install

npx skill4agent add neversight/skills_feed tailwind-patterns

SKILL.md Content

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 pluginOxide engine (10x faster)
JIT modeNative, always-on
Plugin systemCSS-native features
@apply
directive		Still works, discouraged

v4 Core Concepts

ConceptDescription
CSS-firstConfiguration in CSS, not JavaScript
Oxide EngineRust-based compiler, much faster
Native NestingCSS nesting without PostCSS
CSS VariablesAll 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

ActionUse When
ExtendAdding new values alongside defaults
OverrideReplacing default scale entirely
Semantic tokensProject-specific naming (primary, surface)

3. Container Queries (v4 Native)

Breakpoint vs Container

TypeResponds To
Breakpoint (
md:
)		Viewport width
Container (
@container
)		Parent element width

Container Query Usage

PatternClasses
Define container
@container
on parent
Container breakpoint
@sm:
, 
@md:
, 
@lg:
on children
Named containers
@container/card
for specificity

When to Use

ScenarioUse
Page-level layoutsViewport breakpoints
Component-level responsiveContainer queries
Reusable componentsContainer queries (context-independent)

4. Responsive Design

Breakpoint System

PrefixMin WidthTarget
(none)0pxMobile-first base
sm:
640pxLarge phone / small tablet
md:
768pxTablet
lg:
1024pxLaptop
xl:
1280pxDesktop
2xl:
1536pxLarge 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

MethodBehaviorUse When
class
.dark
class toggles		Manual theme switcher
media
Follows system preferenceNo user control
selector
Custom selector (v4)Complex theming

Dark Mode Pattern

ElementLightDark
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

PatternClasses
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

PatternClasses
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

FormatAdvantage
OKLCHPerceptually uniform, better for design
HSLIntuitive hue/saturation
RGBLegacy compatibility

Color Token Architecture

LayerExamplePurpose
Primitive
--blue-500
Raw color values
Semantic
--color-primary
Purpose-based naming
Component
--button-bg
Component-specific

8. Typography System

Font Stack Pattern

TypeRecommended
Sans
'Inter', 'SF Pro', system-ui, sans-serif
Mono
'JetBrains Mono', 'Fira Code', monospace
Display
'Outfit', 'Poppins', sans-serif

Type Scale

ClassSizeUse
text-xs
0.75remLabels, captions
text-sm
0.875remSecondary text
text-base
1remBody text
text-lg
1.125remLead text
text-xl
+		1.25rem+Headings

9. Animation & Transitions

Built-in Animations

ClassEffect
animate-spin
Continuous rotation
animate-ping
Attention pulse
animate-pulse
Subtle opacity pulse
animate-bounce
Bouncing effect

Transition Patterns

PatternClasses
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

SignalAction
Same class combo 3+ timesExtract component
Complex state variantsExtract component
Design system elementExtract + document

Extraction Methods

MethodUse When
React/Vue componentDynamic, JS needed
@apply in CSSStatic, no JS needed
Design tokensReusable values

11. Anti-Patterns

Don'tDo
Arbitrary values everywhereUse design system scale
!important
Fix specificity properly
Inline 
style=
Use utilities
Duplicate long class listsExtract component
Mix v3 config with v4Migrate fully to CSS-first
Use 
@apply
heavily		Prefer components

12. Performance Principles

PrincipleImplementation
Purge unusedAutomatic in v4
Avoid dynamismNo template string classes
Use OxideDefault in v4, 10x faster
Cache buildsCI/CD caching
Remember: Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.