tailwind-bootstrap-grid
v5.1.0
Published
Tailwind CSS plugin to generate Bootstrap flexbox grid system.
Downloads
22,165
Maintainers
Readme
tailwind-bootstrap-grid
Bootstrap v5 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 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.
Features & Tailwind CSS options support
- ✅ custom screens
- ✅ custom separator
- ✅ custom prefix
- ✅ important
- ✅ rtl support
Options
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 -{}
) - themax-width
container value for each breakpoint
Extra 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 theimportant
root config option
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
orrtl
dir attribute on your container (usually the roothtml
). - Is there a Bootstrap v4 grid implementation? Yes, use
tailwind-bootstrap-grid@3
.