Preset Wind3
Preset gọn gàng Tailwind CSS / Windi CSS cho UnoCSS.
INFO
@unocss/preset-wind và @unocss/preset-uno không dùng nữa và được đổi tên thành @unocss/preset-wind3. Preset này kế thừa từ @unocss/preset-mini.
Cài đặt
pnpm add -D @unocss/preset-wind3yarn add -D @unocss/preset-wind3npm install -D @unocss/preset-wind3bun add -D @unocss/preset-wind3import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'
export default defineConfig({
presets: [
presetWind3(),
],
})TIP
Preset này được bao gồm trong gói unocss, bạn cũng có thể nhập nó từ đó:
import { presetWind3 } from 'unocss'Quy tắc
Mục tiêu chính của preset này là cung cấp tính tương thích với Tailwind CSS và Windi CSS. Cần lưu ý rằng tính tương thích hoàn toàn có thể không được đảm bảo. Vui lòng tham khảo tài liệu của họ để biết chi tiết cách sử dụng.
Đối với tất cả các quy tắc và presets được bao gồm trong preset này, vui lòng tham khảo tài liệu tương tác của chúng tôi hoặc trực tiếp đến mã nguồn.
Tính năng
Chế độ tối
Theo mặc định, preset này tạo chế độ tối dựa trên lớp với biến thể dark:.
<div class="dark:bg-red:10" />sẽ tạo ra:
.dark .dark\:bg-red\:10 {
background-color: rgb(248 113 113 / 0.1);
}Chế độ tối dựa trên truy vấn media
Để thay thế sử dụng chế độ tối dựa trên truy vấn media toàn cục, bạn có thể thay đổi cấu hình cho biến thể dark::
presetWind3({
dark: 'media'
})Bây giờ
<div class="dark:bg-red:10" />sẽ tạo ra:
@media (prefers-color-scheme: dark) {
.dark\:bg-red\:10 {
background-color: rgb(248 113 113 / 0.1);
}
}Chế độ tối dựa trên truy vấn media chọn tham gia
Để sử dụng chế độ tối dựa trên truy vấn media chọn tham gia, bạn có thể sử dụng biến thể @dark::
<div class="@dark:bg-red:10" />@media (prefers-color-scheme: dark) {
.\@dark\:bg-red\:10 {
background-color: rgb(248 113 113 / 0.1);
}
}Sự khác biệt so với Tailwind CSS
Dấu ngoặc kép
Sử dụng dấu ngoặc kép trong mẫu (các tệp dự định được xử lý) không được hỗ trợ do cách hoạt động của extractor. Ví dụ: bạn sẽ không thể viết before:content-['']. Đối với những trường hợp này, bạn có thể muốn giới thiệu một tiện ích mới mà bạn có thể đặt rõ ràng như class="before:content-empty".
background-position với các giá trị tùy ý
Tailwind cho phép người dùng sử dụng các giá trị tùy chỉnh cho background-position sử dụng cú pháp trần:
<div class="bg-[center_top_1rem]"></div>Preset Wind thay vào đó sẽ diễn giải center_top_1rem như một màu sắc. Sử dụng tiền tố position: để thực hiện điều tương tự:
<div class="bg-[position:center_top_1rem]"></div>Hoạt ảnh
Tailwind CSS có ít hoạt ảnh tích hợp sẵn, chúng tôi hoàn toàn hỗ trợ các quy tắc hoạt ảnh của nó và tích hợp nội bộ Animate.css để cung cấp nhiều hiệu ứng hoạt ảnh hơn.
Bạn có thể sử dụng tiền tố animate- để hướng dẫn IntelliSense tìm hoạt ảnh bạn cần nhanh chóng.
TIP
Chúng tôi không hợp nhất các tên hoạt ảnh xung đột từ Tailwind và Animate.css. Nếu bạn cần sử dụng tên hoạt ảnh từ Animate.css, vui lòng sử dụng animate-<name>-alt.
Ví dụ
| Tailwind CSS | Animate.css |
|---|---|
animate-bounce | animate-bounce-alt |
Nếu bạn muốn tùy chỉnh hoặc sửa đổi hiệu ứng hoạt ảnh, chúng tôi cung cấp các mục cấu hình có thể tùy chỉnh cao. Bạn có thể sửa đổi thời lượng, độ trễ, đường cong tốc độ, v.v. của hoạt ảnh thông qua mục cấu hình.
export default defineConfig({
theme: {
animation: {
keyframes: {
custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
},
durations: {
custom: '1s',
},
timingFns: {
custom: 'cubic-bezier(0.4,0,.6,1)',
},
properties: {
custom: { 'transform-origin': 'center' },
},
counts: {
custom: 'infinite',
},
}
}
})Xem trước hoạt ảnh tùy chỉnh:
TIP
Bạn cũng có thể thêm category để nhóm các hoạt ảnh để quản lý tốt hơn. Điều này sẽ giúp các công cụ hạ nguồn dễ dàng tiêu thụ các hiệu ứng hoạt ảnh hơn.
export default defineConfig({
theme: {
animation: {
keyframes: {
custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
},
// ...
category: {
custom: 'Zooming',
},
}
}
})Sự khác biệt so với Windi CSS
Điểm ngắt
| Windi CSS | UnoCSS |
|---|---|
<sm:p-1 | lt-sm:p-1 |
@lg:p-1 | at-lg:p-1 |
>xl:p-1 | xl:p-1 |
Khoảng trắng cú pháp dấu ngoặc
Preset này sử dụng _ thay vì , để tôn trọng khoảng trắng trong cú pháp dấu ngoặc.
| Windi CSS | UnoCSS |
|---|---|
grid-cols-[1fr,10px,max-content] | grid-cols-[1fr_10px_max-content] |
Vì một số quy tắc CSS yêu cầu , như một phần của giá trị, ví dụ: grid-cols-[repeat(3,auto)]
Tính năng Thí nghiệm
WARNING
Preset này bao gồm các tính năng thí nghiệm có thể được thay đổi theo cách phá vỡ bất cứ lúc nào.
Media Hover
Media hover giải quyết vấn đề sticky hover nơi việc nhấn mục tiêu bao gồm kiểu hover trên thiết bị di động sẽ duy trì kiểu hover đó cho đến khi nhấn ở nơi khác.
Vì kiểu :hover thông thường có lẽ được sử dụng rộng rãi đến vậy, biến thể sử dụng cú pháp @hover để phân biệt nó với pseudo hover thông thường.
Biến thể @hover-text-red sẽ xuất ra:
@media (hover: hover) and (pointer: fine) {
.\@hover-text-red:hover {
--un-text-opacity: 1;
color: rgb(248 113 113 / var(--un-text-opacity));
}
}Tùy chọn
INFO
Các tùy chọn preset này được kế thừa từ @unocss/preset-mini.
important
- Kiểu:
boolean | string - Mặc định:
false
Tùy chọn important cho phép bạn kiểm soát liệu các tiện ích của UnoCSS có nên được đánh dấu bằng !important hay không. Điều này có thể thực sự hữu ích khi sử dụng UnoCSS với CSS hiện có có các bộ chọn đặc hiệu cao.
WARNING
Sử dụng tùy chọn này sẽ áp dụng important cho tất cả các tiện ích được tạo bởi UnoCSS. Bạn có thể sử dụng biến thể important: thay thế nếu bạn có ý định áp dụng nó cho các tiện ích cụ thể chỉ.
Tuy nhiên, đặt important thành true có thể giới thiệu một số vấn đề khi kết hợp các thư viện JS của bên thứ ba thêm các kiểu nội tuyến vào các phần tử của bạn. Trong những trường hợp đó, các tiện ích !important của UnoCSS đánh bại các kiểu nội tuyến, điều này có thể làm hỏng thiết kế dự định của bạn.
Để giải quyết vấn đề này, bạn có thể đặt important thành một bộ chọn ID như #app thay thế:
import presetWind3 from '@unocss/preset-wind'
import { defineConfig } from 'unocss'
export default defineConfig({
presets: [
presetWind3({
important: '#app',
}),
],
})Cấu hình này sẽ thêm tiền tố tất cả các tiện ích của bạn với bộ chọn đã cho, hiệu quả tăng tính đặc hiệu của chúng mà không thực sự làm cho chúng !important.
Tiện ích dark:bg-blue sẽ xuất ra:
#app :is(.dark .dark\:bg-blue) {
--un-bg-opacity: 1;
background-color: rgb(96 165 250 / var(--un-bg-opacity));
}