Thứ Tự Bộ Lọc Tailwind CSS
Một plugin để sắp xếp thứ tự bộ lọc CSS của bạn được áp dụng bởi Tailwind CSS. Thứ tự của các bộ lọc được truyền vào thuộc tính filter
có thể thay đổi kết quả cuối cùng một cách đáng kể. Mà không sử dụng plugin này, các bộ lọc sẽ được áp dụng theo cùng một thứ tự mỗi lần vì Tailwind có một thứ tự cứng nhắc.
Cài Đặt
# npm
npm install --save-dev @joshdavenport/tailwindcss-filter-order
# yarn
yarn add --dev @joshdavenport/tailwindcss-filter-order
# pnpm
pnpm install --save-dev @joshdavenport/tailwindcss-filter-order
Sử Dụng
// tailwindcss.config.js
module.exports = {
theme: {
extend: {
filterOrder: {
'my-order': 'sepia invert brightness',
'another-order': 'brightness sepia hue-rotate invert'
},
},
},
plugins: [
require('@joshdavenport/tailwindcss-filter-order')
]
}
Điều này tạo ra các tiện ích mới của Tailwind sau đây, để sử dụng kết hợp với các tiện ích bộ lọc mặc định (brightness, contrast, sepia, v.v):
filter-order-my-order
filter-order-another-order
Hoặc bạn có thể sử dụng một giá trị tùy ý được truyền vào tiện ích:
filter-order-[sepia_invert_brightness]
Thông tin tải về:
Tác giả: joshdavenport
Nguồn: https://github.com/joshdavenport/tailwindcss-filter-order