tw-bootstrap-grid

tw-bootstrap-grid

A Tailwind CSS plugin that adds a responsive, Bootstrap-like 12-column grid system to Tailwind.
Works with Tailwind CSS v3.4.x and v4+, including full RTL (Right-to-Left) support.

✨ Features

• .row, .col, .col-1 to .col-12 for flexible column layouts.
• .g-*, .gx-* and .gy-* for gutter spacing (uses Tailwind spacing scale).
• .offset-* to add horizontal column offsets.
• .row-cols-(1-6) classes evenly divide row children into equal columns.
• .container and .container-fluid with responsive max-widths.
• Automatically adapts .row, .offset-* and .container for right-to-left layouts.

📦 Installation

Install the plugin via NPM:

npm install tw-bootstrap-grid

or with Yarn:

yarn add tw-bootstrap-grid

⚙️ Quick Setup

Tailwind v3 Config

import Grid from "tw-bootstrap-grid";

export default {
    content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
    plugins: [Grid],
};

Tailwind v4 (CSS / PostCSS)

@import "tailwindcss";
@plugin "tw-bootstrap-grid";

📘 Documentation & Examples

👉 Find the full documentation, setup guide, and interactive examples on Docs & Live Examples.

🧠 Notes

• The plugin does not override any core Tailwind utility.
• All grid utilities support responsive variants (sm:, md:, lg:, etc).
• Gutters are handled using CSS custom properties: --theme-gutter-x and --theme-gutter-y.
• Fully RTL-compatible: all directional utilities (offset, container, row) adapt automatically to dir="rtl".
• This plugin is not compatible with Tailwind via CDN. Use it in a build environment (PostCSS, Vite, Webpack, etc.).

🤝 Contributing

Found a bug or have a feature request? Feel free to open an issue or submit a pull request!

🪪 License

MIT © Baver Bozdağ