Ví dụ về Plugin Tailwind CSS
Để bắt đầu, hãy sao chép dự án và cài đặt các phụ thuộc:
# Using npm
npm install
# Using Yarn
yarn
Sau đó, bạn có thể xử lý CSS bằng cách chạy:
# Using npm
npm run build
# Using Yarn
yarn run build
Mở tệp ./index.html
trong trình duyệt của bạn và bạn đã sẵn sàng!
Tiện ích Object-Fit
Trong plugins/object-fit/index.js
, bạn sẽ tìm thấy một ví dụ về plugin thêm một bộ các lớp tiện ích đơn giản, không thể tùy chỉnh cho thuộc tính object-fit
.
Tùy chọn duy nhất nó mở ra là các biến thể mà bạn muốn tạo ra (responsive
, hover
, focus
, vv.), mà bạn truyền vào plugin dưới dạng một mảng đơn giản:
module.exports = {
// ...
plugins: [
// ...
require('./plugins/object-fit')(['responsive']),
],
}
Đây chỉ là loại plugin đơn giản nhất bạn có thể tạo.
Nút đơn giản
Trong plugins/simple-buttons/index.js
, bạn sẽ tìm thấy một ví dụ về plugin thêm các lớp thành phần nút mới.
Plugin này mở ra khá nhiều tùy chọn cấu hình có thể được truyền vào plugin dưới dạng một đối tượng:
module.exports = {
// ...
plugins: [
// ...
require('./plugins/simple-buttons')({
// Set some default styles for all buttons.
borderRadius: '.25rem', // Default: .25rem
fontWeight: '600', // Default: 600
lineHeight: '1.25', // Default: 1.25
fontSize: '1rem', // Default: 1rem
padding: '.5rem 1rem', // Default: .5rem 1rem
// Specify the button colors you'd like to generate.
//
// By default, buttons are generated for all of Tailwind's
// default base colors.
colors: {
// Class name: `.btn-primary`
primary: {
background: colors['blue'],
text: colors['white'],
},
// Class name: `.btn-secondary`
secondary: {
background: colors['grey'],
text: colors['black'],
},
},
// Specify additional button sizes you'd like to generate.
//
// You can override any of the default styles from above
// at any given button size.
sizes: {
// Class name: `.btn-sm`
sm: {
fontSize: '.875rem',
padding: '.5rem .75rem',
},
// Class name: `.btn-lg`
lg: {
fontSize: '1.25rem',
padding: '.75rem 1.5rem',
borderRadius: '.5rem',
}
}
}),
],
}
Cấu hình là tùy chọn hoàn toàn; plugin sẽ sử dụng các giá trị mặc định hợp lý dựa trên cấu hình mặc định của Tailwind nếu bạn không cung cấp bất kỳ sự ghi đè riêng nào.
Nếu bạn muốn mở rộng cấu hình mặc định của plugin thay vì ghi đè hoàn toàn, bạn có thể truyền một hàm chấp nhận cấu hình mặc định, thay đổi nó và trả về một đối tượng cấu hình mới:
module.exports = {
// ...
plugins: [
// ...
require('./plugins/simple-buttons')(function (options) {
options.sizes = Object.assign(options.sizes, {
xl: {
fontSize: '1.5rem',
padding: '1rem 2rem',
borderRadius: '.75rem',
}
})
return options
}),
],
}
Một lần nữa, không giới hạn trong việc plugin mở ra API cho cấu hình. Bạn có thể làm bất cứ điều gì bạn muốn!
Tiện ích CSS Grid
Trong plugins/css-grid/index.js
, bạn sẽ tìm thấy một ví dụ về plugin thêm các tiện ích mới để sử dụng CSS Grid Layout.
Nó mở ra ba tùy chọn cấu hình:
grids
, để chỉ định tất cả các kích thước lưới mà bạn muốn tạo ragaps
, để chỉ định kích thước khoảng trống mà bạn muốn tạo ra-
variants
, để chỉ định các biến thể bạn muốn tạo ramodule.exports = {
// …plugins: [
// …
require(‘./plugins/css-grid’)({
grids: [2, 3, 5, 6, 8, 10, 12],
gaps: {
0: ‘0’,
4: ‘1rem’,
8: ‘2rem’,
},
variants: [‘responsive’],
}),
],
}
Mà không cần cấu hình nào, nó sẽ tạo ra các lưới từ 1 đến 12 cột, không có kích thước khoảng trống và biến thể responsive
cho mỗi tiện ích mới.
Plugin tạo ra các bộ lớp sau đây:
.grid
, để đặtdisplay: grid
trên một phần tử.grid-columns-{size}
, để chỉ định số cột trong lưới.grid-gap-{size}
, để chỉ định kích thước khoảng trống giữa các cột/hàng.col-span-{columns}
, để chỉ định chiều rộng của một cột.col-start-{line}
và.col-end-{line}
, để chỉ định điểm bắt đầu và điểm kết thúc của một cột một cách rõ ràng (hữu ích để sắp xếp lại các cột hoặc tạo khoảng trống)
Không thực sự thực tế khi muốn mở ra tất cả sức mạnh của CSS Grid thông qua các tiện ích, nhưng plugin này là một ví dụ tốt về việc sử dụng CSS Grid để thay thế lưới chỉ có cột hoặc lưới Flexbox.
Chi tiết Tải xuống:
Tác giả: tailwindlabs
Nguồn: https://github.com/tailwindlabs/tailwindcss-plugin-examples
Giấy phép: MIT license