What color formats are recommended?

The skill emphasizes the OKLCH color space for its perceptual uniformity and modern browser support, moving away from legacy HSL/RGB.

How does Tailwind v4 differ from v3 in this skill?

Tailwind v4 moves configuration from JavaScript files to CSS-native @theme directives and uses the Oxide engine for 10x faster builds.

Can I still use @apply with this skill?

While @apply still works in v4, this skill encourages component extraction or utility-first patterns as the primary best practice.

Is dark mode support included?

Yes, it provides standardized patterns for light and dark mode transitions using classes, media queries, or custom selectors.

Does this skill support container queries?

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

Tailwind CSS v4 Patterns

Name: Tailwind CSS v4 Patterns
Author: claudiodearaujo

byclaudiodearaujo

•

Design Tools

Implements modern utility-first styling using Tailwind CSS v4's CSS-native configuration and high-performance Oxide engine.

This skill equips Claude with the latest architectural principles for Tailwind CSS v4, facilitating a transition from legacy JavaScript-based configurations to a modern, CSS-first approach. It provides expert guidance on leveraging the Rust-based Oxide engine, native container queries, and OKLCH color systems to create high-performance, maintainable frontend interfaces. By following these patterns, developers can implement semantic design tokens, responsive bento layouts, and sophisticated dark mode strategies that align with 2025 web standards.

Key Features

01Modern color architecture utilizing perceptually uniform OKLCH values

021 GitHub stars

03Implementation of native container queries for component-level responsiveness

04Standardized mobile-first breakpoint systems and dark mode strategies

05CSS-native theme configuration using the @theme directive

06Optimized layout patterns including Grid, Flexbox, and Bento styles

Use Cases

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

02Establishing a scalable design system using semantic CSS variables and tokens

03Building context-independent UI 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

Download Skill