tailwind-bootstrap-grid

Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.

Check the demo.

Installation

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.

Features & Tailwind CSS options support

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

Options

• 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

FAQ

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

Related

postcss-bootstrap-4-grid