How do I trigger this skill in Claude?

It triggers automatically when you mention Tailwind v4, use @theme directives, or work with CSS variables prefixed with --color-.

Does this skill help with color systems?

Yes, it provides specific guidance on using the OKLCH color format for perceptually uniform and consistent design tokens.

What is the main difference between Tailwind v3 and v4 in this skill?

This skill focuses on the shift from JavaScript configuration (tailwind.config.js) to CSS-native configuration using the @theme directive and Vite-first builds.

Does it support performance optimization?

Yes, it explains when to use @theme inline versus default to optimize CSS variable overhead and runtime performance.

Tailwind CSS v4 Stylist

Name: Tailwind CSS v4 Stylist
Author: existential-birds

byexistential-birds

•

デザインツール

Implements modern CSS-first styling using Tailwind CSS v4 configuration patterns and OKLCH color systems.

概要

This skill empowers Claude to architect frontend styles using Tailwind CSS v4's latest features, shifting from JavaScript-based configuration to a CSS-native approach. It provides comprehensive guidance on utilizing the @theme directive, implementing perceptually uniform OKLCH colors, and configuring the @tailwindcss/vite plugin. Whether you are migrating from v3 or starting a fresh project, this skill ensures best practices for design tokens, semantic variable mapping, and high-performance CSS generation without the need for traditional config files.

主な機能

CSS-native configuration via the @theme directive
Optimized theme modes including inline, reference, and default
Implementation of high-fidelity OKLCH color palettes
Standardized CSS variable naming for design tokens
14 GitHub stars
Automated Vite plugin setup and @import integration

ユースケース

Setting up a new Vite-based project with optimized Tailwind performance
Creating accessible and consistent color systems using OKLCH
Migrating a project from Tailwind v3 to the v4 CSS-first architecture

概要

主な機能

CSS-native configuration via the @theme directive
Optimized theme modes including inline, reference, and default
Implementation of high-fidelity OKLCH color palettes
Standardized CSS variable naming for design tokens
14 GitHub stars
Automated Vite plugin setup and @import integration

ユースケース

Setting up a new Vite-based project with optimized Tailwind performance
Creating accessible and consistent color systems using OKLCH
Migrating a project from Tailwind v3 to the v4 CSS-first architecture