• implement the feature as an option
• RTL friendly docs to display this feature

When updating the tailwind file, the current documentation says to add:

@tailwind preflight;

This throws an error @tailwind preflight is not a valid at-rule in Tailwind v1.0, use @tailwind base instead during build, and should be:

@tailwind base;

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.

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>

https://tailwindcss.com/docs/plugins

This should probably enable the possibility of having both:

• require('tailwind-bootstrap-grid')
• require('tailwind-bootstrap-grid')({ ... })

When clicking on the Demo link in the README it takes to a 404

Site Not Found

Hey, I am trying to change the gutter with g-* class. but it's not generating any CSS at all. how to use it? (I am using the tailwind container, not this plugin container)

only g-0 works, but I want g-2/3/4/5

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'), ], }

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

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

It would be nice if you could add row-cols-* styles.

thanks

I am getting the following error:

WARN ⚠️ The container core plugin is enabled and you're also generating .container class with the tailwind-bootstrap-grid plugin. This might lead to unexpected styling issues, disable either of one.

But how to disable the container core plugin? The readme links to a section of a page that does not exist: https://tailwindcss.com/docs/container#disabling-entirely

Maybe also update the readme for everyone to come :)

This is a great lib!!

The docs state the following:
* 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.

I tried to find that for Tailwind 3 and saw [this] (https://redpixelthemes.com/blog/tailwindcss-container-component). It basically says that the container class will not be generated if it's not used. But when I use it via the tailwind-bootstrap-grid would the tailwind container be generated?
How shoudl we deal with this?

ref: #17

Code sections style match bootstrap docs for better readability.

Add ability to customize max-width as per bootstrap docs:

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

container > row > container

1. First container - https://i.imgur.com/9XH5FJs.png
2. The second container contains x2 padding size - https://i.imgur.com/9DDfjk3.png

I made a preset that extends this plugin. Posting it here if anyone will need it.

If applied this preset will:

• Include tailwind-bootstrap-grid with all the passed options
• Make container paddings on different screen sizes based on gridGutters
• Add 2 classes for cancelling the container paddings

tailwind/tailwind-bootstrap-grid-preset.js

const plugin = require('tailwindcss/plugin');
const tailwindBootstrapGrid = require('tailwind-bootstrap-grid');

/**
 * This plugin will extend `tailwind-bootstrap-grid` by adding
 * - specific container paddings based on screen size
 * - classes for canceling the container padding
 */
const tailwindBootstrapGridExtended = plugin.withOptions((options) => {
	return (pluginOptions) => {
		const { addComponents, config } = pluginOptions;
		const screens = config('theme.screens');
		const screenKeys = Object.keys(screens);
		const { gridGutterWidth = '1.5rem', gridGutters = {} } = options;

		addComponents({
			'.container-cancel': {
				'margin-inline': `calc(${gridGutterWidth} / 2 * -1)`,
			},
		});

		addComponents(
			screenKeys
				.filter((name) => gridGutters[name])
				.map((name) => ({
					[`@screen ${name}`]: {
						'.container': {
							'--bs-gutter-x': gridGutters[name],
						},
						'.container-cancel': {
							'margin-inline': `-${gridGutters[name]}`,
						},
					},
				})),
		);

		addComponents({
			'.container-cancel-none': {
				'margin-inline': 0,
			},
		});
	};
});

module.exports = (options) => ({
	plugins: [
		tailwindBootstrapGrid(options),
		tailwindBootstrapGridExtended(options),
	],
});

tailwind.config.js

const tailwindBootstrapGridPreset = require('./tailwind/tailwind-bootstrap-grid-preset');

/** @type {import('tailwindcss').Config} */
module.exports = {
	presets: [
		tailwindBootstrapGridPreset({
			gridGutterWidth: '1.5rem',
			gridGutters: {
				sm: '1rem',
				md: '1.5rem',
				lg: '2rem',
				xl: '2.5rem',
			},
			containerMaxWidths: {
				sm: 'none',
				md: 'none',
				lg: '1366px',
				xl: '1366px',
			},
		}),
	],
};

Can support TypeScript for this library ?

Hi. I love bootstrap grid, but I like margin-top for elements instead of margin-bottom, how like bootstrap authors.
So, now If I have this type of code, I have wrong behaviour on interaction.

<div>
<button style="height: 20px">some clickable</button>
<div class="row gy-20">....</div>
</div>

Because row has negative margin and goes after button it content has a larger index and overlaps the button if it does not have a directly given index.
With margin-bottom on row I don't have this issue in most cases.
So, instead of copy-paste source code and to change only this styles, maybe you will introduce a param to use marginBottom instead for those who like me wants this?
Thanks.

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.

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...

Add tests to ensure that all relevant (?) styles could be @apply'ed.

With following options:

  options: {
    prefix: '✅-',
    separator: '_🚧_',
  },

The following css gets generated:

.✅-row.✅-no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.✅-row.✅-no-gutters > .✅-col,
.✅-row.✅-no-gutters > .✅-mobile_🚧_col,
.✅-row.✅-no-gutters > .✅-tablet_🚧_col,
.✅-row.✅-no-gutters > .✅-desktop_🚧_col,
.✅-row.✅-no-gutters > [class*="col-"],
.✅-row.✅-no-gutters > [class*="mobile_🚧_col-"],
.✅-row.✅-no-gutters > [class*="tablet_🚧_col-"],
.✅-row.✅-no-gutters > [class*="desktop_🚧_col-"] {
  padding-right: 0;
  padding-left: 0;
}

While this is the expected output

.✅-row.✅-no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.✅-row.✅-no-gutters > .✅-col,
.✅-row.✅-no-gutters > .mobile_🚧_✅-col,
.✅-row.✅-no-gutters > .tablet_🚧_✅-col,
.✅-row.✅-no-gutters > .desktop_🚧_✅-col,
.✅-row.✅-no-gutters > [class*="✅-col-"],
.✅-row.✅-no-gutters > [class*="mobile_🚧_✅-col-"],
.✅-row.✅-no-gutters > [class*="tablet_🚧_✅-col-"],
.✅-row.✅-no-gutters > [class*="desktop_🚧_✅-col-"] {
  padding-right: 0;
  padding-left: 0;
}

Horizontal gutter not working from the document (https://tailwind-bootstrap-grid.netlify.com/)

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.

Your Greenkeeper Bot 🌴