karolis-sh
tailwind-bootstrap-grid
Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.
Check the demo.
Installation
npm i -D tailwind-bootstrap-gridIn 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-widthcontainer value for each breakpoint
Extra options:
generateContainer(default -true) - whether to generate.containerand.container-fluidclassesrtl(default -false) - rtl support (.offset-xclasses will start responding to[dir=ltr]/[dir=rtl])respectImportant(default -true) - whether it should respect theimportantroot config option
FAQ
- Why my
.containerdoesn't have padding? This plugin will not work properly with core container plugin as both plugins expose a.containerclass. - How to use rtl css? Set the
ltrorrtldir attribute on your container (usually the roothtml). - Is there a Bootstrap v4 grid implementation? Yes, use
tailwind-bootstrap-grid@3.