Repository: karolis-sh/tailwind-bootstrap-grid
Branch: main
Commit: f8e563236f7e
Files: 37
Total size: 44.7 KB

Directory structure:
gitextract_ppetqgvf/

├── .czrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .github/
│   └── workflows/
│       ├── commitlint.yml
│       └── nodejs.yml
├── .gitignore
├── .husky/
│   ├── .gitignore
│   ├── commit-msg
│   ├── pre-commit
│   └── pre-push
├── .markdownlint.json
├── .prettierignore
├── .prettierrc.js
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── commitlint.config.js
├── demo/
│   ├── postcss.config.js
│   ├── src/
│   │   ├── About.mdx
│   │   ├── App.jsx
│   │   ├── Demo.mdx
│   │   ├── Direction.jsx
│   │   ├── GithubCorner.jsx
│   │   ├── index.css
│   │   ├── index.html
│   │   ├── index.jsx
│   │   └── theme.js
│   ├── tailwind.config.js
│   └── vite.config.mjs
├── netlify.toml
├── package.json
├── release.sh
├── src/
│   └── index.ts
├── tsconfig.json
└── types/
    └── index.d.ts

================================================
FILE CONTENTS
================================================

================================================
FILE: .czrc
================================================
{
  "path": "cz-conventional-changelog"
}


================================================
FILE: .editorconfig
================================================
# editorconfig.org

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[Makefile]
indent_style = tab

[*.md]
trim_trailing_whitespace = false


================================================
FILE: .eslintignore
================================================
node_modules
demo
/build
/lib


================================================
FILE: .eslintrc.json
================================================
{
  "extends": [
    "plugin:@k.sh/esnext",
    "plugin:@k.sh/node",
    "plugin:@k.sh/prettier",
    "plugin:@k.sh/typescript"
  ],
  "plugins": [],
  "env": {}
}


================================================
FILE: .github/workflows/commitlint.yml
================================================
name: Lint Commit Messages
on: [pull_request]

jobs:
  commitlint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - uses: wagoid/commitlint-github-action@v2


================================================
FILE: .github/workflows/nodejs.yml
================================================
name: Node.js CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: 'npm'
      - run: npm ci
      - run: npm run build
      - run: npm run qa


================================================
FILE: .gitignore
================================================
# npm files
node_modules
*.log*

# project
/build
/lib
/samples/*/output.css
.eslintcache


================================================
FILE: .husky/.gitignore
================================================
_


================================================
FILE: .husky/commit-msg
================================================
npx --no -- commitlint --edit "$1"


================================================
FILE: .husky/pre-commit
================================================
npx lint-staged


================================================
FILE: .husky/pre-push
================================================
npm run qa


================================================
FILE: .markdownlint.json
================================================
{
  "default": true
}


================================================
FILE: .prettierignore
================================================
# npm files
node_modules
package.json

# project
/build
/samples/*/output.css
CHANGELOG.md
.husky/_/


================================================
FILE: .prettierrc.js
================================================
module.exports = require('@k.sh/prettier-config');


================================================
FILE: CHANGELOG.md
================================================
# Changelog

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [7.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v6.0.0...v7.0.0) (2026-01-18)


### ⚠ BREAKING CHANGES

* Removed `rtl` option - RTL is now automatic.

### Features

* replace physical properties with CSS logical properties ([7bdf231](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/7bdf2311e84fbb586d1e9172081639bc28e8738b))

## [6.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v5.1.0...v6.0.0) (2025-05-14)


### ⚠ BREAKING CHANGES

* **tailwind:** drop tailwind v3 support, change plugin options structure

### Features

