How does this skill handle Tailwind v4 configuration?

It follows the modern CSS-first approach using the @theme directive, which replaces the traditional tailwind.config.js file with native CSS variables.

Does it support container queries?

Yes, it provides specific implementation patterns for native @container queries, allowing components to respond to their parent's size rather than the viewport.

Can I use this for dark mode implementation?

Absolutely. It includes strategies for media-based, class-based, and custom selector-based dark mode patterns optimized for v4.

What is the benefit of the Oxide engine mentioned in this skill?

The Oxide engine is a Rust-based compiler that is up to 10x faster than previous versions, providing a significantly improved developer experience and faster build times.

Why does this skill recommend OKLCH colors?

OKLCH is a perceptually uniform color space that provides better accessibility and design consistency compared to traditional HSL or RGB formats.

Tailwind CSS v4 Patterns

Name: Tailwind CSS v4 Patterns
Author: claudiodearaujo

byclaudiodearaujo

•

设计工具

Implements modern utility-first styling using Tailwind CSS v4 principles and CSS-native configurations.

This skill equips Claude with the architectural knowledge and implementation patterns required for Tailwind CSS v4. It emphasizes a CSS-first approach, moving away from legacy JavaScript-based configurations toward the Rust-powered Oxide engine for maximum performance. By using this skill, Claude can assist in defining themes via CSS variables, implementing native container queries for component-level responsiveness, and utilizing advanced OKLCH color spaces. It is an essential guide for developers building high-performance design systems or migrating projects to the 2025 Tailwind standards.

主要功能

01Modern layout patterns including Bento grids and CSS-native nesting

021 GitHub stars

03CSS-first theme configuration using the @theme directive

04Performance optimization leveraging the Rust-based Oxide engine

05Advanced color architecture using OKLCH and semantic design tokens

06Native container query implementation for component-level responsiveness

使用场景

01Migrating legacy Tailwind CSS v3 projects to the v4 CSS-native architecture

02Building scalable design systems with semantic tokens and CSS variable-based themes

03Developing context-independent responsive components using native container queries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro tailwind-patterns

For use in Claude.ai and ChatGPT

主要功能

01Modern layout patterns including Bento grids and CSS-native nesting

021 GitHub stars

03CSS-first theme configuration using the @theme directive

04Performance optimization leveraging the Rust-based Oxide engine

05Advanced color architecture using OKLCH and semantic design tokens

06Native container query implementation for component-level responsiveness

使用场景

01Migrating legacy Tailwind CSS v3 projects to the v4 CSS-native architecture

02Building scalable design systems with semantic tokens and CSS variable-based themes

03Developing context-independent responsive components using native container queries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro tailwind-patterns

For use in Claude.ai and ChatGPT