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.
主な機能
01CSS-native configuration via the @theme directive
02Optimized theme modes including inline, reference, and default
03Implementation of high-fidelity OKLCH color palettes
04Standardized CSS variable naming for design tokens
0514 GitHub stars
06Automated Vite plugin setup and @import integration
ユースケース
01Setting up a new Vite-based project with optimized Tailwind performance
02Creating accessible and consistent color systems using OKLCH
03Migrating a project from Tailwind v3 to the v4 CSS-first architecture
