Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
sickn33 avatar

Tailwind Patterns

sickn33/antigravity-awesome-skills

  • 1.3k installs
  • 44.4k repo stars
  • Updated August 4, 2026
  • sickn33/antigravity-awesome-skills

tailwind-patterns provides documented workflows for Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

About

The tailwind-patterns skill tailwind CSS v4 principles CSS-first configuration container queries modern patterns design token architecture 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 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

  • Write mobile styles first (no prefix)
  • Add larger screen overrides with prefixes
  • Example: `w-full md:w-1/2 lg:w-1/3`
  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.

Tailwind Patterns by the numbers

  • 1,256 all-time installs (skills.sh)
  • +33 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #193 of 1,039 Mobile Development skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

tailwind-patterns capabilities & compatibility

Capabilities
write mobile styles first (no prefix) · add larger screen overrides with prefixes · example: `w full md:w 1/2 lg:w 1/3` · use this skill only when the task clearly matche · do not treat the output as a substitute for envi
Use cases
documentation
From the docs

What tailwind-patterns says it does

# Tailwind CSS Patterns (v4 - 2025) > Modern utility-first CSS with CSS-native configuration.
SKILL.md
## 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.
SKILL.md
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill tailwind-patterns

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1.3k
repo stars★ 44.4k
Security audit3 / 3 scanners passed
Last updatedAugust 4, 2026
Repositorysickn33/antigravity-awesome-skills ↗

How do I use tailwind-patterns for the task described in its SKILL.md triggers?

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

Who is it for?

Teams invoking tailwind-patterns when the user request matches documented triggers and prerequisites.

Skip if: Skip when cached docs are missing, the request is a negative trigger, or another sibling skill owns the workflow.

When should I use this skill?

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

What you get

Step-by-step guidance grounded in tailwind-patterns documentation and reference files.

  • @theme CSS configuration
  • container-query utility patterns
  • design-token structure

Files

SKILL.mdMarkdownGitHub ↗

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.jsCSS-based @theme directive
PostCSS pluginOxide engine (10x faster)
JIT modeNative, always-on
Plugin systemCSS-native features
@apply directiveStill 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 togglesManual theme switcher
mediaFollows system preferenceNo user control
selectorCustom selector (v4)Complex theming

Dark Mode Pattern

ElementLightDark
Backgroundbg-whitedark:bg-zinc-900
Texttext-zinc-900dark:text-zinc-100
Bordersborder-zinc-200dark:border-zinc-700

---

6. Modern Layout Patterns

Flexbox Patterns

PatternClasses
Center (both axes)flex items-center justify-center
Vertical stackflex flex-col gap-4
Horizontal rowflex gap-4
Space betweenflex justify-between items-center
Wrap gridflex flex-wrap gap-4

Grid Patterns

PatternClasses
Auto-fit responsivegrid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]
Asymmetric (Bento)grid grid-cols-3 grid-rows-2 with spans
Sidebar layoutgrid 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-500Raw color values
Semantic--color-primaryPurpose-based naming
Component--button-bgComponent-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-xs0.75remLabels, captions
text-sm0.875remSecondary text
text-base1remBody text
text-lg1.125remLead text
text-xl+1.25rem+Headings

---

9. Animation & Transitions

Built-in Animations

ClassEffect
animate-spinContinuous rotation
animate-pingAttention pulse
animate-pulseSubtle opacity pulse
animate-bounceBouncing effect

Transition Patterns

PatternClasses
All propertiestransition-all duration-200
Specifictransition-colors duration-150
With easingease-out or ease-in-out
Hover effecthover: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
!importantFix specificity properly
Inline style=Use utilities
Duplicate long class listsExtract component
Mix v3 config with v4Migrate fully to CSS-first
Use @apply heavilyPrefer 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.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Related skills

firebaseXcode Project SetupAutomatically create and configure a new Xcode project with Swift Package Manager dependencies for iOS or macOS agent projects.74.7k392expoExpo Tailwind SetupInstantly configure Tailwind CSS v4 with NativeWind v5 and react-native-css inside an Expo project for universal styling.46.7k2.3kexpoExpo Dev ClientCreate custom development clients for Expo React Native apps that need native modules or Apple-specific targets.45.9k2.3kavdleeSwiftui Expert SkillGet expert guidance when writing, reviewing, or refactoring SwiftUI views, state, performance, and modern iOS/macOS APIs.27.6k3.3kflutterFlutter Apply Architecture Best PracticesEnforce clean layered architecture when creating or refactoring a Flutter mobile application.25.4k2.7kexpoExpo ModuleCreate custom config plugins that safely modify native Android and iOS projects generated by Expo prebuild.25k2.3k

FAQ

What does tailwind-patterns do?

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

When should I use tailwind-patterns?

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

What are common prerequisites?

--- name: tailwind-patterns description: "Tailwind CSS v4 principles.

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.

Mobile Developmentfrontend
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.