Tailwind container meet bootstrap ones

[ahmedmymail]

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

[wongjn]

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.

[liam-ng]

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'