skills.rest
rafaelminatto1
rafaelminatto1COMMUNITY
Explore all skills by this author →
GitHub

tailwind-patterns

Apply Tailwind v4 CSS-first patterns with container queries and design tokens.

Updated Sep 2, 2025
Search Tags:#tailwind#responsive-design#design-tokens#container-queries#css-first#tailwind-v4
One-click install
npx skills add https://github.com/rafaelminatto1/fisioflow-51658291 --skill tailwind-patterns-rafaelminatto1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/rafaelminatto1/fisioflow-51658291/tree/main/.agent/skills/tailwind-patterns
Command: npx skills add https://github.com/rafaelminatto1/fisioflow-51658291 --skill tailwind-patterns-rafaelminatto1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind v4 patterns are often used without a CSS-first design system; this Skill provides a structured approach to adopting a CSS-first Tailwind v4 workflow, enabling scalable styling across projects.

Core Features & Use Cases

  • CSS-first architecture: configure styles in CSS using a token-driven approach with CSS variables.
  • Container queries & responsive patterns: implement context-aware components using native container queries.
  • Design token system: establish color, spacing, and typography tokens for consistency across brands and apps.
  • Use Case: migrate a React component library from a JS-heavy setup to a CSS-first system that supports multiple themes.

Quick Start

Start by introducing a CSS-first Tailwind v4 workflow using the @theme-based 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 set up a CSS-first Tailwind v4 design system?▼

Set up a CSS-first Tailwind v4 design system by using @theme-based configuration to define CSS variables, establishing a scalable design-token system for color, spacing, and typography across components.

What is the best way to implement responsive container queries in Tailwind v4?▼

Implement responsive container queries in Tailwind v4 using native container queries to build context-aware components, replacing viewport-only breakpoints with CSS-first patterns for dynamic layouts.

Can I migrate a React component library to a CSS-first Tailwind v4 workflow?▼

You can migrate a React component library to a CSS-first Tailwind v4 workflow by moving JavaScript-heavy configurations into @theme-based CSS variables and token-driven theming for multiple brand themes.

How do design tokens work with Tailwind v4 CSS variables?▼

Design tokens work with Tailwind v4 CSS variables by defining color, spacing, and typography values within the @theme configuration, ensuring consistent token-based theming across your web project components.

When should I use CSS-first configuration over JavaScript config in Tailwind?▼

Use CSS-first configuration over JavaScript config in Tailwind when you need a scalable design-token system with native container queries, reducing JS overhead for multi-theme and responsive component architecture.

Related Skills

Explore More Design & Creative Skills→
grasberggrasberg
3

tailwind-patterns

Adopt a CSS-first Tailwind v4 approach with token-driven theming and container queries.

Community
Intermediate
jiaiyanjiaiyan
8

n-element

Expose Naive UI theme CSS variables inside custom elements.

Community
Intermediate
hakushunhakushun

tailwind-design-system

Creates scalable design systems with Tailwind CSS v4 and semantic tokens.

Community
Advanced
shynlee04shynlee04

Frontend CSS

Enforce consistent CSS styling with Tailwind, BEM, and CSS Modules.

Community
Intermediate