skills.rest
Hamzaoui-Louai
Hamzaoui-LouaiCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-patterns

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

1|Updated Aug 4, 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/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill tailwind-patterns-hamzaoui-louai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend/tree/main/.opencode/skills/tailwind-patterns
Command: npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill tailwind-patterns-hamzaoui-louai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It guides developers through the architectural changes in Tailwind CSS v4, replacing legacy JavaScript config files with CSS-first configuration and modern responsive patterns. ## Core Features & Use Cases - CSS-First Configuration: Define themes, colors, spacing, and typography using the @theme directive instead of tailwind.config.js. - Container Queries & Responsive Design: Apply native container queries (@container, @sm:) alongside mobile-first breakpoint strategies. - Design Token Architecture: Structure OKLCH color primitives, semantic tokens, and component-level variables for maintainable styling. - Use Case: When migrating a React project from Tailwind v3 to v4, use this Skill to convert the JS config into @theme CSS blocks and refactor components to use container queries. ## Quick Start Use the tailwind-patterns skill to convert my Tailwind v3 config into a v4 CSS-first theme with semantic color tokens.

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 in your stylesheet. Define colors, spacing, and fonts as CSS variables like --color-primary directly in CSS, replacing the legacy tailwind.config.js file.

What changed between Tailwind v3 and v4?▼

Tailwind v4 replaces the JavaScript config with CSS-based @theme configuration, uses the Rust-based Oxide engine for faster builds, and adds native CSS nesting and container queries. The @apply directive still works but is discouraged.

When should I use container queries instead of breakpoints in Tailwind?▼

Use container queries (@container, @sm:, @md:) for component-level responsiveness where elements respond to their parent's width. Use viewport breakpoints (md:, lg:) for page-level layouts that depend on screen size.

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

Yes, Tailwind v4 supports class-based, media-based, and custom selector dark mode strategies. Apply dark variants like dark:bg-zinc-900 and dark:text-zinc-100 to elements that should change with the theme.

Why should I avoid arbitrary values and @apply in Tailwind v4?▼

Arbitrary values bypass the design system scale, creating inconsistency, while heavy @apply usage duplicates utility logic in CSS. Prefer design tokens, semantic naming, and extracting repeated class combinations into components.

Related Skills

Explore More Software Engineering Skills→
VibeStackCodesVibeStackCodes

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in Vite React projects.

Official
Advanced
moughamirmoughamir

tailwindcss-advanced-components

Standardize Tailwind UI components with CVA variants and data-attribute states.

Community
Intermediate
MolcajeteAIMolcajeteAI
2

visual-regression

Automate visual regression testing with Playwright and Percy across browsers and viewports.

Official
Intermediate
SanketAdlakSanketAdlak

web-component-design

Implements reusable React, Vue, and Svelte components with composition patterns and CSS-in-JS styling.

Community
Advanced