如何在TailwindCSS自定义CSS文件中使用带min/max的@screen？

方法1：自定义断点（更推荐） #

Tailwind的断点可以自己在配置文件里添加，把你需要的766px、767px设成专属断点，之后就能用@screen直接调用，和官方断点用法一致。

1. 打开tailwind.config.js，修改screens配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm-max': {'max': '766px'},
      'md-min': {'min': '767px'},
      // 保留官方默认断点，避免影响现有样式
      'sm': '640px',
      'md': '768px',
      // 其他默认断点如lg、xl可按需保留
    },
  },
}

2. 在自定义CSS中调用新断点：

/* 匹配屏幕宽度≤766px的场景 */
@screen sm-max {
  .your-target-class {
    /* 自定义样式，也可以用@apply复用Tailwind工具类 */
    @apply text-center py-4;
  }
}

/* 匹配屏幕宽度≥767px的场景 */
@screen md-min {
  .your-target-class {
    @apply text-left py-2;
  }
}

方法2：直接写原生媒体查询 #

如果不想修改配置文件，直接写原生媒体查询即可，还能结合@apply复用Tailwind工具类：

/* 屏幕宽度≤766px时生效 */
@media screen and (max-width: 766px) {
  .custom-style {
    @apply bg-red-500 text-white rounded;
    /* 额外自定义样式可写在这里 */
  }
}

/* 屏幕宽度≥767px时生效 */
@media screen and (min-width: 767px) {
  .custom-style {
    @apply bg-blue-500 text-gray-900 rounded-lg;
  }
}

方法3：基于官方断点扩展 #

如果你的目标宽度刚好和官方断点接近（比如766px是官方md断点768px的前1px），可以这样写，不用新增断点：

/* 等价于max-width:766px，匹配小于md断点的范围 */
@media not all and (min-width: theme('screens.md')) {
  .example-class {
    /* 样式内容 */
  }
}

/* 等价于min-width:767px，用md断点减1px计算 */
@media screen and (min-width: calc(theme('screens.md') - 1px)) {
  .example-class {
    /* 样式内容 */
  }
}

整体来说，自定义断点的方式最省心，后续维护时通过断点名称就能快速对应宽度，比写死像素值更易打理。

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