How to customize the container component in Tailwind CSS

This post was originally posted on Design2Tailwind.

---

Containers are one of the most important layout tools that you’ll use when doing developing websites, they restrict your content to certain widths and usually vary by breakpoint, and every CSS framework worth its’s salt will have a container component. Thankfully for us, Tailwind CSS is no exception.

Basic customization

Tailwind gives us a couple of basic options for customization.

Centering

You can make the container always centered horizontally by setting the center propriety to true, like this:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
};

Horizontal padding

You usually want some padding for your container, if not the content will hit the screen on certain screen sizes. Tailwind allows us to define universal padding like this:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: "2rem",
    },
  },
};

You can also customize by screen size/breakpoint, like this:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: "1rem",
        sm: "2rem",
        lg: "4rem",
        xl: "5rem",
        "2xl": "6rem",
      },
    },
  },
};

One note is that the sm, lg, etc you see in the code should be the same as what you have defined in your screens property.

So, for example, if you change the default screens to something like:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      mobile: "640px",
      tablet: "960px",
      desktop: "1280px",
    },
  },
};

Then the padding for your container should be like this:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: "1rem",
        mobile: "2rem",
        tablet: "4rem",
        desktop: "5rem",
      },
    },
  },
};

Using different values from screens

There are some cases where you might want to decouple the container breakpoints from the screens values, there are different ways to do this:

Non-documented container.screens property

The container’s code in Tailwind CSS actually calls a container.screensproperty before default back to the global screens, you can see the code here.

Based on this, and taking the Tailwind config example above, we could do something like:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      mobile: "640px",
      tablet: "960px",
      desktop: "1280px",
    },
    container: {
      screens: {
        mobile: "600px",
        tablet: "900px",
        desktop: "1200px",
      },
    },
  },
};

Custom CSS

You could also create your own custom container class if you need more flexibility:

// your CSS file
@layer components {
  .container {
    @apply mobile:max-w-[600px] tablet:max-w-[900px] desktop:max-w-[1200px];
  }
}

Disable the container on a specific breakpoint

Sometimes you want your content to break out of the container’s layout and become “liquid” or full width, for specific breakpoints. This is definitely possible with some handy classes.

Let’s say, for example, that you want your container on md to be fluid and go back to static on lg and above, you can do it the following way:

<div class="container w-full md:max-w-none lg:container">
  <!-- content -->
</div>

We’re basically resetting the container’s max-width on md so it becomes full width and activating the container again on lg.

Disable the container in older versions

In previous versions of Tailwind CSS, if you didn’t plan to use the container component you could just do:

// tailwind.config.js
module.exports = {
  theme: {
    container: false,
  },
};

And it would remove all the CSS related to the container.

But starting on v3 you don’t need to do this, since the container’s CSS will only be added if you use the container class in your markup.

---

That’s it for this one folks! I hope you feel more comfortable working with the container component in Tailwind CSS.