Tailwind CSS 4.x如何为自定义响应式容器设置屏幕尺寸变体

你可以通过以下几种方式为自定义.container设置不同屏幕尺寸的样式：

方法1：使用@screen指令（推荐） #

Tailwind 4.x仍支持@screen指令，可直接复用配置中的断点名称，逻辑和3.x插件写法一致，只需将响应式样式写在CSS的@layer components中：

@layer components {
  .container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  // 小屏幕（sm断点）样式
  @screen sm {
    .container {
      max-width: 540px;
    }
  }

  // 中等屏幕（md断点）样式
  @screen md {
    .container {
      max-width: 720px;
    }
  }

  // 大屏幕（lg断点）样式
  @screen lg {
    .container {
      max-width: 960px;
    }
  }
}

这种写法无需手动编写媒体查询像素值，能保持样式与Tailwind配置的断点定义一致。

方法2：使用原生媒体查询 #

如果需要自定义断点像素值，可直接写原生CSS媒体查询：

@layer components {
  .container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  // 自定义小屏幕断点
  @media (min-width: 600px) {
    .container {
      max-width: 580px;
    }
  }

  // 自定义大屏幕断点
  @media (min-width: 1024px) {
    .container {
      max-width: 1000px;
    }
  }
}

方法3：结合响应式前缀（灵活场景可选） #

若需要通过类名动态切换容器样式，可定义带响应式前缀的变体，不过需在HTML中手动添加对应类：

@layer components {
  .container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .sm:container {
    max-width: 540px;
  }

  .md:container {
    max-width: 720px;
  }
}

使用时需在HTML中写：<div class="container sm:container">...</div>

内容的提问来源于stack exchange，提问作者Denis Kulagin