tailwind-bootstrap-grid

Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.

Check the demo playground.

Installation

npm i -D tailwind-bootstrap-grid

In your index.css file:

@import 'tailwindcss';

@plugin 'tailwind-bootstrap-grid' {
  container_max_widths:
    'sm', '540px', 'md', '720px', 'lg', '960px', 'xl', '1140px', '2xl', '1320px';
}

Or via tailwind.config.js file:

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

This will generate the Bootstrap v5 flexbox grid.

Options

• Original Bootstrap grid's options:

  • grid_columns (default - 12) - grid size
  • grid_gutter_width (default - "1.5rem") - container and rows gutter width
  • grid_gutters (default - [0, 0]) - gutter variable class steps (--bs-gutter-x, --bs-gutter-y)
  • container_max_widths (default - []) - the max-width container value for each breakpoint

• Extra options:

  • generate_container (default - true) - whether to generate .container and .container-fluid classes
  • rtl (default - false) - rtl support (.offset-x classes will start responding to [dir=ltr] / [dir=rtl])
  • debug (default - false) - enable debug mode

FAQ

1. How to use rtl css? Set the ltr or rtl dir attribute on your container (usually the root html).
2. Is there a Bootstrap v4 grid implementation? Yes, use tailwind-bootstrap-grid@3.

Related

postcss-bootstrap-4-grid