Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.

Check the demo.

npm i -D tailwind-bootstrap-grid

In tailwind.js file:

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

And don't forget to include components and utilities in your tailwind base css file:

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

This will generate Bootstrap v5 flexbox grid.

* NOTE: When using the .container class from this plugin you will need to disable the core container plugin as both plugins expose a .container class.

• ✅ custom screens
• ✅ custom separator
• ✅ custom prefix
• ✅ important
• ✅ rtl support

• Original Bootstrap grid's options:

  • gridColumns (default - 12) - grid size
  • gridGutterWidth (default - "1.5rem") - container and rows gutter width
  • gridGutters (default - { 0: 0 }) - gutter variable class steps (--bs-gutter-x, --bs-gutter-y)
  • containerMaxWidths (default - {}) - the max-width container value for each breakpoint

• Extra options:

  • generateContainer (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])
  • respectImportant (default - true) - whether it should respect the important root config option

1. Why my .container doesn't have padding? This plugin will not work properly with core container plugin as both plugins expose a .container class.
2. How to use rtl css? Set the ltr or rtl dir attribute on your container (usually the root html).
3. Is there a Bootstrap v4 grid implementation? Yes, use tailwind-bootstrap-grid@3.

postcss-bootstrap-4-grid