tailwind 不支持真正的自适应亮度，brightness() 值需手动设定，dark: 前缀仅条件切换明暗两套固定值；必须启用 filter 属性、配置 darkmode: 'class'，并用 js 实现明暗切换。
直接说结论：Tailwind 本身不提供“自适应亮度”这种动态响应系统偏好或环境光的滤镜能力，brightness() 值必须手动设定；所谓“自适应”，实际是靠 dark: 前缀 + 手动控制明暗两套固定值来模拟，不是真正感知亮度传感器或系统 API。
为什么不能用 prefers-reduced-motion 或 light-level 控制 brightness
Tailwind 的工具类只编译你写死的 CSS 规则，不支持媒体查询中的动态函数（如 @media (light-level: dim)）或 JS 驱动的实时计算。浏览器目前也未广泛支持 light-level 媒体特性（仅 Safari 技术预览版有限实验），prefers-reduced-motion 更是跟亮度无关。所有“自适应”都是伪自适应——本质是条件切换。
-
dark:brightness-75不会根据环境变亮变暗，它只在document.documentElement有dark类时生效 - 想响应系统深色模式？必须配
darkMode: 'class'，否则dark:完全不生成 CSS - 想响应系统亮度设置？目前无标准 CSS 方案，需用 JS 读取
navigator.getBattery()（已废弃）或window.matchMedia（无亮度相关）——不可行
brightness 类必须和 filter 开关一起用
单独写 brightness-125 没效果，因为 Tailwind 默认不启用 filter 属性。这是最常被忽略的前提。
- 错误写法：
img class="brightness-125"→ 浏览器忽略该声明 - 正确写法：
img class="filter brightness-125"→ 编译为filter: brightness(1.25) - 如果要用在 hover 上，得先在
tailwind.config.js显式启用：filter: ['hover']，否则hover:brightness-50不生效 - 多个滤镜共存时顺序无关：
filter brightness-75 contrast-110 grayscale合法，最终合并为单条filter声明
如何实现“点击切换明暗图片”的最小可行方案
用 JavaScript 切换两个预设亮度值（比如白天 100%，夜间 75%），比试图“自适应”更稳定、可控。
- 初始状态明确设为
brightness-100，避免依赖隐式默认 - 切换逻辑不要用
classList.toggle('brightness-100')单独操作——容易因 class 存在状态混乱导致失效 - 推荐写法：
img.classList.replace('brightness-100', 'brightness-75')或img.className = isDark ? 'filter brightness-75' : 'filter brightness-100' - 加过渡动画？补上
transition-all duration-300，但注意 Safari 对filter过渡支持差，可加will-change: filter（慎用，可能引发重绘层问题）
深色模式下图片亮度的常见误操作
很多人以为 dark:brightness-50 就能让图片在深色模式下自动变暗，但实际容易踩三个坑：
- 没配
darkMode: 'class'→dark:类根本不存在，构建后 CSS 里找不到这行规则 - 把
dark类加在上 → Tailwind 只检查元素，加错位置等于没加 - 用了
dark:invert→ Tailwind 默认不提供这个变体，写了也白写，浏览器无视 - 想对
<img>做深色适配？别指望dark:自动改 src，它只管 CSS 层；要换图得用 JS 或<picture></picture>+media
真正容易被忽略的是：brightness 值没有“中性点”概念，brightness-100 是 1.0（原图），brightness-0 是 0（纯黑），中间值全靠你试——不同图片对同一 brightness 值的观感差异极大，必须实机验证，不能只看文档数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
