Package Exports

tailwind-bootstrap-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-bootstrap-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 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 options support

✅ custom screens
✅ custom separator
✅ custom prefix
✅ rtl support

Options

gridColumns (default - 12) - grid size
gridGutterWidth (default - "30px") - gutter width
gridGutterWidths (default - {}) - gutter widths for each breakpoint
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 (.offset-x classes will start responding to [dir=ltr] / [dir=rtl])

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

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).

postcss-bootstrap-4-grid

License

MIT