Tailwind CSS plugin that generates Bootstrap's flexbox grid

  • By Karolis Šarapnickis
  • Last update: Jan 2, 2023
  • Comments: 11

tailwind-bootstrap-grid

npm version Build Status License: MIT

Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.

Check the demo.

Installation

npm i -D tailwind-bootstrap-grid

In tailwind.js file:

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

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

@tailwind base;
@tailwind components;
@tailwind utilities;

This will generate Bootstrap v5 flexbox grid.

* NOTE: When using the .container class from this plugin you will need to disable the core container plugin as both plugins expose a .container class.

Features & Tailwind CSS options support

  • ✅ custom screens
  • ✅ custom separator
  • ✅ custom prefix
  • ✅ important
  • ✅ rtl support

Options

  • Original Bootstrap grid's options:

    • gridColumns (default - 12) - grid size
    • gridGutterWidth (default - "1.5rem") - container and rows gutter width
    • gridGutters (default - { 0: 0 }) - gutter variable class steps (--bs-gutter-x, --bs-gutter-y)
    • containerMaxWidths (default - {}) - the max-width container value for each breakpoint

  • Extra options:

    • generateContainer (default - true) - whether to generate .container and .container-fluid classes
    • rtl (default - false) - rtl support (.offset-x classes will start responding to [dir=ltr] / [dir=rtl])
    • respectImportant (default - true) - whether it should respect the important root config option

FAQ

  1. Why my .container doesn't have padding? This plugin will not work properly with core container plugin as both plugins expose a .container class.
  2. How to use rtl css? Set the ltr or rtl dir attribute on your container (usually the root html).
  3. Is there a Bootstrap v4 grid implementation? Yes, use [email protected].

Related

postcss-bootstrap-4-grid

Github

https://github.com/karolis-sh/tailwind-bootstrap-grid

Comments(11)

  • 1

    fix: don't add important to generated utilities

    This relates to (#71). When using important: true in the Tailwind config, all utilities have !important added to them. This was causing issues for us, because Bootstrap does not use !important for these classes.

  • 2

    Not working with Latest Tailwind and Purge

    Hi, I have installed Tailwind and this along with postcss all globally and properly configured it

    But it doesn't generate a single class related to grids..

    module.exports = { // mode: 'jit', corePlugins: { container: false, }, purge: { enabled: true, content: [ './index.php', './results.php', ], }, darkMode: false, // or 'media' or 'class' theme: { }, variants: { extend: {}, }, plugins: [ //require('@tailwindcss/forms')({ strategy: 'class', }) require('@tailwindcss/forms'), require('tailwind-bootstrap-grid'), ], }

  • 3

    Support for !important

    When you set a custom gutter size the no gutter option no longer takes effect since it's set without a !importnat but the custom gutter size does have a !important Screenshot from 2021-01-28 11-37-18

  • 4

    Can't @apply styles

    Hi, is there a reason why I can't @apply the classes generated by this plugin?

    .cool-class-which-is-also-a-col { @apply col-6 }

    This will not throw an error but also not apply any styles to the class.

  • 5

    An in-range update of webpack is breaking the build 🚨

    The devDependency webpack was updated from 4.35.3 to 4.36.0.

    🚨 View failing branch.

    This version is covered by your current version range and after updating it in your project the build failed.

    webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

    Status Details
    Release Notes for v4.36.0

    Features

    • SourceMapDevToolPlugin append option now supports the default placeholders in addition to [url]
    • Arrays in resolve and parser options (Rule and Loader API) support backreferences with "..." when overriding options.
    Commits

    The new version differs by 42 commits.

    • 95d21bb 4.36.0
    • aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
    • b3ec775 improve merging of resolve and parsing options
    • 53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
    • ab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
    • 0bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
    • f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc
    • 31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
    • 036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
    • 37d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
    • ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
    • 0beeb7e Merge pull request #9391 from vankop/create-hash-typescript
    • bf1a24a #9391 resolve super call discussion
    • bd7d95b #9391 resolve discussions, AbstractMethodError
    • 4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2

    There are 42 commits in total.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper Bot :palm_tree:

  • 6

    Support for responsive variants of containers

    Great plugin! It would be cool if there was support for responsive variants of containers.

    My use case is to be able to do something like this:

    <!-- not a container on xs, container-fluid from md onwards, container from lg onwards -->
<div class="md:container-fluid lg:container">...</div>
<!-- or the opposite -->
<div class="md:container lg:container-fluid">...</div>
  • 7

    .row.no-gutters > [class*="md\:col-"] styles are absent after building.

    I noticed that in production environment paddings are not set to 0 in columns that are inside div with class "row no-gutters", while before building these paddings are zeros.

  • 8

    Container margin not set

    Hi, I just installed and included this library and I have an issue with the container class. "margin-left" and "margin-right" are not set and so my content sticks to the left of the screen.

    I searched my code for other occurences of the container class but I have no definitions of it myself. In the webinspector I can see that the styles are not overriden but simply missing from the container class.

    Do you have any idea what could cause this?

    PS: I added my own definition of "container" and gave it the margin that way but this feels dirty...

  • 9

    feat: add container breakpoint, which is 100% until the specified breakpoint

    Bootstrap comes with three different containers:

    .container, which sets a max-width at each responsive breakpoint .container-{breakpoint}, which is width: 100% until the specified breakpoint .container-fluid, which is width: 100% at all breakpoints

    Extra small<576px | Small≥576px | Medium≥768px | Large≥992px | X-Large≥1200px | XX-Large≥1400px -- | -- | -- | -- | -- | -- .container | 100% | 540px | 720px | 960px | 1140px | 1320px .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px .container-fluid | 100% | 100% | 100% | 100% | 100% | 100%

    https://getbootstrap.com/docs/5.2/layout/containers/#how-they-work

  • 10

    generate responsive gutter widths

    hi -- is there a way to generate responsive gutter widths ie:

    gridGutterWidth (default - "30px") - { sm: '20px', lg: '40px' } 
containerMaxWidths (default - { sm: '540px', md: '720px', lg: '960px', xl: '1140px' }

    (so gutters change dynamically between desktop/mobile)

    thanks

  • 11

    Update cz-conventional-changelog to the latest version 🚀

    The devDependency cz-conventional-changelog was updated from 2.1.0 to 3.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    Publisher: commitizen-bot License: MIT

    Release Notes for v3.0.0

    3.0.0 (2019-07-19)

    Bug Fixes

    Features

    • add default values to options (#69) (65d6a9f)
    • implement configuration through package.json (#75) (3398c02)

    BREAKING CHANGES

    • Node 10 is LTS so please upgrade to it.
    Commits

    The new version differs by 7 commits.

    • 76588ad fix: remove pre-node 10 support (#86)
    • 6ed57bd ci(publish): fixed the npm command to run semantic-release (#81)
    • 3398c02 feat: implement configuration through package.json (#75)
    • 65d6a9f feat: add default values to options (#69)
    • f2ca755 chore(license): adds missing MIT license file (#67)
    • d4bf98e Merge pull request #64 from jacobq/patch-1
    • ff370a3 doc(README): Update link (again)

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

Popular Tag

Related