TailwindCSS Containers Breaking on High Resolutions?

TLDR; Take me to the Snippet

If you've ever worked with TailwindCSS, you know that it's a powerful utility-first CSS framework that provides a lot of helpful classes to make your styling work easier. However, one of its more powerful tools is customization, so we're not hand-tied to the decisions someone else made for us.

I've come across some issues with certain designs on really high-resolution screens, and the solution is provided by Adam Wathan,, the creator of Tailwind in this GitHub issue.

Said solution deactivates the default container class and creates a custom container component.

//within the tailwind.config.ts file
corePlugins: {
  container: false,
}

don't worry if your tailwindcss file is empty, there's a full code example at the end of the post.

After deactivating the default container and its widths, we're going to add a new component:

plugins: [
  // just remove the `: PluginAPI` part if you're not using TypeScript.
  function ({ addComponents }: PluginAPI) {
    addComponents({
      ".container": {
        maxWidth: "100%",
        "@screen sm": {
          maxWidth: "640px", //this stays the same as the default but needs to be redefined
        },
        "@screen md": {
          maxWidth: "768px",
        },
        "@screen lg": {
          maxWidth: "1024px",
        },
        //here's the main difference, the last width I want to support is 1024px,
        //so I'm avoiding the "@screen xl" and "@screen 2xl" breakpoints.
      },
    });
  },
];

My goal here was to create a container that would max the width at 1024px, because the design would look too weird on a 4k display, and I don't want to overload the users with information, thus encouraging scrolling down instead of being bombarded by every single pixel on the screen.

If you want some of the functionality from the default container class like center: true, you can still implement it yourself by adding: margin: "0 auto" in the .container object.

A final result would look like this:

Code Snippet

import type { Config } from "tailwindcss";
import { PluginAPI } from "tailwindcss/types/config"; //ignore this import if you're not using TypeScript

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {},
    },
  },
  corePlugins: {
    container: false,
  },
  plugins: [
    function ({ addComponents }: PluginAPI) {
      addComponents({
        ".container": {
          maxWidth: "100%",
          margin: "0 auto", //centering the container
          "@screen sm": {
            maxWidth: "640px",
          },
          "@screen md": {
            maxWidth: "768px",
          },
          "@screen lg": {
            maxWidth: "1024px",
          },
        },
      });
    },
  ],
};

Comments

[JoelBonetR 🥇]

Isn't this like too overkill? 🤯

Styled-Components version for reference:

import styled from 'styled-components';

export const Main = styled.main`
  max-width: 1024px;
  margin: 0 auto;
`;

You don't need to set up max-width for each breakpoint as the default width value for any div, main, section, aside, article... is just 100% due to the default display: block.

improvement:

It is recommended to keep the config in a file to easy tweak your app as soon as you get a new design or whatever, like that:

import styled from 'styled-components';
import { themeConfig } from '@src/styles/myThemeConfigFile'; // create a file whenever you want with a config object

export const Main = styled.main`
  max-width: ${themeConfig.maxContainerWidth};
  margin: 0 auto; 
`;

There's no reason to modify margin: 0 auto; at any point (it will prove useful either you apply display: flex or so.

Usage

In a react component (React, Preact, Next JS, Remix, Gatsby...) you'll apply it this way:

import { Main } from '@scr/components/main/main.styles';


export default function MyPageComponent() {
  // do stuff

  return (<Main>
     <OtherComponents />
     <OtherComponents />
  </Main>);
}

Best regards