Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.
Check the demo.
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.
Original Bootstrap grid's options:
gridColumns
(default - 12
) - grid sizegridGutterWidth
(default - "1.5rem"
) - container and rows gutter widthgridGutters
(default - { 0: 0 }
) - gutter variable class steps (--bs-gutter-x
, --bs-gutter-y
)containerMaxWidths
(default - {}
) - the max-width
container value for each breakpointExtra options:
generateContainer
(default - true
) - whether to generate .container
and .container-fluid
classesrtl
(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.container
doesn't have padding? This plugin will not work properly with core container plugin as both plugins expose a .container
class.ltr
or rtl
dir attribute on your container (usually the root html
).tailwind-bootstrap-grid@3
.Author: karolis-sh
Source: https://github.com/karolis-sh/tailwind-bootstrap-grid
License: MIT license