tailwind-patterns

Standardize Tailwind CSS v4 patterns with CSS-first configuration and YAML frontmatter.

1|Updated Dec 19, 2025

Search Tags:#theming #css #tailwind #tokens #design-system #responsive-design #container-queries

Ready to run

npx skills add https://github.com/fnsalinas/fnsalinas.github.io --skill tailwind-patterns-fnsalinas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/fnsalinas/fnsalinas.github.io/tree/main/.agent/skills/tailwind-patterns
Command: npx skills add https://github.com/fnsalinas/fnsalinas.github.io --skill tailwind-patterns-fnsalinas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind CSS v4 patterns provide a CSS-first approach to design-system configuration, enabling faster, more maintainable styling without heavy JavaScript configuration.

Core Features & Use Cases

CSS-first configuration: define tokens and themes directly in CSS using CSS variables and the @theme directive.
Container queries & responsive patterns: native container queries and breakpoint-based utilities for flexible components.
Design token architecture: semantic tokens and token layers to support scalable design systems.
Use Case: When building a component library, apply v4 patterns to ensure consistent styling with minimal JS.

Quick Start

Use the tailwind-patterns skill to architect a v4 CSS-first design system with tokens, 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 v4 tokens using a CSS-first approach?▼

Tailwind v4 CSS-first configuration lets you define design tokens directly in CSS using CSS variables and the @theme directive, replacing heavy JavaScript configuration files for faster and more maintainable styling architecture.

What is the best way to structure responsive design with Tailwind container queries?▼

Tailwind container queries enable responsive design by applying native breakpoint-based utilities directly to flexible components, ensuring layouts adapt to their parent container size rather than the viewport.

Does Tailwind v4 require JavaScript configuration for dark mode support?▼

Tailwind v4 dark mode support does not require heavy JavaScript configuration, allowing you to implement theme switching and semantic token layers entirely through CSS variables and the @theme directive.

How do I build a scalable design system architecture with Tailwind CSS?▼

Building a scalable design system architecture with Tailwind involves structuring semantic tokens and token layers in CSS, ensuring consistent styling across a component library with minimal JavaScript dependencies.

Can I use Tailwind v4 patterns for a component library without JavaScript dependencies?▼

Tailwind v4 patterns are explicitly designed for building component libraries with minimal JavaScript, utilizing CSS-first configuration and native container queries to ensure consistent styling without heavy JS dependencies.