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

Question

Media Queries in TailWind CSS are not working Well.

My Code is this

<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) - A Media Size included by me in the tailwind.config.js file.
sm -> (640px) - A Default Media Size that Comes with Tailwind.

When Media Size is below sm size is correct, But when my screen is greater than the sm size the Size is not Changing .

Now what should I do? Please help me , I am new to Tailwind CSS.

Answer 1

First of all with tailwind css, the media queries are used for larger screens, the default css is applied for mobile, so keep that in mind

i would suggest the standard breakpoints defined by tailwind instead of overwriting the config file ,

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

this will set the picture to full dimensions when screen is larger than 768px.

also make sure when you define a new breakpoint in tailwindcss to add the following to the config file

 const defaultTheme = require('tailwindcss/defaultTheme') module.exports = {theme: {screens: {'gfold' :'400px' ,...defaultTheme.screens},}}

you can check how tailwind logic is made with media queries in: https://learnjsx.com/category/1/posts/mediaQueries

Answer 2

I found the Answer for my Question.
It can be found inside this Github thread
HUGE Thank to Adam Wathan for this Answer.