* **tailwind:** migrate to tailwind v4 ([d7ad4b7](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/d7ad4b7bedc03309725a10398ca5bd8fb13c2ebf)), closes [#157](https://github.com/karolis-sh/tailwind-bootstrap-grid/issues/157)

## [5.1.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v5.0.1...v5.1.0) (2023-11-25)


### Features

* add TypeScript types ([dc82b58](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/dc82b581f823ed8c553ed0c22747ac97f033c09e))

### [5.0.1](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v5.0.0...v5.0.1) (2022-04-17)


### Bug Fixes

* disable misleading container warning for some cases ([84033c0](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/84033c084570bd366dd8530f6506154ebc2e7a76))

## [5.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v4.0.0...v5.0.0) (2022-02-20)


### ⚠ BREAKING CHANGES

* drop TailwindCSS 2 support

### Features

* add TailwindCSS 3 support ([95b8062](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/95b8062add721372b7d07b6ecc3f70598446cdcd))


### Bug Fixes

* bump joi ([665dda8](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/665dda89e590c40c7736d92c39bf9b69f2d0221b))
* swap chalk with picocolors ([d4f9be2](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/d4f9be2758398e1fd982220c9cd92cc9b14fc637))
* use tailwindcss/plugin wrapper ([e920c0b](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/e920c0becccde9020d91a55fc6d500a71f6ea7ea))

## [4.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.3.0...v4.0.0) (2021-05-19)


### ⚠ BREAKING CHANGES

* Tailwind CSS v1 will no longer be supported.
* Gutter class changes and removing gridGutterWidths, generateNoGutters options.

### Features

* migrate to Bootstrap 5 ([ccf8882](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/ccf88821ccb1d267a3f870775fd0b9958dcc7ce1)), closes [#75](https://github.com/karolis-sh/tailwind-bootstrap-grid/issues/75)
* remove Tailwind CSS v1 support ([2c03247](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/2c0324781c508563b9e3d1e4dd6beef842ae73ef))


### Bug Fixes

* **deps:** bump chalk, joi, lodash, reduce-css-calc ([e512bd9](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/e512bd91a193dd0e3b480d6599decadf539d61d9))

## [3.3.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.2.0...v3.3.0) (2021-03-04)


### Features

* add plugin scoped respectImportant support ([a06f8c6](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/a06f8c61a97d1fdf4cd5111d53224646b6c54b4e))

## [3.2.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.1.0...v3.2.0) (2021-03-03)


### Features

* add support for important config option ([75be2c1](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/75be2c123aa7806b89afe60fe6140c2a525c16eb)), closes [#71](https://github.com/karolis-sh/tailwind-bootstrap-grid/issues/71)
* add TailwindCSS 2 support ([084772c](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/084772c43fb99517c4bef9882de9348b595a27e5))

## [3.1.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.0.1...v3.1.0) (2020-11-04)

### Features

- add support for tailwindcss@1.9.6 ([781133d](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/781133d48fae61c58c17f01d480396661b29837c))

### [3.0.1](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.0.0...v3.0.1) (2020-11-04)

### Bug Fixes

- fix container correPlugin detection ([93d476f](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/93d476f4f4c1caf7ebfb64bee5617925677ec994))

## [3.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.2.2...v3.0.0) (2020-11-04)

### ⚠ BREAKING CHANGES

- now there are no defaults for container's max-width properties

### Features

- add console warning if container is generated by core plugin and the grid plugin ([dc2cd27](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/dc2cd273413a5f34616f03dd750b80b59231897d))
- change containerMaxWidths default to {} ([1d66105](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/1d66105a3159d4ab11898e7decf9e31934b14985))

### Bug Fixes

- add missing spacings for .col-\* on responsive gutters ([112ed90](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/112ed902588e0ef83f9de7c9064cf2df782e3bc7))
- add missing spacings for .row on responsive gutters ([cc4ebb8](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/cc4ebb8cc903bccea7591e39603da98e91d53152))
- add plugin options validation & make gridGutterWidths stricter ([84b32c4](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/84b32c49314be410007ac0002fe37dd18968eb35))
- reduce redundant .container-fluid styles output ([e8966c5](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/e8966c563130f71584a897f957d9bd7e72c173d7))

### [2.2.2](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.2.1...v2.2.2) (2020-08-18)

### [2.2.1](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.2.0...v2.2.1) (2020-08-17)

### Bug Fixes

- default gutter width when using gutters by breakpoint ([e77a5ef](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/e77a5ef7fac3f3ab7e3a0f8719999ef2b2d9ba06))

## [2.2.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.1.0...v2.2.0) (2020-08-17)

### Features

- responsive gutter widths ([ace11e3](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/ace11e3ced682cffad1773cc85a0d40b317eefe1))

### Bug Fixes

- upgrade to lodash@4.17.15 ([f06f622](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/f06f622009de449e4e832dcca5de8dcf4f72fd90))

## [2.1.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.0.2...v2.1.0) (2019-06-06)

### Bug Fixes

- remove redundant new lines from output ([703bfea](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/703bfea))

### Features

- **prefix:** add custom prefix support ([3f29370](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/3f29370)), closes [#5](https://github.com/karolis-sh/tailwind-bootstrap-grid/issues/5)

### Tests

- update test setup ([9cd4613](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/9cd4613))

### [2.0.2](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.0.0...v2.0.2) (2019-05-14)

### Bug Fixes

- version bump ([057df19](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/057df19))

## [2.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v1.2.0...v2.0.0) (2019-05-14)

### Features

- **tailwind:** add tailwind v1 support ([335b212](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/335b212))

### Tests

- simplify test configs ([fea50c0](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/fea50c0))

### BREAKING CHANGES

- **tailwind:** Drop tailwind 0.x.x version support


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing

## Reporting Issues

If you have found what you think is a bug, please file an issue.

## Suggesting new features

If you are here to suggest a feature, first create an issue if it does not
already exist. From there, we will discuss use-cases for the feature and then
finally discuss how it could be implemented.

## Development

If you have been assigned to fix an issue or develop a new feature, please
follow these steps to get started:

- Fork this repository
- Install dependencies by running `npm i`
- Implement your changes
- Format all files `npm run format`
- Make sure the tests are passing `npm run qa`
- Git stage your required changes and commit (see below commit guidelines)
- Submit PR for review

## Commit message conventions

This project is using [Conventional Commit Message Conventions](https://www.conventionalcommits.org/en/v1.0.0/).

We have very precise rules over how our git commit messages can be formatted.
This leads to **more readable messages** that are easy to follow when looking
through the **project history**.

### Commit Message Format

> Use [commitizen](https://github.com/commitizen/cz-cli) for interactive command
> line utility

Each commit message consists of a **header**, a **body** and a **footer**. The
header has a special format that includes a **type**, a **scope** and a **subject**:

```txt
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```

The **header** is mandatory and the **scope** of the header is optional.

Any line of the commit message cannot be longer than 100 characters! This allows
the message to be easier to read on GitHub as well as in various git tools.

### Type

Must be one of the following:

- **feat**: A new feature
- **fix**: A bug fix
- **docs**: Documentation only changes
- **style**: Changes that do not affect the meaning of the code (white-space,
  formatting, missing semi-colons, etc)
- **refactor**: A code change that neither fixes a bug nor adds a feature
- **perf**: A code change that improves performance
- **test**: Adding missing or correcting existing tests
- **chore**: Changes to the build process or auxiliary tools and libraries such
  as documentation
  generation

### Scope

The scope could be anything specifying place of the commit change.

### Subject

The subject contains succinct description of the change:

- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize first letter
- no dot (.) at the end

### Body

Just as in the **subject**, use the imperative, present tense: "change" not
"changed" nor "changes". The body should include the motivation for the change
and contrast this with previous behavior.

### Footer

The footer should contain any information about **Breaking Changes** and is also
the place to [reference GitHub issues that this commit closes](https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue).

**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space
or two newlines. The rest of the commit message is then used for this.

### Example

Here is an example of the release type that will be done based on a commit messages:

<!-- markdownlint-disable no-inline-html line-length -->
<!-- prettier-ignore-start -->

| Commit message | Release type |
| --- | --- |
| `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release |
| `feat(pencil): add graphiteWidth option` | ~~Minor~~ Feature Release |
| `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br>`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release |

<!-- prettier-ignore-end -->

<!-- markdownlint-enable no-inline-html line-length -->

### Revert

If the commit reverts a previous commit, it should begin with `revert:`, followed
by the header of the reverted commit. In the body it should say:
`This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.

## Pull requests

Maintainers merge pull requests by squashing all commits and editing the commit
message if necessary using the GitHub user interface.

Use an appropriate commit type. Be especially careful with breaking changes.

## Releases

The `main` branch is the main release branch, where changes get released periodically.


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2019 Karolis Šarapnickis

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# tailwind-bootstrap-grid

[![npm version](https://img.shields.io/npm/v/tailwind-bootstrap-grid)](https://www.npmjs.com/package/tailwind-bootstrap-grid)
![license](https://img.shields.io/npm/l/tailwind-bootstrap-grid)

Bootstrap **v5** flexbox grid system as a Tailwind CSS plugin.

Check the [demo playground](https://tailwind-bootstrap-grid.netlify.app/).

## Installation

```shell
npm i -D tailwind-bootstrap-grid
```

In your `index.css` file:

```css
@import 'tailwindcss';

@plugin 'tailwind-bootstrap-grid' {
  container_max_widths:
    'sm', '540px', 'md', '720px', 'lg', '960px', 'xl', '1140px', '2xl', '1320px';
}
```

Or via `tailwind.config.js` file:

```js
module.exports = {
  plugins: [
    require('tailwind-bootstrap-grid')({
      container_max_widths: [
        'sm',
        '540px',
        'md',
        '720px',
        'lg',
        '960px',
        'xl',
        '1140px',
        '2xl',
        '1320px',
      ],
    }),
  ],
};
```

This will generate the Bootstrap v5 flexbox grid.

## Options

- Original Bootstrap grid's options:
  - `grid_columns` (default - `12`) - grid size
  - `grid_gutter_width` (default - `"1.5rem"`) - container and rows gutter width
  - `grid_gutters` (default - `[0, 0]`) - gutter variable class steps
    (`--bs-gutter-x`, `--bs-gutter-y`)
  - `container_max_widths` (default - `[]`) - the `max-width` container value for
    each breakpoint

- Extra options:
  - `generate_container` (default - `true`) - whether to generate `.container` and
    `.container-fluid` classes
  - `rtl` (default - `false`) - rtl support (`.offset-x` classes will start
    responding to [dir](https://www.w3schools.com/tags/att_global_dir.asp)
    `[dir=ltr]` / `[dir=rtl]`)
  - `debug` (default - `false`) - enable debug mode

## Version Compatibility

| TailwindCSS | Bootstrap | tailwind-bootstrap-grid |
| ----------- | --------- | ----------------------- |
| 3           | 4         | 3                       |
| 3           | 5         | 5                       |
| 4           | 5         | 6+                      |

## Related

[postcss-bootstrap-4-grid](https://github.com/johnwatkins0/postcss-bootstrap-4-grid)


================================================
FILE: commitlint.config.js
================================================
module.exports = { extends: ['@commitlint/config-conventional'] };


================================================
FILE: demo/postcss.config.js
================================================
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};


================================================
FILE: demo/src/About.mdx
================================================
# tailwind-bootstrap-grid

Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.

## Installation

```
npm i -D tailwind-bootstrap-grid
```

In `tailwind.js` file:

```
module.exports = {
  plugins: [require('tailwind-bootstrap-grid')()],
};
```

And don't forget to include `components` and `utilities` in your tailwind base
css file:

```css
@tailwind preflight;
@tailwind components;
@tailwind utilities;
```

Check the [repository](https://github.com/karolis-sh/tailwind-bootstrap-grid) for details.


================================================
FILE: demo/src/App.jsx
================================================
import React from 'react';
import PropTypes from 'prop-types';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import GithubCorner from './GithubCorner';
import Direction from './Direction';
import About from './About.mdx';
import Demo from './Demo.mdx';
import theme from './theme';

function Editor(props) {
  const { children, className } = props;
  if (className === 'language-jsx') {
    return (
      <LiveProvider code={children.trim()} className="react-live">
        <LivePreview className="react-live__preview" />
        <LiveEditor
          dir="ltr"
          theme={theme}
          style={{
            fontFamily:
              "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
            fontSize: 14,
          }}
          padding={24}
        />
        <LiveError className="react-live__error" dir="ltr" />
      </LiveProvider>
    );
  }
  return <code {...props} />;
}

Editor.propTypes = {
  children: PropTypes.string,
  className: PropTypes.string,
};

function Link({ children, ...props }) {
  return (
    <a target="_blank" rel="noopener noreferrer" {...props}>
      {children}
    </a>
  );
}

Link.propTypes = {
  children: PropTypes.string,
};

const components = { code: Editor, a: Link };

export default function App() {
  return (
    <>
      <GithubCorner />
      <div className="container">
        <About components={components} />
      </div>
      <hr className="m-1" />
      <div className="container">
        <Demo components={components} />
      </div>
      <Direction />
    </>
  );
}


================================================
FILE: demo/src/Demo.mdx
================================================
## Demo

Based on [Bootstrap docs](https://getbootstrap.com/docs/5.0/layout/) + live code edit.

### Auto-layout columns

#### Equal-width

[docs](https://getbootstrap.com/docs/5.0/layout/grid/#equal-width)

```jsx
<div class="container">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
  </div>
</div>
```

#### Setting one column width

[docs](https://getbootstrap.com/docs/5.0/layout/grid/#setting-one-column-width)

```jsx
<div class="container">
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col-6">2 of 3 (wider)</div>
    <div class="col">3 of 3</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col-5">2 of 3 (wider)</div>
    <div class="col">3 of 3</div>
  </div>
</div>
```

#### Variable width content

[docs](https://getbootstrap.com/docs/5.0/layout/grid/#variable-width-content)

```jsx
<div class="container">
  <div class="row" style={{ justifyContent: 'center' }}>
    <div class="col lg:col-2">1 of 3</div>
    <div class="md:col-auto">Variable width content</div>
    <div class="col lg:col-2">3 of 3</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="md:col-auto">Variable width content</div>
    <div class="col lg:col-2">3 of 3</div>
  </div>
</div>
```

### Responsive classes

#### All breakpoints

[docs](https://getbootstrap.com/docs/5.0/layout/grid/#all-breakpoints)

```jsx
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>
```

### Stacked to horizontal

[docs](https://getbootstrap.com/docs/5.0/layout/grid/#stacked-to-horizontal)

```jsx
<div class="container">
  <div class="row">
    <div class="sm:col-8">sm:col-8</div>
    <div class="sm:col-4">sm:col-4</div>
  </div>
  <div class="row">
    <div class="sm:col">sm:col</div>
    <div class="sm:col">sm:col</div>
    <div class="sm:col">sm:col</div>
  </div>
</div>
```

### Mix and match

[docs](https://getbootstrap.com/docs/5.0/layout/grid/#mix-and-match)

```jsx
<div class="container">
  {/* Stack the columns on mobile by making one full-width and the other half-width */}
  <div class="row">
    <div class="col-12 md:col-8">col-12 md:col-8</div>
    <div class="col-6 md:col-4">col-6 md:col-4</div>
  </div>

  {/* Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop */}
  <div class="row">
    <div class="col-6 md:col-4">col-6 md:col-4</div>
    <div class="col-6 md:col-4">col-6 md:col-4</div>
    <div class="col-6 md:col-4">col-6 md:col-4</div>
  </div>

  {/* Columns are always 50% wide, on mobile and desktop */}
  <div class="row">
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>
  </div>
</div>
```

### Row columns

[docs](https://getbootstrap.com/docs/5.0/layout/grid/#row-columns)

```jsx
<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

```jsx
<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

```jsx
<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

```jsx
<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

```jsx
<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

```jsx
<div class="container">
  <div class="row row-cols-1 sm:row-cols-2 md:row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

### Nesting

[docs](https://getbootstrap.com/docs/5.0/layout/grid/#nesting)

```jsx
<div class="container">
  <div class="row">
    <div class="sm:col-3">Level 1: sm:col-3</div>
    <div class="sm:col-9">
      <div class="row">
        <div class="col-8 sm:col-6">Level 2: col-8 sm:col-6</div>
        <div class="col-4 sm:col-6">Level 2: col-4 sm:col-6</div>
      </div>
    </div>
  </div>
</div>
```

---

### Reordering

#### Order classes

[docs](https://getbootstrap.com/docs/5.0/layout/columns/#order-classes)

```jsx
<div class="container">
  <div class="row">
    <div class="col">First in DOM, no order applied</div>
    <div class="col order-5">Second in DOM, with a larger order</div>
    <div class="col order-1">Third in DOM, with an order of 1</div>
  </div>
</div>
```

```jsx
<div class="container">
  <div class="row">
    <div class="col order-last">First in DOM, ordered last</div>
    <div class="col">Second in DOM, unordered</div>
    <div class="col order-first">Third in DOM, ordered first</div>
  </div>
</div>
```

### Offsetting columns

#### Offset classes

[docs](https://getbootstrap.com/docs/5.0/layout/columns/#offset-classes)

```jsx
<div class="container">
  <div class="row">
    <div class="md:col-4">md:col-4</div>
    <div class="md:col-4 md:offset-4">md:col-4 md:offset-4</div>
  </div>
  <div class="row">
    <div class="md:col-3 md:offset-3">md:col-3 md:offset-3</div>
    <div class="md:col-3 md:offset-3">md:col-3 md:offset-3</div>
  </div>
  <div class="row">
    <div class="md:col-6 md:offset-3">md:col-6 md:offset-3</div>
  </div>
</div>
```

```jsx
<div class="container">
  <div class="row">
    <div class="sm:col-5 md:col-6">sm:col-5 md:col-6</div>
    <div class="sm:col-5 sm:offset-2 md:col-6 md:offset-0">
      sm:col-5 sm:offset-2 md:col-6 md:offset-0
    </div>
  </div>
  <div class="row">
    <div class="sm:col-6 md:col-5 lg:col-6">sm:col-6 md:col-5 lg:col-6</div>
    <div class="sm:col-6 md:col-5 md:offset-2 lg:col-6 lg:offset-0">
      sm:col-6 md:col-5 md:offset-2 lg:col-6 lg:offset-0
    </div>
  </div>
</div>
```

---

## Gutters

### Horizontal gutters

[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters)

```jsx
<div class="container">
  <div class="row gx-5">
    <div class="col">Custom column padding</div>
    <div class="col">Custom column padding</div>
  </div>
</div>
```

### Vertical gutters

[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters)

```jsx
<div class="container">
  <div class="row gy-5">
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
  </div>
</div>
```

### Horizontal & vertical gutters

[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal--vertical-gutters)

```jsx
<div class="container">
  <div class="row g-2">
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
  </div>
</div>
```

### Row columns gutters

[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#row-columns-gutters)

```jsx
<div class="container">
  <div class="row row-cols-2 lg:row-cols-5 g-2 lg:g-3">
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
  </div>
</div>
```

### No gutters

[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters)

```jsx
<div class="container">
  <div class="row g-0">
    <div class="sm:col-6 md:col-8">sm:col-6 md:col-8</div>
    <div class="col-6 md:col-4">col-6 md:col-4</div>
  </div>
</div>
```


================================================
FILE: demo/src/Direction.jsx
================================================
import React, { useState, useEffect } from 'react';

export default () => {
  const [direction, setDirection] = useState('ltr');

  useEffect(() => {
    document.documentElement.lang = 'en';
    document.documentElement.dir = direction;
  }, [direction]);

  return (
    <>
      <button
        type="button"
        id="dir-selector"
        onClick={() =>
          setDirection((value) => (value === 'ltr' ? 'rtl' : 'ltr'))
        }
      >
        {direction}
      </button>
    </>
  );
};


================================================
FILE: demo/src/GithubCorner.jsx
================================================
import React from 'react';

export default () => (
  <>
    <a
      href="https://github.com/karolis-sh/tailwind-bootstrap-grid"
      className="github-corner"
      aria-label="View source on GitHub"
    >
      <svg
        width="80"
        height="80"
        viewBox="0 0 250 250"
        style={{
          fill: '#151513',
          color: '#fff',
          position: 'fixed',
          top: 0,
          border: 0,
          right: 0,
          zIndex: 1,
        }}
        aria-hidden="true"
      >
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
        <path
          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
          fill="currentColor"
          style={{ transformOrigin: '130px 106px' }}
          className="octo-arm"
        />
        <path
          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
          fill="currentColor"
          className="octo-body"
        />
      </svg>
    </a>
    <style />
  </>
);


================================================
FILE: demo/src/index.css
================================================
@import 'tailwindcss/utilities';
/* @config '../tailwind.config.js'; */

@plugin '../../lib' {
  grid_columns: 12;
  grid_gutter_width: '1.5rem';
  generate_container: true;
  container_max_widths:
    'sm', '540px', 'md', '720px', 'lg', '960px', 'xl', '1140px', '2xl', '1320px';
  grid_gutters:
    0, 0, 1, '.25rem', 2, '.5rem', 3, '1rem', 4, '1.5rem', 5, '3rem';
}

@theme {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
}

/* 1. Base column layout */
@source inline('col');
@source inline('col-auto');
@source inline('col-{1..12..1}');
@source inline('{sm,md,lg,xl,2xl}:col');
@source inline('{sm,md,lg,xl,2xl}:col-auto');
@source inline('{sm,md,lg,xl,2xl}:col-{1..12..1}');

/* 2. Row column layout modifiers */
@source inline('row-cols-auto');
@source inline('row-cols-{1..6..1}');
@source inline('{sm,md,lg,xl,2xl}:row-cols-auto');
@source inline('{sm,md,lg,xl,2xl}:row-cols-{1..6..1}');

/* 3. Order utilities */
@source inline('order-first');
@source inline('order-last');
@source inline('order-{0..12..1}');
@source inline('{sm,md,lg,xl,2xl}:order-first');
@source inline('{sm,md,lg,xl,2xl}:order-last');
@source inline('{sm,md,lg,xl,2xl}:order-{0..12..1}');

/* 4. Offset utilities */
@source inline('offset-{0..11..1}');
@source inline('{sm,md,lg,xl,2xl}:offset-{0..11..1}');

/* 5. Gutter utilities */
@source inline('g-{0..5..1}');
@source inline('gx-{0..5..1}');
@source inline('gy-{0..5..1}');

html {
  font-family:
    system-ui,
    BlinkMacSystemFont,
    -apple-system,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

#root {
  padding: 2rem 5%;
  overflow: hidden;
}

.w-100 {
  width: 100%;
}

.container .row > .col,
.container .row > .sm\:col,
.container .row > .md\:col,
.container .row > .lg\:col,
.container .row > .xl\:col,
.container .row > .\2xl\:col,
.container .row > [class^='col-'],
.container .row > [class^='sm:col-'],
.container .row > [class^='md:col-'],
.container .row > [class^='lg:col-'],
.container .row > [class^='xl:col-'],
.container .row > [class^='2xl:col-'] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: rgba(86, 61, 124, 0.15);
  border: 1px solid rgba(86, 61, 124, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.react-live {
  margin: 1rem -15px 0;
}

.react-live__preview {
  border: 0.2rem solid #f7f7f9;
  padding: 15px;
}

.react-live__error {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  padding: 16px;
  color: white;
  background-color: red;
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}

#dir-selector {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  color: white;
  background: #151513;
  padding: 0.75rem 1rem;
  border-radius: 3px;
  border: 1px solid white;
  width: 4rem;
  text-transform: uppercase;
  cursor: pointer;
}


================================================
FILE: demo/src/index.html
================================================
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Flexbox Grid</title>
  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/index.jsx"></script>
  </body>
</html>


================================================
FILE: demo/src/index.jsx
================================================
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';

createRoot(document.getElementById('root')).render(<App />);


================================================
FILE: demo/src/theme.js
================================================
const theme = {
  plain: {
    backgroundColor: '#f7f7f9',
    color: '#212529',
  },
  styles: [
    {
      types: ['tag'],
      style: {
        color: '#2f6f9f',
      },
    },
    {
      types: ['attr-name', 'attr-equals'],
      style: {
        color: '#4f9fcf',
      },
    },
    {
      types: ['attr-value'],
      style: {
        color: '#d44950',
      },
    },
  ],
};

export default theme;


================================================
FILE: demo/tailwind.config.js
================================================
module.exports = {
  plugins: [
    require('../lib')({
      debug: true,
      rtl: true,
      container_max_widths: [
        'sm',
        '540px',
        'md',
        '720px',
        'lg',
        '960px',
        'xl',
        '1140px',
        '2xl',
        '1320px',
      ],
      grid_gutters: [
        '0',
        '0',
        1,
        '.25rem',
        2,
        '.5rem',
        3,
        '1rem',
        4,
        '1.5rem',
        5,
        '3rem',
      ],
    }),
  ],
};


================================================
FILE: demo/vite.config.mjs
================================================
import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import mdx from '@mdx-js/rollup';

export default defineConfig({
  plugins: [mdx(), react()],
  root: './src',
  base: './',
  build: {
    outDir: path.resolve(__dirname, '../build'),
    emptyOutDir: true,
  },
  server: {
    port: 3000,
  },
  define: {
    global: {},
  },
});


================================================
FILE: netlify.toml
================================================
[build]
publish = "build/"
command = "npm run build"


================================================
FILE: package.json
================================================
{
  "name": "tailwind-bootstrap-grid",
  "version": "7.0.0",
  "description": "Tailwind CSS plugin to generate Bootstrap flexbox grid system.",
  "keywords": [
    "bootstrap",
    "flexbox",
    "grid",
    "grid system",
    "layout",
    "rtl",
    "tailwindcss"
  ],
  "repository": "karolis-sh/tailwind-bootstrap-grid",
  "license": "MIT",
  "author": "Karolis Šarapnickis <hi@karolis.sh>",
  "main": "lib/index.js",
  "types": "types/index.d.ts",
  "files": [
    "lib",
    "types"
  ],
  "scripts": {
    "build": "run-s build:lib build:demo",
    "build:demo": "cd demo && vite build",
    "build:lib": "tsc",
    "clean": "rm -rf build lib",
    "commit": "cz",
    "dev": "cd demo && vite",
    "format": "run-p format:*",
    "format:js": "prettier --write .",
    "format:package-json": "sort-package-json",
    "lint": "run-p lint:*",
    "lint:js": "eslint . --cache",
    "lint:md": "markdownlint-cli2 '**/*.md' '!node_modules' '!**/node_modules' '!**/CHANGELOG.md'",
    "lint:types": "tsc --noEmit",
    "prepare": "husky",
    "qa": "run-p lint",
    "release": "npm i && run-s clean build qa && standard-version --no-verify && git push --follow-tags --no-verify && npm publish",
    "try-demo": "run-s clean build && serve build"
  },
  "lint-staged": {
    "*.{ts,js,jsx,mjs}": "eslint --fix",
    "*.{md,css,json,yml,toml}": "prettier --write",
    "package.json": "sort-package-json"
  },
  "dependencies": {
    "zod": "^3.24.4"
  },
  "devDependencies": {
    "@commitlint/cli": "^20.3.1",
    "@commitlint/config-conventional": "^20.3.1",
    "@k.sh/eslint-plugin": "^0.9.1",
    "@k.sh/prettier-config": "^0.5.0",
    "@mdx-js/rollup": "^3.1.1",
    "@tailwindcss/postcss": "^4.1.18",
    "@types/node": "^25.0.8",
    "@vitejs/plugin-react": "^5.1.2",
    "commitizen": "^4.3.1",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "^8.55.0",
    "husky": "^9.1.7",
    "lint-staged": "^16.2.7",
    "markdownlint-cli2": "^0.20.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.5.6",
    "prettier": "^3.7.4",
    "prop-types": "^15.8.1",
    "react": "^19.2.3",
    "react-dom": "^19.2.3",
    "react-live": "^4.1.8",
    "serve": "^14.2.5",
    "sort-package-json": "^3.6.0",
    "standard-version": "^9.5.0",
    "tailwindcss": "^4.1.18",
    "typescript": "^5.9.3",
    "vite": "^7.3.1"
  },
  "peerDependencies": {
    "tailwindcss": "^4"
  },
  "engines": {
    "node": ">= 12.0.0"
  },
  "volta": {
    "node": "24.0.2"
  }
}


================================================
FILE: release.sh
================================================
#!/bin/sh

if [ -z "$(npm whoami)" ]; then
  echo "🚨 Not logged in to npm"
  exit 1
fi

if [ -z "$(git status --porcelain)" ]; then
  git checkout main
  git pull
  npm run release
else
  git status --porcelain
  echo "🔼 Working directory not clean"
  exit 1
fi


================================================
FILE: src/index.ts
================================================
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable node/no-missing-import */
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable node/no-unsupported-features/es-syntax */

import plugin from 'tailwindcss/plugin';
import { z } from 'zod';

type CssInJs = {
  [key: string]: string | string[] | CssInJs | CssInJs[];
};

module.exports = plugin.withOptions((pluginOptions) => (options) => {
  const { config, addBase, addComponents } = options;

  const screens: Record<string, string> = config('theme.screens');
  const screenKeys = Object.keys(screens).filter(
    (key) => key !== '__CSS_VALUES__',
  );

  const pluginOptionsSchema = z
    .object({
      debug: z.coerce.boolean().default(false),
      grid_columns: z.coerce.number().int().min(3).default(12),
      grid_gutter_width: z.coerce.string().default('1.5rem'),
      grid_gutters: z
        .array(z.coerce.string())
        .default(['0', '0'])
        .refine((value) => value.length % 2 === 0, {
          message: 'grid_gutters array length must be an even number',
        })
        .transform((value) => {
          const result: Record<string, string> = {};
          for (let i = 0; i < value.length; i += 2) {
            result[value[i]!] = value[i + 1]!;
          }
          return result;
        }),
      generate_container: z.coerce.boolean().default(true),
      container_max_widths: z
        .array(z.coerce.string())
        .default([])
        .refine((value) => value.length % 2 === 0, {
          message: 'container_max_widths array length must be an even number',
        })
        .transform((value) => {
          const result: Record<string, string> = {};
          for (let i = 0; i < value.length; i += 2) {
            result[value[i]!] = value[i + 1]!;
          }
          return result;
        }),
    })
    .default({});

  const parsedPluginOptions = pluginOptionsSchema.safeParse(pluginOptions);
  if (!parsedPluginOptions.success) {
    throw new Error(
      `tailwind-bootstrap-grid options are invalid: ${parsedPluginOptions.error.message}`,
    );
  }

  const {
    debug: _debug,
    grid_columns,
    grid_gutter_width,
    grid_gutters,
    generate_container,
    container_max_widths,
  } = parsedPluginOptions.data;

  if (_debug) {
    console.group('tailwind-bootstrap-grid options');
    console.debug('raw input', pluginOptions);
    console.debug('final output', parsedPluginOptions.data);
    console.groupEnd();
  }

  const columns = Array.from(Array(grid_columns), (_, index) => index + 1);
  const rowColsSteps = columns.slice(0, Math.floor(grid_columns / 2));

  {
    // =============================================================================================
    // Container
    // =============================================================================================
    if (generate_container) {
      addBase({
        ':root': Object.fromEntries(
          screenKeys.map((name) => [
            `@media (min-width: ${screens[name]})`,
            {
              '--container-max-width':
                container_max_widths[name] || screens[name]!,
            },
          ]),
        ),
      });
      addComponents({
        '.container, .container-fluid': {
          maxWidth: 'var(--container-max-width)',
          width: '100%',
          marginInline: 'auto',
          paddingInline: `var(--bs-gutter-x, calc(${grid_gutter_width} / 2))`,
        },
      });
    }
  }

  {
    // =============================================================================================
    // Row
    // =============================================================================================
    addComponents({
      '.row': {
        '--bs-gutter-x': grid_gutter_width,
        '--bs-gutter-y': '0',
        display: 'flex',
        flexWrap: 'wrap',
        marginTop: 'calc(var(--bs-gutter-y) * -1)',
        marginInline: 'calc(var(--bs-gutter-x) / -2)',
        '> *': {
          boxSizing: 'border-box',
          flexShrink: '0',
          width: '100%',
          maxWidth: '100%',
          paddingInline: 'calc(var(--bs-gutter-x) / 2)',
          marginTop: 'var(--bs-gutter-y)',
        },
      },
    });
  }

  {
    // =============================================================================================
    // Columns
    // =============================================================================================
    addComponents([
      {
        '.col': {
          flex: '1 0 0%',
          width: 'initial', // "hack" to enforce specific css import order, https://github.com/tailwindlabs/tailwindcss/issues/15045#issuecomment-2488114451
          display: 'initial', // "hack" to enforce specific css import order
        },
        '.row-cols-auto': {
          '> *': {
            flex: '0 0 auto',
            width: 'auto',
          },
        },
      },
      ...rowColsSteps.map((rowCol) => ({
        [`.row-cols-${rowCol}`]: {
          '> *': {
            flex: '0 0 auto',
            width: `${100 / rowCol}%`,
            display: 'initial', // "hack" to enforce specific css import order
          },
        },
      })),
      {
        '.col-auto': {
          flex: '0 0 auto',
          width: 'auto',
        },
      },
      ...columns.map((size) => ({
        [`.col-${size}`]: {
          flex: '0 0 auto',
          width: `${(100 / grid_columns) * size}%`,
        },
      })),
    ]);
  }

  {
    // =============================================================================================
    // Offsets
    // =============================================================================================
    addComponents([
      ...[0, ...columns.slice(0, -1)].map((size) => ({
        [`.offset-${size}`]: {
          marginInlineStart: `${(100 / grid_columns) * size}%`,
        },
      })),
    ]);
  }

  {
    // =============================================================================================
    // Gutters
    // =============================================================================================
    if (Object.keys(grid_gutters).length) {
      addComponents(
        Object.entries(grid_gutters).map(
          ([key, value]): Record<string, CssInJs> => ({
            [`.g-${key}, .gx-${key}`]: {
              '--bs-gutter-x': value,
            },
            [`.g-${key}, .gy-${key}`]: {
              '--bs-gutter-y': value,
            },
          }),
        ),
      );
    }
  }

  {
    // =============================================================================================
    // Ordering
    // =============================================================================================
    addComponents([
      {
        '.order-first': { order: '-1' },
        '.order-last': { order: `${grid_columns + 1}` },
      },
      ...[0, ...columns].map((size) => ({
        [`.order-${size}`]: { order: `${size}` },
      })),
    ]);
  }
});


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "ES2018",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,

    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,

    "outDir": "lib",
    "sourceMap": true,
    "declaration": true,

    "lib": ["es2022"]
  },
  "include": ["src/**/*"],
  "exclude": ["dist"]
}


================================================
FILE: types/index.d.ts
================================================
declare module 'tailwind-bootstrap-grid' {
  // eslint-disable-next-line node/no-unsupported-features/es-syntax, import/no-unresolved, node/no-missing-import
  import { PluginCreator } from 'tailwindcss/types/config';

  interface TailwindBootstrapGridOptions {
    grid_columns?: number;
    grid_gutter_width?: string;
    grid_gutters?: string[];
    generate_container?: boolean;
    container_max_widths?: string[];
  }

  function tailwindBootstrapGrid(
    options?: TailwindBootstrapGridOptions,
  ): PluginCreator;
  export = tailwindBootstrapGrid;
}