Biến thể

Biến thể cho phép bạn áp dụng một số biến thể cho các quy tắc hiện có của mình, như biến thể hover: từ Tailwind CSS.

Ví dụ

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // cắt tiền tố `hover:` và truyền cho các biến thể và quy tắc tiếp theo
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

matcher kiểm soát khi nào biến thể được kích hoạt. Nếu giá trị trả về là một chuỗi, nó sẽ được sử dụng làm bộ chọn để khớp các quy tắc.
selector cung cấp khả năng tùy chỉnh bộ chọn CSS được tạo.

Bên dưới lớp vỏ

Hãy cùng xem điều gì đã xảy ra khi khớp với hover:m-2:

hover:m-2 được trích xuất từ cách sử dụng của người dùng
hover:m-2 được gửi đến tất cả các biến thể để khớp
hover:m-2 được khớp bởi biến thể của chúng ta và trả về m-2
kết quả m-2 sẽ được sử dụng cho vòng khớp biến thể tiếp theo
nếu không có biến thể nào khác được khớp, m-2 sau đó sẽ đi để khớp các quy tắc
quy tắc đầu tiên của chúng ta được khớp và tạo .m-2 { margin: 0.5rem; }
cuối cùng, chúng ta áp dụng biến đổi của biến thể cho CSS được tạo. Trong trường hợp này, chúng ta đã thêm trước :hover vào hook selector

Kết quả là, CSS sau đây sẽ được tạo:

css

.hover\:m-2:hover { margin: 0.5rem; }

Với điều này, chúng ta có thể áp dụng m-2 chỉ khi người dùng di chuột qua phần tử.

Đi xa hơn

Hệ thống biến thể rất mạnh mẽ và không thể được bao phủ hoàn toàn trong hướng dẫn này, bạn có thể kiểm tra thực hiện của preset mặc định để xem các cách sử dụng nâng cao hơn.

Biến thể ​

Ví dụ ​

Bên dưới lớp vỏ ​

Đi xa hơn ​

Biến thể

Ví dụ

Bên dưới lớp vỏ

Đi xa hơn