为高分辨率及高PPI屏幕自定义Tailwind断点

要实现同时满足屏幕尺寸和DPR条件的快捷媒体查询，直接在Tailwind配置里扩展自定义断点即可，步骤如下：

1. 修改Tailwind配置文件 #

打开项目根目录的tailwind.config.js，在theme.extend.screens中添加自定义断点。针对你的场景，这里提供两种常见配置：

示例1：针对小尺寸高DPR屏幕（解决内容拥挤） #

匹配屏幕宽度≤1280px且DPR≥2的小尺寸高PPI屏幕（对应你提到的小尺寸4K笔记本）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      screens: {
        'small-high-dpr': {
          raw: '(max-width: 1280px) and (min-device-pixel-ratio: 2)'
        },
      },
    },
  },
  plugins: [],
}

示例2：最小屏幕尺寸+最小DPR的组合（类似2xl:逻辑） #

如果需要「达到最小屏幕宽度+DPR达标」的断点，参考默认2xl的min-width: 1536px，可以这样定义：

screens: {
  'high-dpr-2xl': {
    raw: '(min-width: 1536px) and (min-device-pixel-ratio: 2)'
  },
}

2. 在代码中使用自定义断点 #

配置完成后，就能像使用2xl:一样用自定义前缀编写样式。比如针对小尺寸高DPR屏幕，调整内边距和字体大小缓解拥挤：

<div class="px-4 small-high-dpr:px-6 text-base small-high-dpr:text-lg">
  页面内容
</div>

原理说明 #

Tailwind的screens配置支持通过raw字段直接传入自定义媒体查询字符串，以此灵活组合多个条件（如屏幕尺寸、DPR），生成对应的断点前缀。

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