Configuring Tailwind v4

Purpose

Configure Tailwind CSS v4 using modern CSS-first configuration. Tailwind v4 eliminates JavaScript configuration files in favor of CSS-based setup using @import and @theme directives.

Installation Methods

Vite Projects (Recommended)

Step 1: Install Dependencies

npm install tailwindcss @tailwindcss/vite

Step 2: Configure Vite Plugin

Add the Tailwind plugin to vite.config.js: