Bài 2. Cài đặt Tailwind CSS v4

Một số khái niệm

Tailwind là công cụ quét mã nguồn (HTML, JS, PHP, JSX...) để tìm các tên lớp bạn dùng, rồi sinh ra tệp CSS chỉ chứa đúng các lớp đó. Vì vậy tên lớp phải viết đầy đủ trong mã; ghép chuỗi như "bg-" + mau + "-500" sẽ không được nhận ra.

Cách 1: CDN trình duyệt (chỉ để thử)

<!doctype html>
<html lang="vi">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-slate-50 p-8">
  <h1 class="text-3xl font-bold text-green-700">Xin chào Tailwind!</h1>
</body>
</html>

Cách này biên dịch trong trình duyệt nên chậm, chỉ dùng để học và thử nghiệm (các ví dụ trong loạt bài dùng cách này), không dùng cho website thật.

Cách 2: Vite (khuyên dùng cho dự án front-end)

npm create vite@latest du-an-tw -- --template vanilla
cd du-an-tw
npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({ plugins: [tailwindcss()] });

/* src/style.css */
@import "tailwindcss";

npm run dev

Nhập style.css trong main.js (Vite mẫu đã có). Với React, Vue, Next.js cách làm tương tự (Next.js dùng @tailwindcss/postcss, xem loạt Next.js).

Cách 3: Tailwind CLI (trang tĩnh, PHP, Laravel cũ)

npm install tailwindcss @tailwindcss/cli

/* src/input.css */
@import "tailwindcss";
@source "../templates";   /* (tùy chọn) chỉ định thêm thư mục chứa tệp .php để quét */

npx @tailwindcss/cli -i ./src/input.css -o ./public/css/app.css --watch
# Khi xuất bản:  npx @tailwindcss/cli -i ./src/input.css -o ./public/css/app.css --minify

<link rel="stylesheet" href="/css/app.css">