Series · 14 parts
Tailwind, Radix & shadcn/ui — từ Zero đến Pro
Series tiếng Việt giúp bạn thành thạo bộ công cụ styling React hiện đại — mỗi phần đều có config thật và một demo tương tác trực tiếp. Bắt đầu với tư duy nền tảng và cài đặt Tailwind CSS v4, rồi tới utility cốt lõi và layout, design token và theming, variant và kết hợp trạng thái, cách dựng component tái dùng cho đúng (clsx, tailwind-merge, cn, cva) cùng hệ sinh thái plugin. Tiếp đó đi headless và accessible với Radix UI primitives, áp dụng shadcn/ui (triết lý, CLI, components.json), theme và tùy biến nó, dựng form đã validate với react-hook-form + zod, và kết thúc bằng các mẫu chuyên nghiệp cùng capstone dashboard.
-
Start from zero: why utility-first CSS exists, the one idea that makes Tailwind click, and a complete v4 setup with Vite — install, @import, @theme, and your first composed component. With a live playground.
-
The utilities you reach for every day: spacing, sizing, typography and color, then the two layout engines — Flexbox and Grid — the Tailwind way, plus the mobile-first responsive system. With a live flex/grid builder.
-
The heart of Tailwind v4: define your own colors, fonts, spacing and radius as design tokens with @theme — each token becomes a utility automatically. Plus the v4 way to do dark mode. With a live token studio.
-
Style on interaction and context: hover/focus/active/disabled, the group-* and peer-* patterns, and data-[state] styling — the exact mechanism Radix and shadcn rely on. With a live state explorer.
-
The moment classes repeat you need components — and the professional toolchain shadcn itself uses: clsx for conditionals, tailwind-merge to resolve conflicts, the cn() helper, and cva for type-safe variants. With a live variant factory.
-
Round out a pro setup: the typography plugin for prose, forms for sane inputs, tw-animate for enter/exit motion, and writing your own utilities and variants in v4 with @utility and @custom-variant. With a live plugin showcase.
-
The second pillar: why headless components exist, installing Radix, the Root/Trigger/Portal/Content anatomy, and building a fully accessible Dialog and DropdownMenu styled with Tailwind. With a live anatomy + a11y demo.
-
Go pro with Radix: controlled vs uncontrolled state, the asChild slot pattern to merge behavior onto your own components, and Tabs/Switch/Tooltip/Popover composition — the toolkit before shadcn ties it together. With a live composition lab.
-
Why shadcn is "not a component library", how the CLI and components.json work, and adding your first components — the moment Tailwind, Radix and cva/cn click into one workflow. With a live component gallery.
-
How the CSS-variable theme works, building light/dark, generating a brand theme, customizing a copied component, and the registry system for sharing your own. With a live theme generator.
-
The hardest UI, done right: one zod schema as the single source of truth, react-hook-form for performant state, and shadcn Form components for accessible, type-safe, validated forms. With a live form lab.
-
Tie it together: a cva-based variant system, a sortable/filterable data table with TanStack Table, a command palette with cmdk, toasts with sonner, and the composition patterns of a real dashboard. With a live capstone demo.
-
Tổng hợp toàn bộ cơ chế variant trong Tailwind CSS v4: hover, focus, responsive, dark mode, group, peer, has, data/aria, arbitrary variant và cách dùng trong Radix/shadcn.
-
Reference học và làm thật cho Tailwind v4: bản đồ utility, recipe layout/component, @theme design tokens, shadcn semantic tokens, gotchas và checklist debug production.