| title | author | date |
|---|---|---|
Dùng Radix Primitives với Tailwind như nào? |
hai |
11-25-2022 |
Radix components được cung cấp dưới dạng thô, cho bạn toàn quyền kiểm soát việc tô vẽ CSS.
Bạn có thể dùng bất cứ giải pháp CSS nào cũng được (vanilla CSS, CSS preprocessors, CSS-in-JS).
Ở đây mình chia sẻ cách sử dụng cùng Tailwind CSS.
Vẫn như thường lệ, ở đâu có className, ở đó có thể dùng Tailwind. Nhưng bạn sẽ gặp trường hợp như sau đối với Radix components:
Một số Radix components là stateful, nên state của chúng được thể hiện thông qua thuộc tính data-state.
Ví dụ như Checkbox.Root có [data-state] = "checked" | "unchecked" | "indeterminate"
Để thuận tiện hơn trong việc sử dụng cùng Tailwind, thay vì dùng arbitrary value, bạn có thể config như sau:
Với cách cấu hình như trên, việc quản lý và tốc độ styling sẽ được cải thiện hơn rất nhiều.