tailwind-v4

What problem does it solve?

This Skill helps developers configure and utilize Tailwind CSS v4, a modern CSS framework that emphasizes CSS-first configuration, OKLCH colors, and efficient build processes.

Core Features & Use Cases

• Tailwind v4 Setup: Guides through Vite plugin integration and CSS entry points.
• Theming & Design Tokens: Demonstrates the @theme directive for defining colors, spacing, fonts, and animations using OKLCH.
• Dark Mode Strategies: Explains media query, class-based, and attribute-based approaches for implementing dark mode.
• Use Case: Quickly set up a new project with Tailwind v4, define a custom color palette using OKLCH, and implement a user-toggleable dark mode.

Quick Start

Configure your Vite project to use Tailwind CSS v4 by adding the @tailwindcss/vite plugin to your vite.config.ts file.