Lưới Tailwind CSS Bootstrap: Xây dựng giao diện đáp ứng và truy cập được

tailwind-bootstrap-grid

Hệ thống lưới flexbox Bootstrap v5 dưới dạng một plugin Tailwind CSS.

Kiểm tra demo.

Cài đặt

npm i -D tailwind-bootstrap-grid

Trong tệp tailwind.js:

module.exports = {
  plugins: [
    require('tailwind-bootstrap-grid')({
      containerMaxWidths: {
        sm: '540px',
        md: '720px',
        lg: '960px',
        xl: '1140px',
      },
    }),
  ],
};

Và đừng quên bao gồm components và utilities trong tệp css cơ bản của tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Điều này sẽ tạo ra lưới flexbox Bootstrap v5.

• LƯU Ý: Khi sử dụng lớp .container từ plugin này, bạn sẽ cần phải disable cùng với container plugin vì cả hai plugin đều sử dụng lớp .container.

Tính năng & Hỗ trợ tùy chọn Tailwind CSS

• ✅ màn hình tùy chỉnh
• ✅ dấu phân cách tùy chỉnh
• ✅ tiền tố tùy chỉnh
• ✅ important
• ✅ hỗ trợ rtl

Tùy chọn

Các tùy chọn gốc của lưới Bootstrap:

• gridColumns (mặc định – 12) – kích thước lưới
• gridGutterWidth (mặc định – "1.5rem") – độ rộng khoảng cách của container và hàng
• gridGutters (mặc định – { 0: 0 }) – bước biến lớp khoảng cách (--bs-gutter-x, --bs-gutter-y)
• containerMaxWidths (mặc định – {}) – giá trị max-width của container cho mỗi điểm đặt breakpoint

Tùy chọn bổ sung:

• generateContainer (mặc định – true) – xem liệu có nên tạo các lớp .container và .container-fluid
• rtl (mặc định – false) – hỗ trợ rtl (các lớp .offset-x sẽ bắt đầu phản hồi với [dir=ltr] / [dir=rtl])
• respectImportant (mặc định – true) – liệu nó có nên tôn trọng tùy chọn cấu hình gốc important

Câu hỏi thường gặp

. _ Tại sao_ **.container của tôi**_ _ không có lề? Plugin này sẽ không hoạt động đúng cách với core container plugin vì cả hai plugin đều sử dụng lớp .container.
. _ Cách sử dụng rtl css? Đặt thuộc tính ltr hoặc rtl dir trên container của bạn (thường là phần tử gốc html).
. _ Có một phiên bản lưới Bootstrap v4 không? Có, sử dụng tailwind-bootstrap-grid@3.

Liên quan

postcss-bootstrap-4-grid

Chi tiết tải về:

Tác giả: karolis-sh
Nguồn: https://github.com/karolis-sh/tailwind-bootstrap-grid

Giấy phép: MIT license