TailwindCSS 断点在命中某些断点时不会触发

Question

我正在开发一个 Next js + tailwindcss 项目，我试图让我的网站具有响应能力。

这是我的组件：

<div className="flex md:hidden">

根据规则，这个 div 应该首先将其显示设置为 flex，但是一旦达到屏幕尺寸“md”，它就应该隐藏。

但由于某种原因它使自己隐藏起来，并且 flex 属性从未被应用。

同样，第二种情况：

`<div className="bg-red-200 xs:bg-blue-500 sm:bg-pink-600 md:bg-green-400 lg:bg-gray-50"`

测试时，每个屏幕尺寸仅应用“md”屏幕尺寸的背景颜色。

我也尝试了自定义值，但没有解决任何问题，这是我的

tailwind.config.js

文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      'xs': '320px',
      'sm': '576px',
      'md': '960px',
      'lg': '1440px',
      'xl': '1280px',
      '2xl': '1536px',
    },
    extend: {},
  },
  plugins: [],
}

我已经浏览了文档、许多 StackOverflow 问题和 Youtube 视频，但我不知道为什么会发生这种情况，请帮我找到原因，谢谢。

Answer 1

发生这种情况是因为它不是最大显示而是最小显示，所以如果您使用md，它将影响lg和md显示，我遇到了同样的问题，我找到的解决方案是使用max-md

md:hidden

到

max-md:hidden

使用 max 使其仅适用于该显示

Answer 2

我也有同样的问题。你解决这个问题了吗？