Tailwind container meet bootstrap ones #9140

ahmedmymail · 2022-08-19T08:15:55Z

ahmedmymail
Aug 19, 2022

Hello,
I want to use Tailwind container with same breakpoints and max-width values as bootstrap
Any idea about this?
Thank in advance

wongjn · 2022-08-19T18:24:28Z

wongjn
Aug 19, 2022

Assumptions

Emulate the latest Bootstrap's (v5.2) container component
Default Bootstrap settings
We can't use the Tailwind's container since the max-widths for it is the same as the breakpoints but Bootstrap's container widths are slightly smaller.
We'll use the preferred strategy in Tailwind of using utilities straight in the HTML, and not creating component classname(s).

Breakpoints

First we need to port the breakpoints since the container will change from width: 100% to its max width at these points. We can replace Tailwind's breakpoints or we can extend them. If we do extend but also want to keep reference to Bootstrap's breakpoint names, we'll need some prefix to avoid clashes with Tailwind keys. So here and throughout, I'll be using the prefix bs that Bootstrap itself uses.

Replace

Replacing is the more straight-forward, since we can pretty much copy-paste from Bootstrap:

module.exports = {
  theme: {
    screens: {
      // Don't need xs since Tailwind uses min-width approach
      // to its media queries.
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      xxl: '1400px',
    },
  },
};

Extend

With extending, we have to interweave the Bootstrap breakpoints with Tailwind's since "breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system":

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    screens: {
      // Don't need `xs` since Tailwind uses min-width approach
      // to its media queries.
      'bs-sm': 576px,
      sm: defaultTheme.screens.sm, // 640px
      // Bootstrap's `md` is the same as Tailwind's `md` but
      // added here as an alias so we can be consistent.
      'bs-md': 768px, 
      md: defaultTheme.screens.md, // 768px
      'bs-lg': 992px,
      lg: defaultTheme.screens.lg, // 1024px
      'bs-xl': 1200px,
      xl: defaultTheme.screens.xl, // 1280px
      'bs-xxl': 1400px,
      '2xl': defaultTheme.screens['2xl'], // 1536px
    },
  },
};

Max width

Assign Bootstrap container max-widths to Tailwind's max-width utility. Again, we can extend or replace, but we don't need to worry about order (as compared to the breakpoints earlier). We'll also convert to rem unit to be in keeping with Tailwind.

Replace

module.exports = {
  theme: {
    screens: {
      // …
    },
    extend: {
      maxWidth: {
        sm: `${540 / 16}rem`,
        md: `${720 / 16}rem`,
        lg: `${960 / 16}rem`,
        xl: `${1140 / 16}rem`,
        xxl: `${1320 / 16}rem`,
      }
    },
  },
};

Extend

module.exports = {
  theme: {
    screens: {
      // …
    },
    extend: {
      maxWidth: {
        'bs-sm': `${540 / 16}rem`,
        'bs-md': `${720 / 16}rem`,
        'bs-lg': `${960 / 16}rem`,
        'bs-xl': `${1140 / 16}rem`,
        'bs-xxl': `${1320 / 16}rem`,
      },
    },
  },
};

Base styling

All the container classes in Bootstrap have this styling:

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}

So we can convert to Tailwind utility classes as follows.

Bootstrap CSS declaration	Tailwind Class
width: 100%;	`w-full`
--bs-gutter-x: 1.5rem; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5);	`px-3`
margin-right: auto; margin-left: auto;	`mx-auto`

So every container will have the classes w-full px-3 mx-auto.

Putting it all together

Bootstrap	Tailwind (replace)	Tailwind (extend)
`container`	`w-full px-3 mx-auto sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl xxl:max-w-xxl`	`w-full px-3 mx-auto bs-sm:max-w-bs-sm bs-md:max-w-bs-md bs-lg:max-w-bs-lg bs-xl:max-w-bs-xl bs-xxl:max-w-bs-xxl`
`container-sm`	`w-full px-3 mx-auto sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl xxl:max-w-xxl`	`w-full px-3 mx-auto bs-sm:max-w-bs-sm bs-md:max-w-bs-md bs-lg:max-w-bs-lg bs-xl:max-w-bs-xl bs-xxl:max-w-bs-xxl`
`container-md`	`w-full px-3 mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl xxl:max-w-xxl`	`w-full px-3 mx-auto bs-md:max-w-bs-md bs-lg:max-w-bs-lg bs-xl:max-w-bs-xl bs-xxl:max-w-bs-xxl`
`container-lg`	`w-full px-3 mx-auto lg:max-w-lg xl:max-w-xl xxl:max-w-xxl`	`w-full px-3 mx-auto bs-lg:max-w-bs-lg bs-xl:max-w-bs-xl bs-xxl:max-w-bs-xxl`
`container-xl`	`w-full px-3 mx-auto xl:max-w-xl xxl:max-w-xxl`	`w-full px-3 mx-auto bs-xl:max-w-bs-xl bs-xxl:max-w-bs-xxl`
`container-xxl`	`w-full px-3 mx-auto xxl:max-w-xxl`	`w-full px-3 mx-auto bs-xxl:max-w-bs-xxl`
`container-fluid`	`w-full px-3 mx-auto`	`w-full px-3 mx-auto`

