Tailwind CSS v4 — Utility-First CSS Framework

/* v3 — @tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* v4 — single import */
@import "tailwindcss";

/* v3 — tailwind.config.js */
module.exports = {
  theme: {
    extend: { colors: { brand: '#1e40af' } }
  }
}

/* v4 — CSS-first config trong file CSS */
@import "tailwindcss";

@theme {
  --color-brand: #1e40af;
  --color-brand-light: oklch(0.7 0.15 250);
}

# Vite
npm install tailwindcss @tailwindcss/vite

# Next.js (PostCSS plugin vẫn hỗ trợ)
npm install tailwindcss @tailwindcss/postcss

# Nuxt
npx nuxi module add @nuxtjs/tailwindcss

# CDN — dùng thử nhanh (không khuyến nghị production)
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

/* main.css — file CSS chính */
@import "tailwindcss";

@theme {
  --color-primary: oklch(0.55 0.2 250);
}

<!-- Hello World — dùng thử ngay -->
<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded-2xl shadow-lg text-center">
    <h1 class="text-3xl font-bold text-primary mb-4">
      Tailwind CSS v4
    </h1>
    <p class="text-gray-600">Utility-first CSS, Rust-powered.</p>
  </div>
</div>