Tailwind CSS v4中如何配置容器的响应式内边距？

在Tailwind CSS v3中，我们可以通过tailwind.config.js轻松为容器配置不同屏幕尺寸的内边距：

theme:{
    container: {
       center: true,
       padding: {
          DEFAULT: `10px`,
           sm : `20px`,
           lg : `80px`,
           xl : `120px`
       }
    }
}

但Tailwind CSS v4移除了tailwind.config.js配置文件，所有主题配置需要通过全局CSS完成。你之前尝试的@container、@utility container等写法混淆了容器查询（Container Queries）和容器组件配置的概念，所以无法解决问题。

下面是两种可行的实现方式：

方法一：通过@theme指令配置内置容器类 #

在全局CSS文件中使用@theme指令直接扩展容器的主题配置，逻辑和v3的配置一致：

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

@theme {
  container: {
    center: true;
    padding: {
      DEFAULT: '10px',
      sm: '20px',
      lg: '80px',
      xl: '120px',
    };
  }
}

配置完成后，直接使用内置的.container类即可，它会自动根据屏幕尺寸应用对应内边距并保持居中。

方法二：自定义容器工具类（更灵活） #

如果@theme配置不生效，可以手动创建自定义容器类，结合Tailwind的内置断点和间距变量实现：

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

@layer utilities {
  .custom-container {
    margin-inline: auto;
    max-width: 100%;
    padding-inline: var(--container-padding, 10px);
  }

  /* 适配sm屏幕 */
  @media (min-width: theme('screens.sm')) {
    .custom-container {
      --container-padding: 20px;
    }
  }

  /* 适配lg屏幕 */
  @media (min-width: theme('screens.lg')) {
    .custom-container {
      --container-padding: 80px;
    }
  }

  /* 适配xl屏幕 */
  @media (min-width: theme('screens.xl')) {
    .custom-container {
      --container-padding: 120px;
    }
  }
}

使用时直接给元素添加.custom-container类即可，这种方式可以更灵活地调整容器的其他样式（比如最大宽度）。

需要注意：

• @container是容器查询的语法，针对父容器尺寸而非屏幕尺寸，和全局容器的内边距配置无关；
• @utility指令用于定义简单工具类，但语法格式有严格要求，不适合配置容器的响应式内边距。

内容的提问来源于stack exchange，提问作者Md Irfan Rahman Mubin