skills.rest
virahitvin8
virahitvin8COMMUNITY
Explore all skills by this author →
GitHub

tailwind-patterns

Implements Tailwind CSS v4 patterns including CSS-first configuration, container queries, and design tokens.

2|Updated May 30, 2026
Search Tags:#responsive design#design tokens#tailwind css#dark mode#css-first#frontend styling#container queries
One-click install
npx skills add https://github.com/virahitvin8/crafty-gis --skill tailwind-patterns-virahitvin8
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/virahitvin8/crafty-gis/tree/main/GIT_STAR/.agent/skills/tailwind-patterns
Command: npx skills add https://github.com/virahitvin8/crafty-gis --skill tailwind-patterns-virahitvin8

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers migrating to or building with Tailwind CSS v4 often struggle with the shift from JavaScript-based configuration to CSS-first architecture, and lack clear guidance on modern patterns like container queries, OKLCH colors, and design token systems. ## Core Features & Use Cases - CSS-First Configuration: Define themes, colors, spacing, and typography using the @theme directive instead of tailwind.config.js. - Modern Responsive Patterns: Apply container queries, mobile-first breakpoints, and dark mode strategies for component-level responsive design. - Design Token Architecture: Structure primitive, semantic, and component-level tokens with OKLCH colors for consistent design systems. - Use Case: When building a reusable card component that must adapt to its parent width rather than the viewport, use the container query patterns to define @container on the parent and @md: variants on children. ## Quick Start Ask the AI to refactor a component using Tailwind CSS v4 patterns with CSS-first theme configuration and container queries.

Frequently Asked Questions about tailwind-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Tailwind CSS v4 without tailwind.config.js?▼

Tailwind v4 uses CSS-first configuration through the `@theme` directive in your stylesheet. Define colors, spacing, and fonts as CSS variables like `--color-primary` directly in CSS, replacing the JavaScript config file entirely.

How do container queries work in Tailwind CSS v4?▼

Add `@container` to a parent element, then use container breakpoints like `@sm:`, `@md:`, and `@lg:` on children. Unlike viewport breakpoints, these respond to the parent element's width, making components context-independent.

What is the difference between Tailwind v3 and v4?▼

Tailwind v4 replaces `tailwind.config.js` with CSS-based `@theme` configuration, uses the Rust-based Oxide engine for faster builds, and supports native CSS nesting. JIT mode is always on, and all tokens are exposed as CSS variables.

Should I use @apply in Tailwind CSS v4?▼

The `@apply` directive still works in v4 but is discouraged for heavy use. Prefer extracting repeated class combinations into framework components or design tokens instead of creating large `@apply` blocks in CSS.

When should I use container queries instead of breakpoints?▼

Use container queries for reusable components that must adapt to their parent width, such as cards or widgets placed in varying layouts. Use viewport breakpoints for page-level layouts that respond to overall screen size.

Related Skills

Explore More Software Engineering Skills→
CodeAtCodeCodeAtCode
14

tailwind

Configure Tailwind v4 design tokens with CSS-first @theme variables.

Official
Advanced
rizaldiemrizaldiem

tailwind-css-patterns

Provide Tailwind CSS utility-first patterns for responsive interfaces and reusable components.

Community
Intermediate
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
TheOrcDevTheOrcDev
2.0k

retro-css-architecture

Organize CSS for 8-bit components with custom properties and pixel fonts.

Community
Basic