tailwind-v4

SKILL.md

CSS-first Tailwind v4 configuration using @theme directives, OKLCH colors, and design tokens without config files.

Configure theme entirely in CSS via @theme directives (default, inline, or reference modes) instead of tailwind.config.js

Use OKLCH color format for perceptually uniform colors with L (lightness), C (chroma), and H (hue) parameters

Vite plugin setup (@tailwindcss/vite) replaces PostCSS; no postcss.config.js needed

CSS variable naming conventions for colors, spacing, fonts, breakpoints, and animations with double-dash prefixes

Tailwind CSS v4 Best Practices

Quick Reference

Vite Plugin Setup:

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [tailwindcss()],
});