Bộ Sưu Tập Các Plugin Tailwind
Documentation (work in progress)
Chuyển Tiếp
Cài Đặt:
yarn add glhd-tailwindcss-transitions
Sử Dụng:
// In your tailwind config
{
plugins: [
require('glhd-tailwindcss-transitions')(),
],
}
Theo mặc định, plugin cung cấp các tiện ích sau:
.transition {
transition-duration: .25s;
}
.transition-slower {
transition-duration: .75s;
}
.transition-slow {
transition-duration: .5s;
}
.transition-fast {
transition-duration: .15s;
}
.transition-faster {
transition-duration: .075s;
}
.transition {
transition-property: all;
}
.transition-property-all {
transition-property: all;
}
.transition-property-none {
transition-property: none;
}
.transition-property-bg {
transition-property: background;
}
.transition-property-opacity {
transition-property: opacity;
}
.transition-property-color {
transition-property: color;
}
.transition-property-shadow {
transition-property: box-shadow;
}
.transition {
transition-timing-function: ease-in-out;
}
.transition-timing-linear {
transition-timing-function: linear;
}
.transition-timing-ease {
transition-timing-function: ease;
}
.transition-timing-ease-in {
transition-timing-function: ease-in;
}
.transition-timing-ease-out {
transition-timing-function: ease-out;
}
.transition-timing-ease-in-out {
transition-timing-function: ease-in-out;
}
.transition {
transition-delay: .1s;
}
.transition-delay-long {
transition-delay: .2s;
}
.transition-delay-longer {
transition-delay: .3s;
}
.transition-delay-longest {
transition-delay: .4s;
}
.transition-delay-none {
transition-delay: 0s;
}
Cấu Hình:
Bạn có thể cấu hình tiền tố .transition, các biến thể Tailwind và các tùy chọn tiện ích bằng cách truyền một đối tượng cấu hình vào plugin.
Xem cấu hình mặc định cho tất cả các tùy chọn. Bạn có thể đặt chúng trong tệp cấu hình chính của Tailwind hoặc truyền chúng vào plugin khi bạn thêm nó vào Tailwind.
Chi tiết tải về:
Tác giả: glhd
Nguồn: https://github.com/glhd/tailwindcss-plugins
