Tailwind CSS 官方从未提供 size 工具类，它不存在于 3.4 或任何版本中；你看到的可能是社区插件、本地配置扩展或记忆混淆；官方坚持单一职责原则，推荐直接组合 w-/h- 类或使用 aspect-ratio 插件。
size 工具类不是 Tailwind CSS 3.4 引入的，它根本不存在于任何官方版本中。
Tailwind 官方从未发布过名为 size 的工具类，也没有在 3.4 或后续版本（截至 2026 年 4 月）的 changelog、文档或源码中定义该类。你看到的 size 很可能是以下情况之一：
- 某个社区插件（如
@tailwindcss/aspect-ratio或自定义插件）添加的非标准类 - 项目本地在
tailwind.config.js中通过theme.extend.width和theme.extend.height手动注册的别名（比如size-64被映射为w-64 h-64），但这属于项目私有约定，非框架内置 - 错误记忆或混淆了其他框架（如 Bootstrap 的
size属性，或 CSS 的contain-intrinsic-size）
真正能“同时设置宽高”的做法只有两种
如果你想要一个类同时控制 width 和 height，必须自己封装：
- 用
@apply在 CSS 中组合：.icon-lg { @apply w-8 h-8; } - 在
tailwind.config.js中扩展theme.extend.aspectRatio或新增自定义尺寸键（但注意：这仍需分别写w-和h-类，不能靠单个类触发双属性）
为什么官方不加 size- 这类工具类
Tailwind 坚持 utility-first 哲学，核心原则是「单一职责」：w- 只管宽度，h- 只管高度，max-w- 只管最大宽度……混用会破坏可预测性。例如：
-
size-16是指w-16 h-16？还是w-16 h-auto？语义模糊 - 响应式场景下无法单独覆盖某一个维度（比如
md:size-32想只调高度？做不到） - 与现有工具类命名体系冲突（
size在 CSS 中已有语义，如contain: size）
实际开发中更推荐的替代方案
与其依赖不存在的 size，不如直接用原生组合：
- 正方形图标：
class="w-6 h-6"—— 清晰、无歧义、支持响应式前缀（sm:w-8 sm:h-8） - 固定比例容器（如 16:9）：
class="aspect-video w-full"（需启用@tailwindcss/aspect-ratio插件） - 需要复用的尺寸组：提取成组件或使用
@layer components定义语义化类
真正容易被忽略的是：Tailwind 的设计约束本身就是一种保护。强行塞进“快捷类”看似省事，实则会在响应式覆盖、调试定位、团队协作时埋下隐性成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
