How to use new container in TailwindCSS v4?

Question

Basically, I want to put @container class in my div. I wanted to make it center and with breakpoints as it was in TailwindCSS v3 e.g.:

tailwind.config.js

export default {
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
      },
      screens: {
        '2xl': '1400px'
      }
    },
  },
}

but now it's changed I'm trying this:

@theme {
  --breakpoint-default: initial;
  --breakpoint-tablet: 40rem;
  --breakpoint-laptop: 64rem;
  --breakpoint-desktop: 80rem;
}

const Header = () => {
  return (
    <div className="@container/Header">
      <div className="flex w-full justify-between items-center blur-filter-sm bg-0.500">
        <div className="title font-bold">Sensei</div>
        <div className="etc">
          <Button className="rounded-full">Contact</Button>
        </div>
      </div>
    </div>
  );
};

However, this doesn't work as it had been working and I don't know what to do.

I've read new docs but they are not clear for me. I was expecting it to behave as a container (put center, paddings, etc.) but it doesn't work.

Here is the header, but it should be with paddings:

Answer 1

Related documentation for using @container class in v4:

• Use the @container class to mark an element as a container - TailwindCSS v4 Docs

In TailwindCSS v4, the JavaScript-based configuration in tailwind.config.js has been deprecated by default in favor of a CSS-first approach using directives. To customize the TailwindCSS theme, the @theme directive is used, allowing you to define your own configuration through predefined namespaces.

• @theme directive - TailwindCSS v4 Docs
• Theme variables - TailwindCSS v4 Docs
• Theme variable namespaces - TailwindCSS v4 Docs

For the container, this is done using the --container-* custom properties.

• Using custom container sizes - TailwindCSS v4 Docs
• Container size reference: @sm, @md, ... - TailwindCSS v4 Docs
• Container query ranges: @max-sm, @max-md, ... - TailwindCSS v4 Docs

The v3 configuration you provided

// TailwindCSS v3 JavaScript-based configuration
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
      },
      screens: {
        '2xl': '1400px',
      },
    },
  },
}

would look like this in the v4 CSS-first approach:

/* TailwindCSS v4 CSS-first configuration */
@import "tailwindcss";

@theme {
  --container-2xl: 1400px;
}

Starting from TailwindCSS v4, padding is linked to a global spacing variable, allowing you to customize the unit scale between different padding values by adjusting the spacing configuration.

• Padding: Customizing your theme - TailwindCSS v4 Docs

To center an element horizontally, use the mx-auto class.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";

@theme {
  --container-2xl: 1400px;
}
</style>

<div class="@container mx-auto bg-red-100">
  <div class="
    flex w-full justify-between items-center 
    px-4 
    @sm:px-6 
    @lg:px-8
  ">
    <div class="title font-bold">Sensei</div>
    <div class="etc">
      <button class="rounded-full">Contact</button>
    </div>
  </div>
</div>

Named containers with example header name:

• Responsive design: Named containers - TailwindCSS v4 Docs

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";

@theme {
  --container-2xl: 1400px;
}
</style>

<div class="@container/header mx-auto bg-red-100">
  <div class="
    flex w-full justify-between items-center 
    px-4 
    @sm/header:px-6 
    @lg/header:px-8
  ">
    <div class="title font-bold">Sensei</div>
    <div class="etc">
      <button class="rounded-full">Contact</button>
    </div>
  </div>
</div>

Note: Mentioning the differences: You no longer need to repeat the word container. The @ symbol before a variant indicates that you want to target a container-specific breakpoint. From now on, only the breakpoint declaration is associated with the container. Everything else is shared globally across the project. In the case of a named container, the name must be specified at the breakpoint, as shown in the second example.