Bài 9. Chế độ tối, @utility, @apply, plugin

Một số khái niệm

Mặc định dark: theo prefers-color-scheme của hệ điều hành. Muốn bật tắt bằng nút, khai báo lại variant: @custom-variant dark (&:where(.dark, .dark *)); rồi thêm/bỏ class dark trên thẻ html.

Chế độ tối bằng nút

<style type="text/tailwindcss">@custom-variant dark (&:where(.dark, .dark *));</style>
<div id="ui" class="rounded-2xl bg-white p-5 text-slate-800 ring-1 ring-slate-200 dark:bg-slate-900 dark:text-slate-100 dark:ring-slate-700">
  <div class="flex items-center justify-between"><b>Giao diện</b>
    <button class="rounded-lg bg-slate-100 px-3 py-1 text-sm dark:bg-slate-700" onclick="document.getElementById('ui').classList.toggle('dark')">Đổi sáng/tối</button></div>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">Mỗi lớp màu có cặp dark: tương ứng.</p>
  <span class="mt-3 inline-block rounded-full bg-green-100 px-2 py-1 text-xs text-green-800 dark:bg-green-900 dark:text-green-200">Tailwind v4</span>
</div>

@utility, @custom-variant, @apply

@import "tailwindcss";

/* Lớp tiện ích riêng: dùng được với mọi variant (hover:, md:...) */
@utility an-thanh-cuon {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}
@utility container-doc {
  margin-inline: auto;
  max-width: 72ch;
  padding-inline: 1rem;
}

/* Variant riêng */
@custom-variant da-chon (&[aria-selected="true"]);
/* <li class="da-chon:bg-green-100"> */

/* @apply: gom lớp cho HTML không kiểm soát được (nội dung CMS, markdown) */
@layer components {
  .noi-dung-bai a { @apply text-green-700 underline underline-offset-2 hover:text-green-900; }
}

Chỉ dùng @apply khi không thể gắn lớp trực tiếp (nội dung sinh từ CMS, thư viện bên thứ ba). Lạm dụng @apply biến Tailwind trở lại thành CSS truyền thống và mất lợi ích utility-first.

Plugin chính thức

npm install -D @tailwindcss/typography @tailwindcss/forms

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

<article class="prose prose-slate max-w-none prose-a:text-green-700">
  <h3>Lớp prose định dạng nội dung bài viết</h3>
  <p>Plugin <a href="#">typography</a> tự định dạng tiêu đề, đoạn văn, <code>code</code>, danh sách, trích dẫn cho nội dung từ Markdown hoặc CMS.</p>
  <ul><li>Không cần thêm lớp cho từng thẻ</li><li>Có biến thể prose-lg, dark:prose-invert</li></ul>
</article>

Ví dụ trên chạy bằng CDN nên không có plugin typography; trong dự án thật sau khi cài plugin, đoạn văn sẽ được định dạng đẹp tự động.