如何在TailwindCSS v4中使用新的@container替代基于JS的theme.container配置属性？

嘿，我懂你现在的感受——Tailwind v4把原来在tailwind.config.js里配置theme.container的方式给换了，刚升级的时候确实会有点懵。不过别担心，咱们一步步把原来的配置转成v4的写法，完美复刻原来的效果，甚至还能用上新的容器查询特性！

首先，原来你在v3里的配置是设置容器居中、不同断点的内边距，还有2xl断点的最大宽度。在v4里，我们不再在JS配置里搞这些了，转而在CSS里自定义容器类，结合@layer来让Tailwind处理样式优先级。

方法一：复刻原来v3容器的基础效果（基于视口断点） #

如果只是想和之前的效果完全一样，不需要容器查询的特性，直接在你的CSS入口文件（比如tailwind.css）里加这段代码：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .container {
    /* 基础样式：居中 + 默认内边距1rem */
    @apply max-w-full mx-auto px-4;
    /* sm断点下的内边距2rem */
    @screen sm {
      @apply px-8;
    }
    /* 2xl断点下限制最大宽度为1400px */
    @screen 2xl {
      @apply max-w-[1400px];
    }
  }
}

写完之后，你在HTML里用<div class="container">就和之前v3里的效果一模一样了——页面居中，小屏幕下内边距变大，超大屏幕下限制宽度在1400px。

方法二：用上v4的@container容器查询特性（基于容器自身宽度） #

如果你想试试v4带来的新特性，用容器自身的宽度来触发样式变化（而不是视口宽度），可以这样写：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .container {
    /* 基础样式：居中 + 默认内边距 */
    @apply max-w-full mx-auto px-4;
    /* 声明这是一个容器查询的容器 */
    container-type: inline-size;
    container-name: app-container;
  }

  /* 当容器自身宽度达到640px时，修改内边距 */
  @container app-container (min-width: 640px) {
    .container {
      @apply px-8;
    }
  }

  /* 当容器自身宽度达到1400px时，限制最大宽度 */
  @container app-container (min-width: 1400px) {
    .container {
      @apply max-w-[1400px];
    }
  }
}

这种方式的好处是，哪怕这个容器不是占满整个视口，只要它自身的宽度达到了设定的值，样式就会变化——比如把容器放在一个侧边栏旁边，它的宽度变化时也能触发样式，这是原来v3的配置做不到的。

小提示 #

• 如果你不想自定义类，也可以直接在HTML里写内联的Tailwind类：<div class="mx-auto max-w-full px-4 sm:px-8 2xl:max-w-[1400px]">，效果一样，只是自定义类更方便复用。
• 内边距和断点值都可以根据你的需求调整，比如把px-4改成px-3，或者把1400px改成1200px都没问题。

内容来源于stack exchange