媒体查询在 Tailwind CSS 中不起作用

Answer 1

首先使用顺风CSS，媒体查询用于较大的屏幕，默认的CSS适用于移动设备，所以请记住这一点

我建议使用 tailwind 定义的标准断点，而不是覆盖配置文件，

   <img src={MYIMAGE} alt="Test Image" className="h-6 w-8 rounded-md md:h-full md:w-full" />

当屏幕大于 768px 时，这会将图片设置为全尺寸。

还要确保在 tailwindcss 中定义新断点时将以下内容添加到配置文件中

const defaultTheme = require('tailwindcss/defaultTheme')

 module.exports = {theme: {screens: {'gfold' :'400px' ,...defaultTheme.screens},}}

您可以在以下位置检查如何使用媒体查询创建顺风逻辑：https://learnjsx.com/category/1/posts/mediaQueries

Answer 2

要完全替换默认断点，请直接在 tailwind.config.js 中的主题键下添加自定义屏幕配置：

theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}

您尚未覆盖的任何默认屏幕（例如使用上面示例的 xl）都将被删除，并且不能用作屏幕修饰符。

要覆盖单个屏幕尺寸（如 lg），请在 theme.extend 键下添加自定义屏幕值：

module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}