tailwind-bootstrap-grid

tailwind-bootstrap-grid

Bootstrap v4 flexbox grid system as a tailwindcss plugin.

Check the demo.

Installation

npm i -D tailwind-bootstrap-grid

In tailwind.js file:

module.exports = {
  plugins: [require('tailwind-bootstrap-grid')()],
};

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

@tailwind preflight;
@tailwind components;
@tailwind utilities;

This will generate Boostrap v4 flexbox grid.

Options

• gridColumns (default - 12) - grid size
• gridGutterWidth (default - "30px") - gutter width
• generateContainer (default - true) - whether to generate .container and .container-fluid classes
• generateNoGutters (default - true) - whether to generate .no-gutter class
• containerMaxWidths (default - { sm: '540px', md: '720px', lg: '960px', xl: '1140px' }) - the max-width container value for each breakpoint

For example to generate 10 column grid with no gutter and skip the container:

module.exports = {
  plugins: [
    require('tailwind-bootstrap-grid')({
      gridColumns: 10,
      gridGutterWidth: 0,
      generateNoGutters: false,
      generateContainer: false,
    }),
  ],
};

Tailwind configuration support

• ✅ custom screens
• ✅ custom separator
• 🚧 custom prefix - no-gutters class doesn't fully support it

Related

postcss-bootstrap-4-grid

License

MIT