Does this skill support Tailwind CSS v3?

While the skill focuses on v4's modern CSS-first approach, it includes documentation on the differences and guidance for migrating from v3 legacy configurations.

What is the benefit of the @theme directive?

The @theme directive allows for configuration directly in CSS, which leverages native CSS variables and enables the 10x faster Rust-based Oxide engine.

How does it handle container queries?

It utilizes Tailwind v4's native @container syntax, allowing components to respond to their parent element's width rather than just the viewport.

Does this help with accessibility and color contrast?

Yes, by utilizing OKLCH color spaces, it helps create perceptually uniform color palettes that are easier to manage for accessible design.

Is @apply still recommended in Tailwind v4?

The skill follows v4 best practices which generally discourage heavy @apply usage in favor of utility classes and component extraction in frameworks like React or Vue.

Tailwind CSS v4 Patterns

Name: Tailwind CSS v4 Patterns
Author: claudiodearaujo

byclaudiodearaujo

Design Tools

Implements modern, high-performance Tailwind CSS v4 styling patterns using CSS-native configuration and design token architecture.

About

This skill equips Claude with the latest Tailwind CSS v4 principles to build responsive, accessible, and performant user interfaces. It emphasizes the shift to CSS-first configuration via the @theme directive, utilizes the high-speed Oxide engine, and leverages modern features like native container queries and OKLCH color spaces. By following these patterns, developers can move away from legacy JavaScript configurations and embrace a more native, utility-first approach that simplifies design system management, improves build performance, and ensures code follows 2025 industry standards.

Key Features

CSS-native configuration using the @theme directive for design tokens
0 GitHub stars
Modern layout patterns including asymmetric Bento grids and flex stacks
Optimized mobile-first responsive strategies and dark mode patterns
Perceptually uniform color systems using OKLCH and semantic tokens
Native container queries for context-independent responsive design

Use Cases

Building complex, context-aware components using native container queries
Migrating legacy Tailwind CSS v3 projects to the v4 CSS-first architecture
Establishing a scalable design system with semantic tokens and spacing scales

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill

GitHub