Here's an example Tailwind Play using the replace technique, with the Bootstrap version to compare.

1 reply

liam-ng Sep 11, 2024

Thank you for the solution!
I also put the styles in @layer directive, so that I can use (tw-)container like an alias, makes it less bloated.

@layer utilities {
    .tw-container {
        @apply xxl:tw-max-w-xxl tw-mx-auto tw-w-full tw-px-3 sm:tw-max-w-sm md:tw-max-w-md lg:tw-max-w-lg xl:tw-max-w-xl;
    }
}

In the html, add className='tw-container'

nstuyvesant · 2025-01-06T23:38:49Z

nstuyvesant
Jan 6, 2025

@wongjn - Great solution. I am trying to replicate this with TailwindCSS 4.0 beta 8. I'm getting stuck on translating the configuration above to 4.0 in combination with the use of a prefix and disabling preflight.

Here is my app.css...

@layer theme, base, components, utilities;
@import 'tailwindcss/theme' layer(theme) prefix(tw);
@import 'tailwindcss/utilities' layer(utilities) prefix(tw);

@theme {
	--font-sans: 'Avenir', 'Myriad Pro', 'Helvetica Neue', sans-serif;
	--color-plum: oklch(45.31% 0.0979 300.21);
	--color-lilac: oklch(81.77% 0.0435 303.58);
	--color-error: var(--color-red-500);

	--breakpoint-bs-sm: calc(540 / 16) rem;
	--breakpoint-bs-md: calc(720 / 16) rem;
	--breakpoint-bs-lg: calc(960 / 16) rem;
	--breakpoint-bs-xl: calc(1140 / 16) rem;
	--breakpoint-bs-xxl: calc(1320 / 16) rem;

	--width-screen-bs-sm: var(--breakpoint-bs-sm);
	--width-screen-bs-md: var(--breakpoint-bs-md);
	--width-screen-bs-lg: var(--breakpoint-bs-lg);
	--width-screen-bs-xl: var(--breakpoint-bs-xl);
	--width-screen-bs-xxl: var(--breakpoint-bs-xxl);
}

@layer utilities {
	.shy-container {
		@apply tw:w-full tw:px-3 tw:mx-auto tw:bs-sm:max-w-bs-sm tw:bs-md:max-w-bs-md tw:bs-lg:max-w-bs-lg tw:bs-xl:max-w-bs-xl tw:bs-xxl:max-w-bs-xxl;
	}
}

Any thoughts on where I'm going wrong?

7 replies

nstuyvesant Jan 7, 2025

This version does not error...

@layer theme, base, components, utilities;
@import 'tailwindcss/theme' layer(theme) prefix(tw);
@import 'tailwindcss/utilities' layer(utilities) prefix(tw);

@theme {
	--font-sans: 'Avenir', 'Myriad Pro', 'Helvetica Neue', sans-serif;
	--color-plum: oklch(45.31% 0.0979 300.21);
	--color-lilac: oklch(81.77% 0.0435 303.58);
	--color-error: var(--color-red-500);

	--breakpoint-bs-sm: calc(540 / 16)rem;
	--breakpoint-bs-md: calc(720 / 16)rem;
	--breakpoint-bs-lg: calc(960 / 16)rem;
	--breakpoint-bs-xl: calc(1140 / 16)rem;
	--breakpoint-bs-xxl: calc(1320 / 16)rem;

	--container-bs-sm: var(--tw-breakpoint-bs-sm);
	--container-bs-md: var(--tw-breakpoint-bs-md);
	--container-bs-lg: var(--tw-breakpoint-bs-lg);
	--container-bs-xl: var(--tw-breakpoint-bs-xl);
	--container-bs-xxl: var(--tw-breakpoint-bs-xxl);
}

@layer utilities {
	.shy-container {
		@apply tw:w-full tw:px-3 tw:mx-auto tw:bs-sm:max-w-bs-sm tw:bs-md:max-w-bs-md tw:bs-lg:max-w-bs-lg tw:bs-xl:max-w-bs-xl tw:bs-xxl:max-w-bs-xxl;
	}
}

But it does not set the max widths - only the first 3 utility classes work.

dvzrd Jan 7, 2025

Good to know @apply worked, I was having issues with it trying to apply an import, I guess it only works with existing tailwind utilities only

You should open your stylesheet in dev tools and see if your utilities exist. Maybe the max-w utility didn't register the new breakpoint? Try your screen variant with padding to see if it works tw:bs-xl:px-6. Sorry bro, not too sure about how width is set, but I'm guessing it's tied to --spacing

wongjn Jan 7, 2025

You can make a Bootstrap container without any configuration as per this Tailwind Play (you can now do this in v3 too).

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

nstuyvesant Jan 7, 2025

