如何在Tailwind CSS中仅为中大屏配置滚动触发的条件样式？

有两种常用的实现思路，根据你的技术场景选择即可：

方法一：模板中直接结合响应式前缀（框架场景，如React/Vue） #

Tailwind的md:前缀会自动作用于中等屏幕（默认≥768px）及更大尺寸的屏幕，直接把响应式前缀加到类名前即可：

// React示例
<div className={`${window.scrollY > 0 ? "md:bg-slate-50" : ""}`}>...</div>

// Vue示例
<div :class="window.scrollY > 0 ? 'md:bg-slate-50' : ''">...</div>

注：md:前缀已覆盖lg/xl等更大屏幕尺寸，无需重复添加lg:bg-slate-50。

方法二：JavaScript动态判断屏幕尺寸（纯JS或需要监听窗口变化场景） #

如果需要更灵活的控制，比如监听窗口大小变化，可以先判断屏幕宽度是否达到中等屏幕断点，再结合滚动条件添加类：

// 定义更新类的函数
const updateBgClass = () => {
  const targetElement = document.getElementById('your-target-element');
  const isMediumScreen = window.innerWidth >= 768; // Tailwind默认md断点为768px
  if (window.scrollY > 0 && isMediumScreen) {
    targetElement.classList.add('bg-slate-50');
  } else {
    targetElement.classList.remove('bg-slate-50');
  }
};

// 绑定触发事件
window.addEventListener('load', updateBgClass);
window.addEventListener('scroll', updateBgClass);
window.addEventListener('resize', updateBgClass);

内容的提问来源于stack exchange，提问作者Rave On Time