如何将多个Tailwind CSS工具类归到同一修饰符下？

我在Vite编译的TypeScript + React项目中使用Tailwind默认断点时，发现项目和官方文档里都存在同一元素重复使用相同修饰符（比如md:）的情况，例如官方文档中的这段代码：

<img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="Modern building architecture">

想知道能不能把h-full和w-48归到同一个md:修饰符下，以此提升样式的可读性和定位效率？

我的尝试方案 #

借助Tailwind默认调色板和断点值，我实现了当屏幕尺寸≥sm（默认最小宽度640px）时，“Hello World”显示橙色背景和最粗字体：

<h1 className="sm:bg-orange-500 sm:font-black">Hello World</h1>

为了用单个sm:修饰符实现相同效果，我尝试用大括号包裹逗号分隔的工具类，但这种写法无效：

<h1 className="sm:{bg-orange-500, font-black}">Hello World</h1>

可行的解决办法 #

Tailwind本身不支持sm:{xxx, xxx}这类自定义语法，但可以通过以下几种方式实现类似的“分组”效果，优化代码可读性：

1. 使用@apply指令封装复用样式（推荐） #

在项目的全局CSS文件（比如globals.css）中，用@layer utilities定义包含断点样式的复用类：

@layer utilities {
  .sm-orange-bold {
    @apply sm:bg-orange-500 sm:font-black;
  }
}

之后在React组件中直接引用这个类即可：

<h1 className="sm-orange-bold">Hello World</h1>

2. 用JS变量存储组合样式 #

在组件内将同一断点的样式打包成变量，再拼接进className：

const smScreenStyles = "sm:bg-orange-500 sm:font-black";
<h1 className={smScreenStyles}>Hello World</h1>

3. 借助编辑器插件优化体验 #

安装Tailwind CSS IntelliSense插件，它会自动在编辑器中将同一断点的样式分组显示，无需修改代码就能提升可读性和定位效率。

注意：不要使用自定义语法（如大括号包裹的写法），Tailwind的样式解析器无法识别这类写法，会导致样式失效。

内容的提问来源于stack exchange，提问作者Nuri Kim