tailwind-bootstrap-grid

tailwind-bootstrap-grid

Bootstrap v4 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 preflight;
@tailwind components;
@tailwind utilities;

This will generate Bootstrap v4 flexbox grid.

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

Features & Tailwind CSS options support

• ✅ custom screens
• ✅ custom separator
• ✅ custom prefix
• ✅ responsive gutters
• ✅ rtl support

Options

• Original Bootstrap grid's options:

  • gridColumns (default - 12) - grid size
  • gridGutterWidth (default - "30px") - container and rows gutter width
  • containerMaxWidths (default - {}) - the max-width container value for each breakpoint

• Extra options:

  • gridGutterWidths (default - {}) - container gutter width for each breakpoint
  • generateNoGutters (default - true) - whether to generate .no-gutter class
  • 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])

FAQ

• Why my .container doesn't have padding? This plugin will not work properly with core container plugin as both plugins expose a .container class.
• How to use rtl css? Set the ltr or rtl dir attribute on your container (usually the root html).

Related

postcss-bootstrap-4-grid

License

MIT

Changelog

3.1.0 (2020-11-04)

Features

• add support for tailwindcss@1.9.6 (781133d)