Thanks everyone for the guidance! Wanted to share that this works...

@layer theme, base, components, utilities;
@import 'tailwindcss/theme' layer(theme) prefix(tw);
@import 'tailwindcss/utilities' layer(utilities) prefix(tw);

@theme {
	--font-sans: 'Avenir', 'Myriad Pro', 'Helvetica Neue', sans-serif;
	--color-plum: oklch(45.31% 0.0979 300.21);
	--color-lilac: oklch(81.77% 0.0435 303.58);
	--color-error: var(--color-red-500);

	/* Not used yet */
	--breakpoint-bs-sm: calc(576rem / 16);
	--breakpoint-bs-md: calc(768rem / 16);
	--breakpoint-bs-lg: calc(992rem / 16);
	--breakpoint-bs-xl: calc(1200rem / 16);
	--breakpoint-bs-xxl: calc(1400rem / 16);

	--container-bs-sm: calc(540rem / 16);
	--container-bs-md: calc(720rem / 16);
	--container-bs-lg: calc(960rem / 16);
	--container-bs-xl: calc(1140rem / 16);
	--container-bs-xxl: calc(1320rem / 16);
}

@layer utilities {
	.shy-container {
		@apply tw:w-full tw:px-3 tw:mx-auto tw:min-[576px]:max-w-bs-sm tw:min-[768px]:max-w-bs-md tw:min-[992px]:max-w-bs-lg tw:min-[1200px]:max-w-bs-xl tw:min-[1400px]:max-w-bs-xxl;
	}
}

As you can see, I created --container-* CSS properties that I used for the max-w-* utilities. The utility class min-* does not appear to use the --breakpoint-* CSS properties.

My objective is to not only get a working Bootstrap-like container but also be able to use Bootstrap breakpoints for other purposes. Any thoughts as to what I need to do?

Saw that @apply is not recommended so I may create a Container.svelte so I can reuse it without the verbosity.

wongjn Jan 7, 2025

You don't need to prefix the breakpoints with min-*. Also bear in mind, you should resolve the calc() expressions manually and write in the result. It seems Tailwind sorts them alphabetically otherwise, causing the wrong order.

https://play.tailwindcss.com/L52JvxVCMF

nstuyvesant · 2025-01-08T04:24:41Z

nstuyvesant
Jan 8, 2025

Thank you @wongjn for taking the time to clarify this! This is my first time using TailwindCSS which is why I wanted to start with 4.0 beta.

Here's my semi-final config (will take out the @apply once I create a component). The upside is that it shows what the utility classes look like with the custom breakpoints and containers.

@layer theme, base, components, utilities;
@import 'tailwindcss/theme' layer(theme) prefix(tw);
@import 'tailwindcss/utilities' layer(utilities) prefix(tw);

@theme {
	--font-sans: 'Avenir', 'Myriad Pro', 'Helvetica Neue', sans-serif;
	--color-plum: oklch(45.31% 0.0979 300.21);
	--color-lilac: oklch(81.77% 0.0435 303.58);
	--color-error: var(--color-red-500);

	--breakpoint-bs-sm: 29.75rem; /* 476px */
	--breakpoint-bs-md: 48rem; /* 768px */
	--breakpoint-bs-lg: 62rem; /* 992px */
	--breakpoint-bs-xl: 75rem; /* 1200px */
	--breakpoint-bs-xxl: 87.5rem; /* 1400px */

	--container-bs-sm: 33.75rem; /* 540rem */
	--container-bs-md: 45rem; /* 720px */
	--container-bs-lg: 60rem; /* 960px */
	--container-bs-xl: 71.25rem; /* 1140px */
	--container-bs-xxl: 82.5rem; /* 1320px */
}

@layer utilities {
	.shy-container {
		@apply tw:mx-auto tw:w-full tw:px-3 tw:bs-sm:max-w-bs-sm tw:bs-md:max-w-bs-md tw:bs-lg:max-w-bs-lg tw:bs-xl:max-w-bs-xl tw:bs-xxl:max-w-bs-xxl;
	}
}

0 replies

nstuyvesant · 2025-01-08T04:27:13Z

nstuyvesant
Jan 8, 2025

And here's my Svelte 5 component so I can remove the @apply from the config...

<script lang="ts">
	import type { Snippet } from 'svelte'

	interface Props {
		children?: Snippet
	}

	let { children }: Props = $props()
</script>

<div class="tw:mx-auto tw:w-full tw:px-3 tw:bs-sm:max-w-bs-sm tw:bs-md:max-w-bs-md tw:bs-lg:max-w-bs-lg tw:bs-xl:max-w-bs-xl tw:bs-xxl:max-w-bs-xxl">
	{@render children?.()}
</div>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind container meet bootstrap ones #9140

{{title}}

Replies: 4 comments 8 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Tailwind container meet bootstrap ones #9140

Replies: 4 comments · 8 replies

Assumptions

Breakpoints

Extend

Max width

Replace

Extend

Base styling

Putting it all together

Replies: 4 comments 8 replies