自定义Tailwind屏幕尺寸下条件使用类失效，类未覆盖问题求助

当然可行，你遇到的问题核心是CSS优先级冲突或者自定义屏幕尺寸的配置顺序不对，导致响应式类没覆盖基础类样式。

先检查自定义屏幕尺寸的配置 #

确保你的tailwind.config.js里的screens是按从小到大的顺序定义的，因为Tailwind默认使用min-width媒体查询，顺序错误会导致样式不生效：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    screens: {
      // 小屏幕在前，大屏幕在后
      'tablet': '768px',
      'desktop': '1024px',
    },
  },
  plugins: [],
}

解决样式覆盖问题 #

你写的class="logo tablet:logo-text desktop:logo-text"逻辑没问题，但如果logo类的样式权重高于响应式前缀的logo-text，就不会被覆盖。可以按以下方式调整：

1. 调整自定义类的权重
   如果logo和logo-text是你自己写的CSS类，确保响应式版本的样式权重足够。比如在自定义CSS中给媒体查询内的logo-text增加权重：

   .logo {
     color: #333;
     font-size: 16px;
   }
   
   @media (min-width: 768px) {
     .tablet\:logo-text,
     .desktop\:logo-text {
       color: #666;
       font-size: 20px;
       /* 若还是覆盖不了，可临时用!important（不推荐长期使用） */
       /* color: #666 !important; */
     }
   }
   

2. 改用Tailwind原生工具类组合（推荐）
   尽量避免自定义类的权重冲突，把logo和logo-text的样式拆成Tailwind工具类。比如：

   <!-- 小屏幕用基础样式，平板及以上切换为大屏样式 -->
   <div class="text-gray-800 text-sm tablet:text-gray-600 tablet:text-lg desktop:text-gray-600 desktop:text-lg"></div>
   

3. 调整类的应用逻辑
   反过来写，默认应用logo-text，仅在小屏幕下应用logo（需要你定义一个更小的屏幕前缀，比如sm）：

   <div class="logo-text sm:logo"></div>
   

这样调整后，大屏设备上的logo-text就能正常覆盖基础样式了。

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