@bug-on/md3-tailwind

Tailwind CSS v4 Plugin cho Material Design 3 Expressive.

Package này đóng vai trò cầu nối tích hợp hệ thống Material Design 3 Expressive vào hệ sinh thái Tailwind CSS của bạn thông qua việc tự động tạo các lớp tiện ích (utility classes) CSS tuân thủ nghiêm ngặt đặc tả từ Google. Được xây dựng và thiết kế tối ưu 100% cho cấu trúc của Tailwind CSS v4 (cấu hình ưu tiên CSS).

📦 Cài đặt

Cài đặt package độc lập (nếu bạn sử dụng @bug-on/md3-react thì package này đã được tự động đi kèm):

npm install @bug-on/md3-tailwind
# hoặc
pnpm add @bug-on/md3-tailwind

Yêu cầu phiên bản Tailwind CSS đi kèm:

npm install tailwindcss@^4.0.0

🛠️ Configuration & Setup (Tailwind CSS v4)

[!WARNING] This package only supports Tailwind CSS v4 (peer dependency tailwindcss: ">=4.0.0"). Tailwind CSS v3 is no longer supported.

In Tailwind CSS v4, the system uses a CSS-first architecture. You do not need to configure it using JS/TS files or declare @plugin. All MD3 theme colors, attributes, and utility classes are registered by importing them directly into your main CSS file (e.g., globals.css or index.css):

/* 1. Import core Tailwind CSS v4 */
@import "tailwindcss";

/* 2. Import the theme, resets, and utility system of MD3 Tailwind */
@import "@bug-on/md3-tailwind";

Note: When using @import "@bug-on/md3-tailwind";, the package automatically loads all dynamic MD3 color @theme variables and advanced utility classes. You do not need to manually import design tokens from @bug-on/md3-tokens or configure a JS plugin. Do NOT use @plugin in Tailwind v4.

🎨 Các Lớp Tiện Ích Được Hỗ Trợ

Sau khi khai báo plugin, bạn có quyền truy cập vào bộ utility classes mạnh mẽ bao gồm:

• M3 Colors (Màu sắc): Các lớp tiện ích ánh xạ trực tiếp đến hệ thống token động của MD3 (như m3-primary, m3-secondary, m3-surface). Ví dụ: bg-m3-primary, text-m3-on-primary, border-m3-outline.
• Elevation (Đổ bóng 3D): Hỗ trợ đầy đủ 5 cấp độ đổ bóng của Material Design 3. Ví dụ: shadow-m3-elevation-1, shadow-m3-elevation-3, shadow-m3-elevation-5.
• Shape (Độ bo góc): Cung cấp các góc bo tiêu chuẩn theo hệ thống MD3. Ví dụ: rounded-m3-extra-small, rounded-m3-medium, rounded-m3-full.
• Typography (Kiểu chữ): Các lớp kiểu chữ hiển thị chuẩn hóa cho Display, Heading, Body, Label. Ví dụ: text-m3-display-large, text-m3-body-medium, text-m3-label-small.

📖 Xem Tài Liệu Đầy Đủ

Để khám phá tất cả các biến cấu hình tùy chỉnh, các component UI cao cấp kèm theo và demo trực quan, vui lòng truy cập: 👉 Tài liệu & Demo chính thức trên GitHub

⚖️ Giấy phép

MIT