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

【问题标题】：Media Queries not Working in Tailwind CSS媒体查询在 Tailwind CSS 中不起作用
【发布时间】：2021-12-08 20:01:24
【问题描述】：

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 的新手。

【问题讨论】：

你能在Tailwind Play重新创建你的问题
这里是Link
你到底想要什么？你想得到什么结果？
我想在屏幕尺寸改变时改变图像尺寸。但它没有发生。
断点需要从小到大排序才能工作。您的新 gfold 类将覆盖大于它的默认断点。文档中明确提到了这一点，以及当您想要添加小断点时应该做什么的指导tailwindcss.com/docs/…

【解决方案1】：

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

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

   &lt;img src={MYIMAGE} alt="Test Image" className="h-6 w-8 rounded-md md:h-full md:w-full" /&gt;

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

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

const defaultTheme = require('tailwindcss/defaultTheme')

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

您可以在https://learnjsx.com/category/1/posts/mediaQueries 中查看顺风逻辑是如何通过媒体查询生成的

【讨论】：