skills.rest
cpvasques
cpvasquesCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-patterns

Automate Tailwind CSS v4 CSS-first patterns with token-based theming and container queries.

4|Updated Nov 17, 2023
Search Tags:#frontend#tailwind#responsive-design#design-tokens#container-queries#css-first
One-click install
npx skills add https://github.com/cpvasques/vue-template --skill tailwind-patterns-cpvasques
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/cpvasques/vue-template/tree/main/.cursor/skills/tailwind-patterns
Command: npx skills add https://github.com/cpvasques/vue-template --skill tailwind-patterns-cpvasques

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines adopting Tailwind CSS v4 with a CSS-first workflow, container queries, and token-based design systems.

Core Features & Use Cases

  • CSS-first configuration: define tokens and themes in CSS using @theme and CSS variables.
  • Container queries and responsive patterns: use @container and named containers for component-level responsiveness.
  • Design token architecture: semantic tokens, component tokens, and theme customization.
  • Migration guidance: guidance to migrate from v3 to v4.

Quick Start

Initialize a Tailwind v4 project with CSS-first theming and container queries, then implement a sample component using semantic CSS tokens.

Frequently Asked Questions about tailwind-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Tailwind CSS v3 themes to v4 CSS-first configuration?▼

Container queries in Tailwind v4 enable component-level responsiveness using @container and named containers. This CSS-first approach replaces viewport queries, allowing UI components to adapt independently to their parent container size rather than the entire screen width.

What is the best way to structure design tokens in Tailwind v4?▼

The best way to structure design tokens in Tailwind v4 is through a semantic token architecture using CSS variables within @theme. You define semantic tokens and component tokens to establish a customizable, token-based theming system directly in your stylesheets.

Can I use Tailwind v4 CSS-first patterns without JavaScript configuration?▼

Yes, you can use Tailwind v4 CSS-first patterns without JavaScript configuration. The architecture enforces defining themes and tokens entirely within CSS using @theme, eliminating the need for a traditional JS config file while maintaining scalable design system capabilities.

How does a CSS-first architecture handle responsive component design?▼

A CSS-first architecture handles responsive component design by leveraging container queries and design tokens. You create component-level responsiveness using @container rules, ensuring components adapt their layout based on their immediate container rather than global viewport breakpoints.

Related Skills

Explore More Design & Creative Skills→
sawzhangsawzhang
3

web-artifacts-builder

Bundle React, Tailwind CSS, and shadcn/ui frontend projects into a single self-contained HTML file for Claude conversations.

Community
Advanced
pitabwirepitabwire

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate
jfrometajfrometa

tailwind-patterns

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

Community
Advanced
NITRR-OfficialNITRR-Official
4

tailwind-design-system

Create and implement design systems with Tailwind CSS v4.

Official
Intermediate