Tailwind CSS 4.x

Platform: Web (Tailwind CSS 4.x). For mobile styling, see the nativewind skill (Tailwind 3.x for React Native).

Overview

Utility-first CSS framework for rapid UI development. Tailwind CSS 4.x introduces a CSS-first configuration approach, automatic content detection, and improved performance with a new engine.

Install: pnpm add -D tailwindcss @tailwindcss/vite

Key Changes in v4

Tailwind CSS 4.x is fundamentally different from v3:

• CSS-first configuration - Use @theme in CSS instead of tailwind.config.js
• Single import - Use @import "tailwindcss" instead of separate directives
• Automatic content detection - No content array needed
• New color system - OKLCH colors with wide gamut support
• Built-in Vite plugin - @tailwindcss/vite for optimal integration