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.

* NOTE: This plugin will not work with tailwindcss/plugins/container as both plugins expose a .container class

Features & Tailwind options support

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

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
• rtl (default - false) - rtl support (inverses the offset classes)

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,
    }),
  ],
};

Related

postcss-bootstrap-4-grid

License

MIT

Changelog

2.0.0 (2019-05-14)

Features

• tailwind: add tailwind v1 support (335b212)

Tests

• simplify test configs (fea50c0)

BREAKING CHANGES

• tailwind: Drop tailwind 0.x.x version support