如何用Tailwind CSS响应式系统在md断点显示移动端专属提示

核心思路是利用Tailwind的移动优先响应式规则：默认在移动端隐藏提示内容，当屏幕宽度达到md断点及以上时显示。不需要额外组件，用基础HTML元素配合Tailwind工具类就能实现简洁效果。

方案一：全屏遮罩式提示（更醒目） #

<div class="hidden md:block fixed inset-0 bg-black/80 flex items-center justify-center z-50">
  <div class="bg-white p-6 rounded-lg max-w-md w-full text-center">
    <p class="text-gray-800 font-medium">Not tablet or desktop friendly - please use a mobile device.</p>
  </div>
</div>

类名说明：

• hidden：默认（移动端）隐藏元素
• md:block：屏幕宽度达到md断点（默认768px）时切换为块级显示
• fixed inset-0：让半透明背景铺满整个视口
• bg-black/80：半透黑背景，遮挡页面原有内容，突出提示
• flex items-center justify-center：让提示框在视口中垂直水平居中
• z-50：确保提示层级高于页面其他内容

方案二：顶部横幅式提示（更简洁） #

如果不需要遮罩层，仅展示顶部提示条：

<div class="hidden md:block w-full bg-amber-100 border border-amber-200 text-amber-800 p-3 text-center">
  Not tablet or desktop friendly - please use a mobile device.
</div>

自定义断点（可选） #

如果需要调整触发提示的屏幕宽度，可在tailwind.config.js中修改md断点的值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      md: '900px', // 自定义md断点为900px
      sm: '640px',
      lg: '1024px',
      xl: '1280px',
    },
  },
}

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