[
  {
    "path": ".czrc",
    "content": "{\n  \"path\": \"cz-conventional-changelog\"\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "# editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[Makefile]\nindent_style = tab\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".eslintignore",
    "content": "node_modules\ndemo\n/build\n/lib\n"
  },
  {
    "path": ".eslintrc.json",
    "content": "{\n  \"extends\": [\n    \"plugin:@k.sh/esnext\",\n    \"plugin:@k.sh/node\",\n    \"plugin:@k.sh/prettier\",\n    \"plugin:@k.sh/typescript\"\n  ],\n  \"plugins\": [],\n  \"env\": {}\n}\n"
  },
  {
    "path": ".github/workflows/commitlint.yml",
    "content": "name: Lint Commit Messages\non: [pull_request]\n\njobs:\n  commitlint:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n        with:\n          fetch-depth: 0\n      - uses: wagoid/commitlint-github-action@v2\n"
  },
  {
    "path": ".github/workflows/nodejs.yml",
    "content": "name: Node.js CI\n\non:\n  push:\n    branches: [main]\n  pull_request:\n    branches: [main]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 24\n          cache: 'npm'\n      - run: npm ci\n      - run: npm run build\n      - run: npm run qa\n"
  },
  {
    "path": ".gitignore",
    "content": "# npm files\nnode_modules\n*.log*\n\n# project\n/build\n/lib\n/samples/*/output.css\n.eslintcache\n"
  },
  {
    "path": ".husky/.gitignore",
    "content": "_\n"
  },
  {
    "path": ".husky/commit-msg",
    "content": "npx --no -- commitlint --edit \"$1\"\n"
  },
  {
    "path": ".husky/pre-commit",
    "content": "npx lint-staged\n"
  },
  {
    "path": ".husky/pre-push",
    "content": "npm run qa\n"
  },
  {
    "path": ".markdownlint.json",
    "content": "{\n  \"default\": true\n}\n"
  },
  {
    "path": ".prettierignore",
    "content": "# npm files\nnode_modules\npackage.json\n\n# project\n/build\n/samples/*/output.css\nCHANGELOG.md\n.husky/_/\n"
  },
  {
    "path": ".prettierrc.js",
    "content": "module.exports = require('@k.sh/prettier-config');\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.\n\n## [7.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v6.0.0...v7.0.0) (2026-01-18)\n\n\n### ⚠ BREAKING CHANGES\n\n* Removed `rtl` option - RTL is now automatic.\n\n### Features\n\n* replace physical properties with CSS logical properties ([7bdf231](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/7bdf2311e84fbb586d1e9172081639bc28e8738b))\n\n## [6.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v5.1.0...v6.0.0) (2025-05-14)\n\n\n### ⚠ BREAKING CHANGES\n\n* **tailwind:** drop tailwind v3 support, change plugin options structure\n\n### Features\n\n* **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)\n\n## [5.1.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v5.0.1...v5.1.0) (2023-11-25)\n\n\n### Features\n\n* add TypeScript types ([dc82b58](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/dc82b581f823ed8c553ed0c22747ac97f033c09e))\n\n### [5.0.1](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v5.0.0...v5.0.1) (2022-04-17)\n\n\n### Bug Fixes\n\n* disable misleading container warning for some cases ([84033c0](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/84033c084570bd366dd8530f6506154ebc2e7a76))\n\n## [5.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v4.0.0...v5.0.0) (2022-02-20)\n\n\n### ⚠ BREAKING CHANGES\n\n* drop TailwindCSS 2 support\n\n### Features\n\n* add TailwindCSS 3 support ([95b8062](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/95b8062add721372b7d07b6ecc3f70598446cdcd))\n\n\n### Bug Fixes\n\n* bump joi ([665dda8](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/665dda89e590c40c7736d92c39bf9b69f2d0221b))\n* swap chalk with picocolors ([d4f9be2](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/d4f9be2758398e1fd982220c9cd92cc9b14fc637))\n* use tailwindcss/plugin wrapper ([e920c0b](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/e920c0becccde9020d91a55fc6d500a71f6ea7ea))\n\n## [4.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.3.0...v4.0.0) (2021-05-19)\n\n\n### ⚠ BREAKING CHANGES\n\n* Tailwind CSS v1 will no longer be supported.\n* Gutter class changes and removing gridGutterWidths, generateNoGutters options.\n\n### Features\n\n* 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)\n* remove Tailwind CSS v1 support ([2c03247](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/2c0324781c508563b9e3d1e4dd6beef842ae73ef))\n\n\n### Bug Fixes\n\n* **deps:** bump chalk, joi, lodash, reduce-css-calc ([e512bd9](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/e512bd91a193dd0e3b480d6599decadf539d61d9))\n\n## [3.3.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.2.0...v3.3.0) (2021-03-04)\n\n\n### Features\n\n* add plugin scoped respectImportant support ([a06f8c6](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/a06f8c61a97d1fdf4cd5111d53224646b6c54b4e))\n\n## [3.2.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.1.0...v3.2.0) (2021-03-03)\n\n\n### Features\n\n* 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)\n* add TailwindCSS 2 support ([084772c](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/084772c43fb99517c4bef9882de9348b595a27e5))\n\n## [3.1.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.0.1...v3.1.0) (2020-11-04)\n\n### Features\n\n- add support for tailwindcss@1.9.6 ([781133d](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/781133d48fae61c58c17f01d480396661b29837c))\n\n### [3.0.1](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v3.0.0...v3.0.1) (2020-11-04)\n\n### Bug Fixes\n\n- fix container correPlugin detection ([93d476f](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/93d476f4f4c1caf7ebfb64bee5617925677ec994))\n\n## [3.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.2.2...v3.0.0) (2020-11-04)\n\n### ⚠ BREAKING CHANGES\n\n- now there are no defaults for container's max-width properties\n\n### Features\n\n- 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))\n- change containerMaxWidths default to {} ([1d66105](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/1d66105a3159d4ab11898e7decf9e31934b14985))\n\n### Bug Fixes\n\n- add missing spacings for .col-\\* on responsive gutters ([112ed90](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/112ed902588e0ef83f9de7c9064cf2df782e3bc7))\n- add missing spacings for .row on responsive gutters ([cc4ebb8](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/cc4ebb8cc903bccea7591e39603da98e91d53152))\n- add plugin options validation & make gridGutterWidths stricter ([84b32c4](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/84b32c49314be410007ac0002fe37dd18968eb35))\n- reduce redundant .container-fluid styles output ([e8966c5](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/e8966c563130f71584a897f957d9bd7e72c173d7))\n\n### [2.2.2](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.2.1...v2.2.2) (2020-08-18)\n\n### [2.2.1](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.2.0...v2.2.1) (2020-08-17)\n\n### Bug Fixes\n\n- default gutter width when using gutters by breakpoint ([e77a5ef](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/e77a5ef7fac3f3ab7e3a0f8719999ef2b2d9ba06))\n\n## [2.2.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.1.0...v2.2.0) (2020-08-17)\n\n### Features\n\n- responsive gutter widths ([ace11e3](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/ace11e3ced682cffad1773cc85a0d40b317eefe1))\n\n### Bug Fixes\n\n- upgrade to lodash@4.17.15 ([f06f622](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/f06f622009de449e4e832dcca5de8dcf4f72fd90))\n\n## [2.1.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.0.2...v2.1.0) (2019-06-06)\n\n### Bug Fixes\n\n- remove redundant new lines from output ([703bfea](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/703bfea))\n\n### Features\n\n- **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)\n\n### Tests\n\n- update test setup ([9cd4613](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/9cd4613))\n\n### [2.0.2](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v2.0.0...v2.0.2) (2019-05-14)\n\n### Bug Fixes\n\n- version bump ([057df19](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/057df19))\n\n## [2.0.0](https://github.com/karolis-sh/tailwind-bootstrap-grid/compare/v1.2.0...v2.0.0) (2019-05-14)\n\n### Features\n\n- **tailwind:** add tailwind v1 support ([335b212](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/335b212))\n\n### Tests\n\n- simplify test configs ([fea50c0](https://github.com/karolis-sh/tailwind-bootstrap-grid/commit/fea50c0))\n\n### BREAKING CHANGES\n\n- **tailwind:** Drop tailwind 0.x.x version support\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing\n\n## Reporting Issues\n\nIf you have found what you think is a bug, please file an issue.\n\n## Suggesting new features\n\nIf you are here to suggest a feature, first create an issue if it does not\nalready exist. From there, we will discuss use-cases for the feature and then\nfinally discuss how it could be implemented.\n\n## Development\n\nIf you have been assigned to fix an issue or develop a new feature, please\nfollow these steps to get started:\n\n- Fork this repository\n- Install dependencies by running `npm i`\n- Implement your changes\n- Format all files `npm run format`\n- Make sure the tests are passing `npm run qa`\n- Git stage your required changes and commit (see below commit guidelines)\n- Submit PR for review\n\n## Commit message conventions\n\nThis project is using [Conventional Commit Message Conventions](https://www.conventionalcommits.org/en/v1.0.0/).\n\nWe have very precise rules over how our git commit messages can be formatted.\nThis leads to **more readable messages** that are easy to follow when looking\nthrough the **project history**.\n\n### Commit Message Format\n\n> Use [commitizen](https://github.com/commitizen/cz-cli) for interactive command\n> line utility\n\nEach commit message consists of a **header**, a **body** and a **footer**. The\nheader has a special format that includes a **type**, a **scope** and a **subject**:\n\n```txt\n<type>(<scope>): <subject>\n<BLANK LINE>\n<body>\n<BLANK LINE>\n<footer>\n```\n\nThe **header** is mandatory and the **scope** of the header is optional.\n\nAny line of the commit message cannot be longer than 100 characters! This allows\nthe message to be easier to read on GitHub as well as in various git tools.\n\n### Type\n\nMust be one of the following:\n\n- **feat**: A new feature\n- **fix**: A bug fix\n- **docs**: Documentation only changes\n- **style**: Changes that do not affect the meaning of the code (white-space,\n  formatting, missing semi-colons, etc)\n- **refactor**: A code change that neither fixes a bug nor adds a feature\n- **perf**: A code change that improves performance\n- **test**: Adding missing or correcting existing tests\n- **chore**: Changes to the build process or auxiliary tools and libraries such\n  as documentation\n  generation\n\n### Scope\n\nThe scope could be anything specifying place of the commit change.\n\n### Subject\n\nThe subject contains succinct description of the change:\n\n- use the imperative, present tense: \"change\" not \"changed\" nor \"changes\"\n- don't capitalize first letter\n- no dot (.) at the end\n\n### Body\n\nJust as in the **subject**, use the imperative, present tense: \"change\" not\n\"changed\" nor \"changes\". The body should include the motivation for the change\nand contrast this with previous behavior.\n\n### Footer\n\nThe footer should contain any information about **Breaking Changes** and is also\nthe 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).\n\n**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space\nor two newlines. The rest of the commit message is then used for this.\n\n### Example\n\nHere is an example of the release type that will be done based on a commit messages:\n\n<!-- markdownlint-disable no-inline-html line-length -->\n<!-- prettier-ignore-start -->\n\n| Commit message | Release type |\n| --- | --- |\n| `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release |\n| `feat(pencil): add graphiteWidth option` | ~~Minor~~ Feature Release |\n| `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 |\n\n<!-- prettier-ignore-end -->\n\n<!-- markdownlint-enable no-inline-html line-length -->\n\n### Revert\n\nIf the commit reverts a previous commit, it should begin with `revert:`, followed\nby the header of the reverted commit. In the body it should say:\n`This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.\n\n## Pull requests\n\nMaintainers merge pull requests by squashing all commits and editing the commit\nmessage if necessary using the GitHub user interface.\n\nUse an appropriate commit type. Be especially careful with breaking changes.\n\n## Releases\n\nThe `main` branch is the main release branch, where changes get released periodically.\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Karolis Šarapnickis\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# tailwind-bootstrap-grid\n\n[![npm version](https://img.shields.io/npm/v/tailwind-bootstrap-grid)](https://www.npmjs.com/package/tailwind-bootstrap-grid)\n![license](https://img.shields.io/npm/l/tailwind-bootstrap-grid)\n\nBootstrap **v5** flexbox grid system as a Tailwind CSS plugin.\n\nCheck the [demo playground](https://tailwind-bootstrap-grid.netlify.app/).\n\n## Installation\n\n```shell\nnpm i -D tailwind-bootstrap-grid\n```\n\nIn your `index.css` file:\n\n```css\n@import 'tailwindcss';\n\n@plugin 'tailwind-bootstrap-grid' {\n  container_max_widths:\n    'sm', '540px', 'md', '720px', 'lg', '960px', 'xl', '1140px', '2xl', '1320px';\n}\n```\n\nOr via `tailwind.config.js` file:\n\n```js\nmodule.exports = {\n  plugins: [\n    require('tailwind-bootstrap-grid')({\n      container_max_widths: [\n        'sm',\n        '540px',\n        'md',\n        '720px',\n        'lg',\n        '960px',\n        'xl',\n        '1140px',\n        '2xl',\n        '1320px',\n      ],\n    }),\n  ],\n};\n```\n\nThis will generate the Bootstrap v5 flexbox grid.\n\n## Options\n\n- Original Bootstrap grid's options:\n  - `grid_columns` (default - `12`) - grid size\n  - `grid_gutter_width` (default - `\"1.5rem\"`) - container and rows gutter width\n  - `grid_gutters` (default - `[0, 0]`) - gutter variable class steps\n    (`--bs-gutter-x`, `--bs-gutter-y`)\n  - `container_max_widths` (default - `[]`) - the `max-width` container value for\n    each breakpoint\n\n- Extra options:\n  - `generate_container` (default - `true`) - whether to generate `.container` and\n    `.container-fluid` classes\n  - `rtl` (default - `false`) - rtl support (`.offset-x` classes will start\n    responding to [dir](https://www.w3schools.com/tags/att_global_dir.asp)\n    `[dir=ltr]` / `[dir=rtl]`)\n  - `debug` (default - `false`) - enable debug mode\n\n## Version Compatibility\n\n| TailwindCSS | Bootstrap | tailwind-bootstrap-grid |\n| ----------- | --------- | ----------------------- |\n| 3           | 4         | 3                       |\n| 3           | 5         | 5                       |\n| 4           | 5         | 6+                      |\n\n## Related\n\n[postcss-bootstrap-4-grid](https://github.com/johnwatkins0/postcss-bootstrap-4-grid)\n"
  },
  {
    "path": "commitlint.config.js",
    "content": "module.exports = { extends: ['@commitlint/config-conventional'] };\n"
  },
  {
    "path": "demo/postcss.config.js",
    "content": "module.exports = {\n  plugins: {\n    '@tailwindcss/postcss': {},\n  },\n};\n"
  },
  {
    "path": "demo/src/About.mdx",
    "content": "# tailwind-bootstrap-grid\n\nBootstrap v5 flexbox grid system as a Tailwind CSS plugin.\n\n## Installation\n\n```\nnpm i -D tailwind-bootstrap-grid\n```\n\nIn `tailwind.js` file:\n\n```\nmodule.exports = {\n  plugins: [require('tailwind-bootstrap-grid')()],\n};\n```\n\nAnd don't forget to include `components` and `utilities` in your tailwind base\ncss file:\n\n```css\n@tailwind preflight;\n@tailwind components;\n@tailwind utilities;\n```\n\nCheck the [repository](https://github.com/karolis-sh/tailwind-bootstrap-grid) for details.\n"
  },
  {
    "path": "demo/src/App.jsx",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';\nimport GithubCorner from './GithubCorner';\nimport Direction from './Direction';\nimport About from './About.mdx';\nimport Demo from './Demo.mdx';\nimport theme from './theme';\n\nfunction Editor(props) {\n  const { children, className } = props;\n  if (className === 'language-jsx') {\n    return (\n      <LiveProvider code={children.trim()} className=\"react-live\">\n        <LivePreview className=\"react-live__preview\" />\n        <LiveEditor\n          dir=\"ltr\"\n          theme={theme}\n          style={{\n            fontFamily:\n              \"SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\",\n            fontSize: 14,\n          }}\n          padding={24}\n        />\n        <LiveError className=\"react-live__error\" dir=\"ltr\" />\n      </LiveProvider>\n    );\n  }\n  return <code {...props} />;\n}\n\nEditor.propTypes = {\n  children: PropTypes.string,\n  className: PropTypes.string,\n};\n\nfunction Link({ children, ...props }) {\n  return (\n    <a target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n      {children}\n    </a>\n  );\n}\n\nLink.propTypes = {\n  children: PropTypes.string,\n};\n\nconst components = { code: Editor, a: Link };\n\nexport default function App() {\n  return (\n    <>\n      <GithubCorner />\n      <div className=\"container\">\n        <About components={components} />\n      </div>\n      <hr className=\"m-1\" />\n      <div className=\"container\">\n        <Demo components={components} />\n      </div>\n      <Direction />\n    </>\n  );\n}\n"
  },
  {
    "path": "demo/src/Demo.mdx",
    "content": "## Demo\n\nBased on [Bootstrap docs](https://getbootstrap.com/docs/5.0/layout/) + live code edit.\n\n### Auto-layout columns\n\n#### Equal-width\n\n[docs](https://getbootstrap.com/docs/5.0/layout/grid/#equal-width)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col\">1 of 2</div>\n    <div class=\"col\">2 of 2</div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">1 of 3</div>\n    <div class=\"col\">2 of 3</div>\n    <div class=\"col\">3 of 3</div>\n  </div>\n</div>\n```\n\n#### Setting one column width\n\n[docs](https://getbootstrap.com/docs/5.0/layout/grid/#setting-one-column-width)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col\">1 of 3</div>\n    <div class=\"col-6\">2 of 3 (wider)</div>\n    <div class=\"col\">3 of 3</div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">1 of 3</div>\n    <div class=\"col-5\">2 of 3 (wider)</div>\n    <div class=\"col\">3 of 3</div>\n  </div>\n</div>\n```\n\n#### Variable width content\n\n[docs](https://getbootstrap.com/docs/5.0/layout/grid/#variable-width-content)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\" style={{ justifyContent: 'center' }}>\n    <div class=\"col lg:col-2\">1 of 3</div>\n    <div class=\"md:col-auto\">Variable width content</div>\n    <div class=\"col lg:col-2\">3 of 3</div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">1 of 3</div>\n    <div class=\"md:col-auto\">Variable width content</div>\n    <div class=\"col lg:col-2\">3 of 3</div>\n  </div>\n</div>\n```\n\n### Responsive classes\n\n#### All breakpoints\n\n[docs](https://getbootstrap.com/docs/5.0/layout/grid/#all-breakpoints)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col\">col</div>\n    <div class=\"col\">col</div>\n    <div class=\"col\">col</div>\n    <div class=\"col\">col</div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-8\">col-8</div>\n    <div class=\"col-4\">col-4</div>\n  </div>\n</div>\n```\n\n### Stacked to horizontal\n\n[docs](https://getbootstrap.com/docs/5.0/layout/grid/#stacked-to-horizontal)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"sm:col-8\">sm:col-8</div>\n    <div class=\"sm:col-4\">sm:col-4</div>\n  </div>\n  <div class=\"row\">\n    <div class=\"sm:col\">sm:col</div>\n    <div class=\"sm:col\">sm:col</div>\n    <div class=\"sm:col\">sm:col</div>\n  </div>\n</div>\n```\n\n### Mix and match\n\n[docs](https://getbootstrap.com/docs/5.0/layout/grid/#mix-and-match)\n\n```jsx\n<div class=\"container\">\n  {/* Stack the columns on mobile by making one full-width and the other half-width */}\n  <div class=\"row\">\n    <div class=\"col-12 md:col-8\">col-12 md:col-8</div>\n    <div class=\"col-6 md:col-4\">col-6 md:col-4</div>\n  </div>\n\n  {/* Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop */}\n  <div class=\"row\">\n    <div class=\"col-6 md:col-4\">col-6 md:col-4</div>\n    <div class=\"col-6 md:col-4\">col-6 md:col-4</div>\n    <div class=\"col-6 md:col-4\">col-6 md:col-4</div>\n  </div>\n\n  {/* Columns are always 50% wide, on mobile and desktop */}\n  <div class=\"row\">\n    <div class=\"col-6\">col-6</div>\n    <div class=\"col-6\">col-6</div>\n  </div>\n</div>\n```\n\n### Row columns\n\n[docs](https://getbootstrap.com/docs/5.0/layout/grid/#row-columns)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row row-cols-2\">\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n  </div>\n</div>\n```\n\n```jsx\n<div class=\"container\">\n  <div class=\"row row-cols-3\">\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n  </div>\n</div>\n```\n\n```jsx\n<div class=\"container\">\n  <div class=\"row row-cols-auto\">\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n  </div>\n</div>\n```\n\n```jsx\n<div class=\"container\">\n  <div class=\"row row-cols-4\">\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n  </div>\n</div>\n```\n\n```jsx\n<div class=\"container\">\n  <div class=\"row row-cols-4\">\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col-6\">Column</div>\n    <div class=\"col\">Column</div>\n  </div>\n</div>\n```\n\n```jsx\n<div class=\"container\">\n  <div class=\"row row-cols-1 sm:row-cols-2 md:row-cols-4\">\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n    <div class=\"col\">Column</div>\n  </div>\n</div>\n```\n\n### Nesting\n\n[docs](https://getbootstrap.com/docs/5.0/layout/grid/#nesting)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"sm:col-3\">Level 1: sm:col-3</div>\n    <div class=\"sm:col-9\">\n      <div class=\"row\">\n        <div class=\"col-8 sm:col-6\">Level 2: col-8 sm:col-6</div>\n        <div class=\"col-4 sm:col-6\">Level 2: col-4 sm:col-6</div>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n---\n\n### Reordering\n\n#### Order classes\n\n[docs](https://getbootstrap.com/docs/5.0/layout/columns/#order-classes)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col\">First in DOM, no order applied</div>\n    <div class=\"col order-5\">Second in DOM, with a larger order</div>\n    <div class=\"col order-1\">Third in DOM, with an order of 1</div>\n  </div>\n</div>\n```\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col order-last\">First in DOM, ordered last</div>\n    <div class=\"col\">Second in DOM, unordered</div>\n    <div class=\"col order-first\">Third in DOM, ordered first</div>\n  </div>\n</div>\n```\n\n### Offsetting columns\n\n#### Offset classes\n\n[docs](https://getbootstrap.com/docs/5.0/layout/columns/#offset-classes)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"md:col-4\">md:col-4</div>\n    <div class=\"md:col-4 md:offset-4\">md:col-4 md:offset-4</div>\n  </div>\n  <div class=\"row\">\n    <div class=\"md:col-3 md:offset-3\">md:col-3 md:offset-3</div>\n    <div class=\"md:col-3 md:offset-3\">md:col-3 md:offset-3</div>\n  </div>\n  <div class=\"row\">\n    <div class=\"md:col-6 md:offset-3\">md:col-6 md:offset-3</div>\n  </div>\n</div>\n```\n\n```jsx\n<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"sm:col-5 md:col-6\">sm:col-5 md:col-6</div>\n    <div class=\"sm:col-5 sm:offset-2 md:col-6 md:offset-0\">\n      sm:col-5 sm:offset-2 md:col-6 md:offset-0\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"sm:col-6 md:col-5 lg:col-6\">sm:col-6 md:col-5 lg:col-6</div>\n    <div class=\"sm:col-6 md:col-5 md:offset-2 lg:col-6 lg:offset-0\">\n      sm:col-6 md:col-5 md:offset-2 lg:col-6 lg:offset-0\n    </div>\n  </div>\n</div>\n```\n\n---\n\n## Gutters\n\n### Horizontal gutters\n\n[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row gx-5\">\n    <div class=\"col\">Custom column padding</div>\n    <div class=\"col\">Custom column padding</div>\n  </div>\n</div>\n```\n\n### Vertical gutters\n\n[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row gy-5\">\n    <div class=\"col-6\">Custom column padding</div>\n    <div class=\"col-6\">Custom column padding</div>\n    <div class=\"col-6\">Custom column padding</div>\n    <div class=\"col-6\">Custom column padding</div>\n  </div>\n</div>\n```\n\n### Horizontal & vertical gutters\n\n[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal--vertical-gutters)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row g-2\">\n    <div class=\"col-6\">Custom column padding</div>\n    <div class=\"col-6\">Custom column padding</div>\n    <div class=\"col-6\">Custom column padding</div>\n    <div class=\"col-6\">Custom column padding</div>\n  </div>\n</div>\n```\n\n### Row columns gutters\n\n[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#row-columns-gutters)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row row-cols-2 lg:row-cols-5 g-2 lg:g-3\">\n    <div class=\"col\">Row column</div>\n    <div class=\"col\">Row column</div>\n    <div class=\"col\">Row column</div>\n    <div class=\"col\">Row column</div>\n    <div class=\"col\">Row column</div>\n    <div class=\"col\">Row column</div>\n    <div class=\"col\">Row column</div>\n    <div class=\"col\">Row column</div>\n    <div class=\"col\">Row column</div>\n    <div class=\"col\">Row column</div>\n  </div>\n</div>\n```\n\n### No gutters\n\n[docs](https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters)\n\n```jsx\n<div class=\"container\">\n  <div class=\"row g-0\">\n    <div class=\"sm:col-6 md:col-8\">sm:col-6 md:col-8</div>\n    <div class=\"col-6 md:col-4\">col-6 md:col-4</div>\n  </div>\n</div>\n```\n"
  },
  {
    "path": "demo/src/Direction.jsx",
    "content": "import React, { useState, useEffect } from 'react';\n\nexport default () => {\n  const [direction, setDirection] = useState('ltr');\n\n  useEffect(() => {\n    document.documentElement.lang = 'en';\n    document.documentElement.dir = direction;\n  }, [direction]);\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        id=\"dir-selector\"\n        onClick={() =>\n          setDirection((value) => (value === 'ltr' ? 'rtl' : 'ltr'))\n        }\n      >\n        {direction}\n      </button>\n    </>\n  );\n};\n"
  },
  {
    "path": "demo/src/GithubCorner.jsx",
    "content": "import React from 'react';\n\nexport default () => (\n  <>\n    <a\n      href=\"https://github.com/karolis-sh/tailwind-bootstrap-grid\"\n      className=\"github-corner\"\n      aria-label=\"View source on GitHub\"\n    >\n      <svg\n        width=\"80\"\n        height=\"80\"\n        viewBox=\"0 0 250 250\"\n        style={{\n          fill: '#151513',\n          color: '#fff',\n          position: 'fixed',\n          top: 0,\n          border: 0,\n          right: 0,\n          zIndex: 1,\n        }}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\" />\n        <path\n          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\"\n          fill=\"currentColor\"\n          style={{ transformOrigin: '130px 106px' }}\n          className=\"octo-arm\"\n        />\n        <path\n          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\"\n          fill=\"currentColor\"\n          className=\"octo-body\"\n        />\n      </svg>\n    </a>\n    <style />\n  </>\n);\n"
  },
  {
    "path": "demo/src/index.css",
    "content": "@import 'tailwindcss/utilities';\n/* @config '../tailwind.config.js'; */\n\n@plugin '../../lib' {\n  grid_columns: 12;\n  grid_gutter_width: '1.5rem';\n  generate_container: true;\n  container_max_widths:\n    'sm', '540px', 'md', '720px', 'lg', '960px', 'xl', '1140px', '2xl', '1320px';\n  grid_gutters:\n    0, 0, 1, '.25rem', 2, '.5rem', 3, '1rem', 4, '1.5rem', 5, '3rem';\n}\n\n@theme {\n  --breakpoint-sm: 576px;\n  --breakpoint-md: 768px;\n  --breakpoint-lg: 992px;\n  --breakpoint-xl: 1200px;\n  --breakpoint-2xl: 1400px;\n}\n\n/* 1. Base column layout */\n@source inline('col');\n@source inline('col-auto');\n@source inline('col-{1..12..1}');\n@source inline('{sm,md,lg,xl,2xl}:col');\n@source inline('{sm,md,lg,xl,2xl}:col-auto');\n@source inline('{sm,md,lg,xl,2xl}:col-{1..12..1}');\n\n/* 2. Row column layout modifiers */\n@source inline('row-cols-auto');\n@source inline('row-cols-{1..6..1}');\n@source inline('{sm,md,lg,xl,2xl}:row-cols-auto');\n@source inline('{sm,md,lg,xl,2xl}:row-cols-{1..6..1}');\n\n/* 3. Order utilities */\n@source inline('order-first');\n@source inline('order-last');\n@source inline('order-{0..12..1}');\n@source inline('{sm,md,lg,xl,2xl}:order-first');\n@source inline('{sm,md,lg,xl,2xl}:order-last');\n@source inline('{sm,md,lg,xl,2xl}:order-{0..12..1}');\n\n/* 4. Offset utilities */\n@source inline('offset-{0..11..1}');\n@source inline('{sm,md,lg,xl,2xl}:offset-{0..11..1}');\n\n/* 5. Gutter utilities */\n@source inline('g-{0..5..1}');\n@source inline('gx-{0..5..1}');\n@source inline('gy-{0..5..1}');\n\nhtml {\n  font-family:\n    system-ui,\n    BlinkMacSystemFont,\n    -apple-system,\n    Segoe UI,\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    Fira Sans,\n    Droid Sans,\n    Helvetica Neue,\n    sans-serif;\n  box-sizing: border-box;\n  -ms-overflow-style: scrollbar;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n\n#root {\n  padding: 2rem 5%;\n  overflow: hidden;\n}\n\n.w-100 {\n  width: 100%;\n}\n\n.container .row > .col,\n.container .row > .sm\\:col,\n.container .row > .md\\:col,\n.container .row > .lg\\:col,\n.container .row > .xl\\:col,\n.container .row > .\\2xl\\:col,\n.container .row > [class^='col-'],\n.container .row > [class^='sm:col-'],\n.container .row > [class^='md:col-'],\n.container .row > [class^='lg:col-'],\n.container .row > [class^='xl:col-'],\n.container .row > [class^='2xl:col-'] {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  background-color: rgba(86, 61, 124, 0.15);\n  border: 1px solid rgba(86, 61, 124, 0.2);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.react-live {\n  margin: 1rem -15px 0;\n}\n\n.react-live__preview {\n  border: 0.2rem solid #f7f7f9;\n  padding: 15px;\n}\n\n.react-live__error {\n  font-family: 'SF Mono', Menlo, monospace;\n  font-size: 13px;\n  padding: 16px;\n  color: white;\n  background-color: red;\n}\n\n.github-corner:hover .octo-arm {\n  animation: octocat-wave 560ms ease-in-out;\n}\n\n@keyframes octocat-wave {\n  0%,\n  100% {\n    transform: rotate(0);\n  }\n  20%,\n  60% {\n    transform: rotate(-25deg);\n  }\n  40%,\n  80% {\n    transform: rotate(10deg);\n  }\n}\n\n@media (max-width: 500px) {\n  .github-corner:hover .octo-arm {\n    animation: none;\n  }\n  .github-corner .octo-arm {\n    animation: octocat-wave 560ms ease-in-out;\n  }\n}\n\n#dir-selector {\n  position: fixed;\n  bottom: 1rem;\n  right: 1rem;\n  color: white;\n  background: #151513;\n  padding: 0.75rem 1rem;\n  border-radius: 3px;\n  border: 1px solid white;\n  width: 4rem;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n"
  },
  {
    "path": "demo/src/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <title>Flexbox Grid</title>\n  </head>\n  <body>\n    <noscript> You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/index.jsx\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "demo/src/index.jsx",
    "content": "import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App';\nimport './index.css';\n\ncreateRoot(document.getElementById('root')).render(<App />);\n"
  },
  {
    "path": "demo/src/theme.js",
    "content": "const theme = {\n  plain: {\n    backgroundColor: '#f7f7f9',\n    color: '#212529',\n  },\n  styles: [\n    {\n      types: ['tag'],\n      style: {\n        color: '#2f6f9f',\n      },\n    },\n    {\n      types: ['attr-name', 'attr-equals'],\n      style: {\n        color: '#4f9fcf',\n      },\n    },\n    {\n      types: ['attr-value'],\n      style: {\n        color: '#d44950',\n      },\n    },\n  ],\n};\n\nexport default theme;\n"
  },
  {
    "path": "demo/tailwind.config.js",
    "content": "module.exports = {\n  plugins: [\n    require('../lib')({\n      debug: true,\n      rtl: true,\n      container_max_widths: [\n        'sm',\n        '540px',\n        'md',\n        '720px',\n        'lg',\n        '960px',\n        'xl',\n        '1140px',\n        '2xl',\n        '1320px',\n      ],\n      grid_gutters: [\n        '0',\n        '0',\n        1,\n        '.25rem',\n        2,\n        '.5rem',\n        3,\n        '1rem',\n        4,\n        '1.5rem',\n        5,\n        '3rem',\n      ],\n    }),\n  ],\n};\n"
  },
  {
    "path": "demo/vite.config.mjs",
    "content": "import path from 'path';\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport mdx from '@mdx-js/rollup';\n\nexport default defineConfig({\n  plugins: [mdx(), react()],\n  root: './src',\n  base: './',\n  build: {\n    outDir: path.resolve(__dirname, '../build'),\n    emptyOutDir: true,\n  },\n  server: {\n    port: 3000,\n  },\n  define: {\n    global: {},\n  },\n});\n"
  },
  {
    "path": "netlify.toml",
    "content": "[build]\npublish = \"build/\"\ncommand = \"npm run build\"\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"tailwind-bootstrap-grid\",\n  \"version\": \"7.0.0\",\n  \"description\": \"Tailwind CSS plugin to generate Bootstrap flexbox grid system.\",\n  \"keywords\": [\n    \"bootstrap\",\n    \"flexbox\",\n    \"grid\",\n    \"grid system\",\n    \"layout\",\n    \"rtl\",\n    \"tailwindcss\"\n  ],\n  \"repository\": \"karolis-sh/tailwind-bootstrap-grid\",\n  \"license\": \"MIT\",\n  \"author\": \"Karolis Šarapnickis <hi@karolis.sh>\",\n  \"main\": \"lib/index.js\",\n  \"types\": \"types/index.d.ts\",\n  \"files\": [\n    \"lib\",\n    \"types\"\n  ],\n  \"scripts\": {\n    \"build\": \"run-s build:lib build:demo\",\n    \"build:demo\": \"cd demo && vite build\",\n    \"build:lib\": \"tsc\",\n    \"clean\": \"rm -rf build lib\",\n    \"commit\": \"cz\",\n    \"dev\": \"cd demo && vite\",\n    \"format\": \"run-p format:*\",\n    \"format:js\": \"prettier --write .\",\n    \"format:package-json\": \"sort-package-json\",\n    \"lint\": \"run-p lint:*\",\n    \"lint:js\": \"eslint . --cache\",\n    \"lint:md\": \"markdownlint-cli2 '**/*.md' '!node_modules' '!**/node_modules' '!**/CHANGELOG.md'\",\n    \"lint:types\": \"tsc --noEmit\",\n    \"prepare\": \"husky\",\n    \"qa\": \"run-p lint\",\n    \"release\": \"npm i && run-s clean build qa && standard-version --no-verify && git push --follow-tags --no-verify && npm publish\",\n    \"try-demo\": \"run-s clean build && serve build\"\n  },\n  \"lint-staged\": {\n    \"*.{ts,js,jsx,mjs}\": \"eslint --fix\",\n    \"*.{md,css,json,yml,toml}\": \"prettier --write\",\n    \"package.json\": \"sort-package-json\"\n  },\n  \"dependencies\": {\n    \"zod\": \"^3.24.4\"\n  },\n  \"devDependencies\": {\n    \"@commitlint/cli\": \"^20.3.1\",\n    \"@commitlint/config-conventional\": \"^20.3.1\",\n    \"@k.sh/eslint-plugin\": \"^0.9.1\",\n    \"@k.sh/prettier-config\": \"^0.5.0\",\n    \"@mdx-js/rollup\": \"^3.1.1\",\n    \"@tailwindcss/postcss\": \"^4.1.18\",\n    \"@types/node\": \"^25.0.8\",\n    \"@vitejs/plugin-react\": \"^5.1.2\",\n    \"commitizen\": \"^4.3.1\",\n    \"cz-conventional-changelog\": \"^3.3.0\",\n    \"eslint\": \"^8.55.0\",\n    \"husky\": \"^9.1.7\",\n    \"lint-staged\": \"^16.2.7\",\n    \"markdownlint-cli2\": \"^0.20.0\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"postcss\": \"^8.5.6\",\n    \"prettier\": \"^3.7.4\",\n    \"prop-types\": \"^15.8.1\",\n    \"react\": \"^19.2.3\",\n    \"react-dom\": \"^19.2.3\",\n    \"react-live\": \"^4.1.8\",\n    \"serve\": \"^14.2.5\",\n    \"sort-package-json\": \"^3.6.0\",\n    \"standard-version\": \"^9.5.0\",\n    \"tailwindcss\": \"^4.1.18\",\n    \"typescript\": \"^5.9.3\",\n    \"vite\": \"^7.3.1\"\n  },\n  \"peerDependencies\": {\n    \"tailwindcss\": \"^4\"\n  },\n  \"engines\": {\n    \"node\": \">= 12.0.0\"\n  },\n  \"volta\": {\n    \"node\": \"24.0.2\"\n  }\n}\n"
  },
  {
    "path": "release.sh",
    "content": "#!/bin/sh\n\nif [ -z \"$(npm whoami)\" ]; then\n  echo \"🚨 Not logged in to npm\"\n  exit 1\nfi\n\nif [ -z \"$(git status --porcelain)\" ]; then\n  git checkout main\n  git pull\n  npm run release\nelse\n  git status --porcelain\n  echo \"🔼 Working directory not clean\"\n  exit 1\nfi\n"
  },
  {
    "path": "src/index.ts",
    "content": "// eslint-disable-next-line eslint-comments/disable-enable-pair\n/* eslint-disable node/no-missing-import */\n// eslint-disable-next-line eslint-comments/disable-enable-pair\n/* eslint-disable node/no-unsupported-features/es-syntax */\n\nimport plugin from 'tailwindcss/plugin';\nimport { z } from 'zod';\n\ntype CssInJs = {\n  [key: string]: string | string[] | CssInJs | CssInJs[];\n};\n\nmodule.exports = plugin.withOptions((pluginOptions) => (options) => {\n  const { config, addBase, addComponents } = options;\n\n  const screens: Record<string, string> = config('theme.screens');\n  const screenKeys = Object.keys(screens).filter(\n    (key) => key !== '__CSS_VALUES__',\n  );\n\n  const pluginOptionsSchema = z\n    .object({\n      debug: z.coerce.boolean().default(false),\n      grid_columns: z.coerce.number().int().min(3).default(12),\n      grid_gutter_width: z.coerce.string().default('1.5rem'),\n      grid_gutters: z\n        .array(z.coerce.string())\n        .default(['0', '0'])\n        .refine((value) => value.length % 2 === 0, {\n          message: 'grid_gutters array length must be an even number',\n        })\n        .transform((value) => {\n          const result: Record<string, string> = {};\n          for (let i = 0; i < value.length; i += 2) {\n            result[value[i]!] = value[i + 1]!;\n          }\n          return result;\n        }),\n      generate_container: z.coerce.boolean().default(true),\n      container_max_widths: z\n        .array(z.coerce.string())\n        .default([])\n        .refine((value) => value.length % 2 === 0, {\n          message: 'container_max_widths array length must be an even number',\n        })\n        .transform((value) => {\n          const result: Record<string, string> = {};\n          for (let i = 0; i < value.length; i += 2) {\n            result[value[i]!] = value[i + 1]!;\n          }\n          return result;\n        }),\n    })\n    .default({});\n\n  const parsedPluginOptions = pluginOptionsSchema.safeParse(pluginOptions);\n  if (!parsedPluginOptions.success) {\n    throw new Error(\n      `tailwind-bootstrap-grid options are invalid: ${parsedPluginOptions.error.message}`,\n    );\n  }\n\n  const {\n    debug: _debug,\n    grid_columns,\n    grid_gutter_width,\n    grid_gutters,\n    generate_container,\n    container_max_widths,\n  } = parsedPluginOptions.data;\n\n  if (_debug) {\n    console.group('tailwind-bootstrap-grid options');\n    console.debug('raw input', pluginOptions);\n    console.debug('final output', parsedPluginOptions.data);\n    console.groupEnd();\n  }\n\n  const columns = Array.from(Array(grid_columns), (_, index) => index + 1);\n  const rowColsSteps = columns.slice(0, Math.floor(grid_columns / 2));\n\n  {\n    // =============================================================================================\n    // Container\n    // =============================================================================================\n    if (generate_container) {\n      addBase({\n        ':root': Object.fromEntries(\n          screenKeys.map((name) => [\n            `@media (min-width: ${screens[name]})`,\n            {\n              '--container-max-width':\n                container_max_widths[name] || screens[name]!,\n            },\n          ]),\n        ),\n      });\n      addComponents({\n        '.container, .container-fluid': {\n          maxWidth: 'var(--container-max-width)',\n          width: '100%',\n          marginInline: 'auto',\n          paddingInline: `var(--bs-gutter-x, calc(${grid_gutter_width} / 2))`,\n        },\n      });\n    }\n  }\n\n  {\n    // =============================================================================================\n    // Row\n    // =============================================================================================\n    addComponents({\n      '.row': {\n        '--bs-gutter-x': grid_gutter_width,\n        '--bs-gutter-y': '0',\n        display: 'flex',\n        flexWrap: 'wrap',\n        marginTop: 'calc(var(--bs-gutter-y) * -1)',\n        marginInline: 'calc(var(--bs-gutter-x) / -2)',\n        '> *': {\n          boxSizing: 'border-box',\n          flexShrink: '0',\n          width: '100%',\n          maxWidth: '100%',\n          paddingInline: 'calc(var(--bs-gutter-x) / 2)',\n          marginTop: 'var(--bs-gutter-y)',\n        },\n      },\n    });\n  }\n\n  {\n    // =============================================================================================\n    // Columns\n    // =============================================================================================\n    addComponents([\n      {\n        '.col': {\n          flex: '1 0 0%',\n          width: 'initial', // \"hack\" to enforce specific css import order, https://github.com/tailwindlabs/tailwindcss/issues/15045#issuecomment-2488114451\n          display: 'initial', // \"hack\" to enforce specific css import order\n        },\n        '.row-cols-auto': {\n          '> *': {\n            flex: '0 0 auto',\n            width: 'auto',\n          },\n        },\n      },\n      ...rowColsSteps.map((rowCol) => ({\n        [`.row-cols-${rowCol}`]: {\n          '> *': {\n            flex: '0 0 auto',\n            width: `${100 / rowCol}%`,\n            display: 'initial', // \"hack\" to enforce specific css import order\n          },\n        },\n      })),\n      {\n        '.col-auto': {\n          flex: '0 0 auto',\n          width: 'auto',\n        },\n      },\n      ...columns.map((size) => ({\n        [`.col-${size}`]: {\n          flex: '0 0 auto',\n          width: `${(100 / grid_columns) * size}%`,\n        },\n      })),\n    ]);\n  }\n\n  {\n    // =============================================================================================\n    // Offsets\n    // =============================================================================================\n    addComponents([\n      ...[0, ...columns.slice(0, -1)].map((size) => ({\n        [`.offset-${size}`]: {\n          marginInlineStart: `${(100 / grid_columns) * size}%`,\n        },\n      })),\n    ]);\n  }\n\n  {\n    // =============================================================================================\n    // Gutters\n    // =============================================================================================\n    if (Object.keys(grid_gutters).length) {\n      addComponents(\n        Object.entries(grid_gutters).map(\n          ([key, value]): Record<string, CssInJs> => ({\n            [`.g-${key}, .gx-${key}`]: {\n              '--bs-gutter-x': value,\n            },\n            [`.g-${key}, .gy-${key}`]: {\n              '--bs-gutter-y': value,\n            },\n          }),\n        ),\n      );\n    }\n  }\n\n  {\n    // =============================================================================================\n    // Ordering\n    // =============================================================================================\n    addComponents([\n      {\n        '.order-first': { order: '-1' },\n        '.order-last': { order: `${grid_columns + 1}` },\n      },\n      ...[0, ...columns].map((size) => ({\n        [`.order-${size}`]: { order: `${size}` },\n      })),\n    ]);\n  }\n});\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"module\": \"NodeNext\",\n    \"moduleResolution\": \"NodeNext\",\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"target\": \"ES2018\",\n    \"allowJs\": true,\n    \"resolveJsonModule\": true,\n    \"moduleDetection\": \"force\",\n    \"isolatedModules\": true,\n\n    \"strict\": true,\n    \"noUncheckedIndexedAccess\": true,\n    \"noImplicitOverride\": true,\n\n    \"outDir\": \"lib\",\n    \"sourceMap\": true,\n    \"declaration\": true,\n\n    \"lib\": [\"es2022\"]\n  },\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"dist\"]\n}\n"
  },
  {
    "path": "types/index.d.ts",
    "content": "declare module 'tailwind-bootstrap-grid' {\n  // eslint-disable-next-line node/no-unsupported-features/es-syntax, import/no-unresolved, node/no-missing-import\n  import { PluginCreator } from 'tailwindcss/types/config';\n\n  interface TailwindBootstrapGridOptions {\n    grid_columns?: number;\n    grid_gutter_width?: string;\n    grid_gutters?: string[];\n    generate_container?: boolean;\n    container_max_widths?: string[];\n  }\n\n  function tailwindBootstrapGrid(\n    options?: TailwindBootstrapGridOptions,\n  ): PluginCreator;\n  export = tailwindBootstrapGrid;\n}\n"
  }
]