CODEWITHSUNDEEP
htmlcsstailwind-css
real_dev04
real_dev04

Reputation: 155

Media Queries not Working in Tailwind CSS

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.

Upvotes: 3

Views: 13457

Answers (2)

Prince
Prince

Reputation: 59

To completely replace the default breakpoints, add your custom screens configuration directly under the theme key in your tailwind.config.js:

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

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

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

Any default screens you haven’t overridden (such as xl using the above example) will be removed and will not be available as screen modifiers.

To override a single screen size (like lg), add your custom screens value under the theme.extend key:

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

Upvotes: 1

Ali
Ali

Reputation: 136

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

Upvotes: 5

Related Questions