遇到某些断点时不会触发 TailwindCSS 断点答案

【问题标题】：TailwindCSS breakpoints are not triggering when hitting certain breakpoints遇到某些断点时不会触发 TailwindCSS 断点
【发布时间】：2022-11-17 18:29:09
【问题描述】：

我正在做一个 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 视频，但我不知道为什么会这样，请帮我找到原因，谢谢。

【问题讨论】：

它发生是因为它不是最大显示而是最小所以如果你使用 md 它会影响 lg 和 md 显示，我有同样的问题，我找到的解决方案是使用 max-md

标签： css next.js responsive-design tailwind-css

【解决方案1】：

它发生是因为它不是最大显示而是最小所以如果你使用 md 它会影响 lg 和 md 显示，我有同样的问题，我找到的解决方案是使用 max-md

md:hidden

至

max-md:hidden

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

【讨论】：