如何在TailwindCSS中针对多类媒体屏幕隐藏元素

Tailwind采用移动优先的响应式逻辑，默认断点是向上生效的（比如md:前缀表示768px及以上屏幕生效）。你给出的示例代码问题在于，单个xl:hidden这类类只会在指定断点及以上隐藏元素，但在更小的屏幕都会显示，导致多个元素在手机/平板上重叠显示。要精准控制不同屏幕区间的显示/隐藏，需要组合基础显示类和断点级的隐藏类。

先明确对应屏幕的断点区间（默认配置） #

• 手机：<768px（对应Tailwind的xs无断点前缀，到md断点之前）
• 平板：768px ~ 1023px（md断点及以上，lg断点之前）
• 笔记本：1024px及以上（lg断点及以上）

修正后的示例代码 #

<!-- 笔记本专属内容：仅在lg及以上屏幕显示 -->
<div class="hidden lg:block">a</div>

<!-- 平板专属内容：仅在md到lg之间显示 -->
<div class="hidden md:block lg:hidden">b</div>

<!-- 手机专属内容：仅在md以下屏幕显示 -->
<div class="block md:hidden">c</div>

代码逻辑解释 #

• hidden lg:block：默认隐藏所有屏幕，当屏幕达到lg（1024px）及以上时，切换为block显示
• hidden md:block lg:hidden：默认隐藏，md（768px）及以上时显示，到lg（1024px）及以上时又隐藏
• block md:hidden：默认在手机（<768px）显示，md及以上时隐藏

自定义精准断点（如果默认区间不符合需求） #

如果需要更贴合设备的尺寸（比如笔记本要从1200px开始），可以在tailwind.config.js里自定义断点：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'notebook': '1200px',
        'tablet': '768px',
        'mobile': '360px',
      },
    },
  },
}

之后就可以用notebook:block、tablet:hidden这类自定义断点类来控制显示。

内容的提问来源于stack exchange，提问作者Lim Han Yang