如何在Tailwind CSS中高效编写媒体查询的多属性？

问题描述 #

截至撰写本文时，我一直采用如下方式编写媒体查询：

className="text-white text-[1.2rem] lg:text-blue lg:text-[2.5rem]"

请问是否存在无需手动重复书写"lg:"前缀，将同一媒体查询的多个属性集中编写的方法？我期望实现类似className="lg:{text-blue text-[1.2rem]}"的效果，使同一媒体查询的属性排列更规整。

解决方法 #

1. Tailwind原生分组语法（推荐） #

Tailwind CSS v3及以上版本的JIT模式支持分组断点语法，直接用括号包裹同一断点的所有样式，写法如下：

className="text-white text-[1.2rem] lg:(text-blue text-[2.5rem])"

Tailwind会自动为括号内的每个样式添加上lg:前缀，完全符合你想要的规整效果。

2. 提取自定义工具类 #

如果需要复用某组断点样式，可以在tailwind.config.js中定义自定义工具类：

module.exports = {
  theme: {
    extend: {
      utilities: {
        'lg-text-styles': 'text-blue text-[2.5rem]',
      }
    }
  }
}

之后直接在className中调用：

className="text-white text-[1.2rem] lg:lg-text-styles"

3. 框架中使用模板字符串处理（适合临时场景） #

在React、Vue等框架里，可以通过模板字符串拼接处理，避免重复写前缀：

const lgTextStyles = 'text-blue text-[2.5rem]';
// 替换空格为" lg:"，实现批量添加前缀
const formattedLgStyles = lgTextStyles.split(' ').map(style => `lg:${style}`).join(' ');

// 组件中使用
<div className={`text-white text-[1.2rem] ${formattedLgStyles}`}></div>

内容的提问来源于stack exchange，提问作者prog-pog