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

Question

TailWind CSS 中的媒体查询无法正常工作。

我的代码是这样的

<img src={MYIMAGE} alt="Test Image" className="h-6 w-8 rounded-md gfold:h-8 gfold:w-14 gfold:rounded-xl sm:h-16 sm:w-24 " />

gfold-> (400px)- 我在文件中包含的媒体大小tailwind.config.js。
sm-> (640px)- Tailwind 附带的默认介质尺寸。

当媒体尺寸低于sm尺寸时是正确的，但是当我的屏幕大于sm尺寸时，尺寸不会改变。

现在我该怎么办？请帮助我，我是 Tailwind CSS 的新手。

Answer 1

首先，使用 tailwind css，媒体查询用于较大的屏幕，默认的 css 适用于移动设备，因此请记住这一点

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

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

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

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

const defaultTheme = require('tailwindcss/defaultTheme')

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

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