tailwindcss-grid-system

Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.

Installation

npm i -D tailwindcss-grid-system

In tailwind.config.js file:

/** @type {import("tailwindcss").Config} */
module.exports = {
  plugins: [
    require('tailwindcss-grid-system'),
  ],
};

or tailwind.config.ts with typescript:

import { Config } from 'tailwindcss';
export default {
  plugins: [
    require('tailwindcss-grid-system'),
  ],
} satisfies Config

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 size
  • gridGutterWidth (default - "1.5rem") - container and rows gutter width
  • gridGutters (default - theme.spacing (default tailwind spacings)) - gutter variable class steps (--twg-gutter-x, --twg-gutter-y)
  • containerMaxWidths (default - {}) - the max-width container value for each breakpoint

• Extra options:

  • generateContainer (default - true) - whether to generate .container and .container-fluid classes
  • rtl (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
  • prefix (default - twg) - css variables prefix