为何Tailwind CSS中750px-1177px区间的font-bold样式不生效？

我想在屏幕宽度处于750px至1177px之间时，让文本显示为粗体，于是在Tailwind CSS的className中添加了min-[750px]:max-[1177px]:font-bold，但该样式并未生效。相关代码如下：

<div className="px-14 md:px-48 p-8 md:pt-12">
            <ul className="w-full">
              <li className="grid grid-cols-4 md:grid-cols-4 border-2 rounded-2xl border-[#002D74] h-[98px] md:h-[156px] px-6 md:px-8">  
                <div className="col-span-3 flex items-center">
                  <img
                    className="md:h-24 md:w-24 h-14 w-14 pl-1"
                    src="https://play-lh.googleusercontent.com/bDCkDV64ZPT38q44KBEWgicFt2gDHdYPgCHbA3knlieeYpNqbliEqBI90Wr6Tu8YOw"
                  />

  --> this line   <div className="pl-4 md:pl-14 md:text-3xl text-sm min-[750px]:max-[1177px]:font-bold  pt-1 md:pt-3"> 
                    <span id="wallet-name">Paypal wallet</span>
                    <span id="wallet-number" className="block pt-2 md:pt-4">
                      **** *** 352
                    </span>
                  </div>
                </div>
                <div className="col-span-1 flex items-center justify-end">
                  <RiDeleteBin5Fill
                    size="32"
                    color="#BE2C2C"
                  ></RiDeleteBin5Fill>
                </div>
              </li>
            </ul>
 </div>

请问这是什么原因？

原因 #

Tailwind CSS不支持min-[x]:max-[y]:class这种直接将最小宽度和最大宽度断点连写的语法。你写的这个类名不符合Tailwind的断点解析规则，所以不会被转换成对应的媒体查询样式。

解决方案 #

有两种常用的解决方式：

1. 自定义断点（推荐）
   在tailwind.config.js中添加一个覆盖750px到1177px范围的自定义断点：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'custom-range': ['750px', { 'max': '1177px' }],
      },
    },
  },
}

之后在代码中直接使用custom-range:font-bold即可：

<div className="pl-4 md:pl-14 md:text-3xl text-sm custom-range:font-bold pt-1 md:pt-3">

2. 使用自定义CSS层
   在全局CSS文件中，通过@layer声明自定义媒体查询样式：

@layer utilities {
  .font-bold-range {
    @media (min-width: 750px) and (max-width: 1177px) {
      font-weight: bold;
    }
  }
}

然后在className中添加font-bold-range类：

<div className="pl-4 md:pl-14 md:text-3xl text-sm font-bold-range pt-1 md:pt-3">

内容的提问来源于stack exchange，提问作者Legend Never Die