skills.rest
singhaganesh
singhaganeshCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-patterns

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

Updated Jul 7, 2026
Search Tags:#responsive design#design tokens#tailwind css#oklch#css-first#frontend styling#container queries
One-click install
npx skills add https://github.com/singhaganesh/Urban-assist --skill tailwind-patterns-singhaganesh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/tailwind-patterns
Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill tailwind-patterns-singhaganesh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers migrating to or building with Tailwind CSS v4 often struggle with the shift from JavaScript config files to CSS-first configuration, and lack clear guidance on modern patterns like container queries, OKLCH colors, and design token architecture. ## Core Features & Use Cases - CSS-First Configuration: Define themes with the @theme directive using CSS variables instead of tailwind.config.js. - Modern Layout Patterns: Apply container queries, Bento grid layouts, and mobile-first responsive breakpoints. - Design Token Architecture: Structure colors with OKLCH primitives, semantic tokens, and component-level variables. - Use Case: When building a reusable card component that must adapt to its parent width rather than the viewport, use the container query patterns (@container, @sm:, @md:) documented in this Skill. ## Quick Start Ask the AI to refactor a component's styles using Tailwind v4 CSS-first 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 with the `@theme` directive inside 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 `@apply` is discouraged in favor of components.

Should I use OKLCH or HSL for Tailwind color tokens?▼

OKLCH is recommended because it is perceptually uniform, making color scales more consistent for design systems. Structure tokens in layers: primitive values, semantic names like `--color-primary`, and component-specific variables.

When should I extract Tailwind classes into components?▼

Extract when the same class combination appears three or more times, when complex state variants are involved, or when building design system elements. Prefer React or Vue components over heavy `@apply` usage for dynamic cases.

Related Skills

Explore More Software Engineering Skills→
Jicate-SolutionsJicate-Solutions

brand-styling

Implement standardized brand styling with Tailwind CSS and Next.js.

Official
Advanced
applewaveapplewave
1

phase-6-ui-integration

Automate UI implementation and API integration workflows connecting frontend components to backend services.

Community
Advanced
dev-giosdev-gios
1

qa-visual

Capture screenshots and analyze rendered elements for design system compliance.

Community
Advanced
videojsvideojs
931

migrate-css-to-tailwind

Migrate CSS, SCSS, and styled-components to Tailwind v4 utilities and theme tokens.

Official
Intermediate