/tailwindcss-grid-system

Tailwind CSS plugin that generates Bootstrap's flexbox grid

Primary LanguageTypeScript

tailwindcss-grid-system

npm version Build Status License: MIT

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