skills.rest
WP-Coaching
WP-CoachingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tailwind-patterns

Implements Tailwind CSS v4 styling patterns with CSS-first configuration and container queries.

Updated Sep 1, 2021
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/WP-Coaching/pellegrims.coach --skill tailwind-patterns-wp-coaching
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/WP-Coaching/pellegrims.coach/tree/main/.agents/skills/tailwind-patterns
Command: npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill tailwind-patterns-wp-coaching

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It provides a structured reference for applying Tailwind CSS v4 correctly, covering the migration from v3 config files to CSS-first @theme configuration, container queries, dark mode, and modern layout patterns so developers avoid outdated v3 habits and anti-patterns. ## Core Features & Use Cases - CSS-First Configuration: Defines design tokens with the @theme directive, including OKLCH colors, spacing scales, and typography stacks. - Container Queries & Responsive Design: Explains when to use @container breakpoints versus viewport breakpoints for component-level responsiveness. - Layout & Anti-Pattern Guidance: Documents flexbox, grid, and Bento layout patterns plus a list of anti-patterns to avoid, such as arbitrary values and heavy @apply usage. - Use Case: When building a responsive card component in a Next.js project, use this Skill to apply container queries, semantic color tokens, and dark mode variants following v4 conventions. ## Quick Start Ask the AI to style a responsive card component using Tailwind CSS v4 patterns with container queries and dark mode support.

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 a config file?▼

Tailwind v4 uses CSS-first configuration with the @theme directive instead of tailwind.config.js. Define colors, spacing, and fonts as CSS variables like --color-primary directly in your stylesheet, and the Oxide engine picks them up natively.

How do I use container queries in Tailwind CSS?▼

Add the @container class to a parent element, then use container breakpoint prefixes like @sm: or @md: on child elements. Container queries respond to the parent width rather than the viewport, making components context-independent.

What is the difference between Tailwind v3 and v4?▼

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

Does Tailwind v4 support dark mode?▼

Yes, Tailwind v4 supports dark mode through class-based toggling, media queries following system preference, or a custom selector strategy. Apply variants like dark:bg-zinc-900 alongside light base classes for each themed element.

When should I extract components instead of repeating Tailwind classes?▼

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 components over @apply for dynamic behavior.

Related Skills

Explore More Software Engineering Skills→
wfvuewfvue
3

tailwindcss

Apply Tailwind CSS v4 utilities with Vite plugin integration for responsive and dark mode styling.

Community
Intermediate
zai-orgzai-org
447

impeccable

Designs, audits, and refines production-grade frontend interfaces through structured design commands.

Official
Advanced
kobogithubkobogithub

uiux-viewport-testing

Automate responsive design testing by resizing browser viewports and capturing screenshots.

Community
Intermediate
videojsvideojs
931

migrate-css-to-tailwind

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

Official
Intermediate