skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

tailwind-patterns

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

1|Updated Aug 17, 2025
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/ratnesh-maurya/mdconverter --skill tailwind-patterns-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/tailwind-patterns
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill tailwind-patterns-ratnesh-maurya

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 guidance on modern patterns like container queries, OKLCH colors, and design token architecture. ## Core Features & Use Cases - CSS-First Configuration: Define themes, colors, spacing, and typography using the @theme directive instead of tailwind.config.js. - Modern Layout Patterns: Apply container queries, Bento grid layouts, and mobile-first responsive breakpoints for component-level design. - Design Token Architecture: Structure primitive, semantic, and component-level color tokens using OKLCH for perceptually uniform palettes. - 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:) to make the component context-independent. ## Quick Start Ask the AI to configure a Tailwind v4 theme with semantic color tokens and a container-query-based responsive card component.

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 placed directly in your CSS file. Define colors, spacing, and fonts as CSS variables like --color-primary inside @theme, and the JavaScript config file becomes optional.

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, container queries respond to the parent element's width, making components context-independent and reusable.

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 design tokens are exposed as CSS variables.

Does Tailwind v4 support dark mode with a custom selector?▼

Yes, Tailwind v4 supports class-based, media-based, and custom selector dark mode strategies. Use the class method with a .dark toggle for manual theme switchers, or media to follow the user's system preference automatically.

When should I extract Tailwind classes into components?▼

Extract a component when the same class combination appears three or more times, when complex state variants are involved, or when the element is part of a design system. Prefer React or Vue components over heavy @apply usage.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
RodrigoTomeESRodrigoTomeES
12

tailwind-design-system

Standardize Tailwind CSS v4 design systems with CSS-first semantic tokens and reusable variants.

Community
Advanced
telum-aitelum-ai
2

visual-testing-web

Run visual regression tests across breakpoints and states with Playwright.

Official
Intermediate
Duy-Nguyen-2006Duy-Nguyen-2006

ck:ui-styling

Style web application UIs with shadcn/ui components and Tailwind CSS.

Community
Advanced