Phím tắt

Phím tắt cho phép bạn kết hợp nhiều quy tắc thành một viết tắt duy nhất, lấy cảm hứng từ Windi CSS's.

Sử dụng

shortcuts: {
  // phím tắt đến nhiều tiện ích
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  // bí danh tiện ích đơn lẻ
  'red': 'text-red-100',
}

Ngoài ánh xạ thuần, UnoCSS cũng cho phép bạn định nghĩa các phím tắt động.

Tương tự như Quy tắc, một phím tắt động là sự kết hợp của một matcher RegExp và một hàm xử lý.

shortcuts: [
  // bạn vẫn có thể có kiểu đối tượng
  {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
  },
  // phím tắt động
  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]

Với điều này, chúng ta có thể sử dụng btn-green và btn-red để tạo CSS sau:

.btn-green {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(220 252 231 / var(--un-text-opacity));
}
.btn-red {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgb(254 226 226 / var(--un-text-opacity));
}