TAILWIND CSS v4 · 布局与迁移工作台

组件明明变窄了，为什么还保持桌面布局？

因为视口没变。拖动下面的组件宽度，对比 sm: 与 @sm:；然后再把真实项目条件放进迁移清单，别把“大版本升级”当成盲选题。

01 / 尺寸实验

同一个商品组件，塞进不同宽度的区域

页面宽度不动，只调整下面“插槽”的宽度。容器查询读取组件实际拿到的空间；视口断点只看浏览器窗口。

TW
组件级响应@sm 已触发

可移植的商品卡

放在侧栏、主内容区或弹窗里，都根据自己得到的宽度重排。

¥ 299

02 / 项目体检

你的项目现在适合迁到 v4 吗？

按真实情况勾选。清单不会替你运行升级，但会把需要人工核对的地方摊开。

迁移条件

迁移建议

先试迁一个真实入口

准备度 67%

现代浏览器与构建链条件已满足，但主题迁移和视觉回归还没准备好。先挑一个能独立验收的入口试迁。

v3 旧写法检查点
plugins: [
  require('@tailwindcss/container-queries')
]

theme: {
  container: { center: true, padding: '2rem' }
}
v4 对应思路核心能力
@import "tailwindcss";

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

/* 容器查询已经内置 */
下一步清单