CODEWITHSUNDEEP
cssnext.jsresponsive-designtailwind-css
Gourav Kumar
Gourav Kumar

Reputation: 117

TailwindCSS breakpoints are not triggering when hitting certain breakpoints

I am working on a Next js + tailwindcss project, where I am trying to make my site responsive.

This is my component: <div className="flex md:hidden">

According to the rules, this div should start with its display set as flex, but as soon as it hits screen size "md" it should hide.

but it keeps itself hidden for some reason, and flex property never got applied.

Similarly, in 2nd case:

`<div className="bg-red-200 xs:bg-blue-500 sm:bg-pink-600 md:bg-green-400 lg:bg-gray-50"`

only background color of "md" screen size is applied for every screen size while testing.

I tried custom values as well but it didn't solve anything, here is my tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      'xs': '320px',
      'sm': '576px',
      'md': '960px',
      'lg': '1440px',
      'xl': '1280px',
      '2xl': '1536px',
    },
    extend: {},
  },
  plugins: [],
}

I have gone through docs, many StackOverflow questions & Youtube videos but I don't have any idea why this is happening, please help me find its cause, Thanks.

Upvotes: 0

Views: 2058

Answers (1)

Eric Kong
Eric Kong

Reputation: 91

it happens because it's not max display but minimum so if you use md it will affect lg and md display, i had the same problem, and the solution i found was using max-md

md:hidden

to

max-md:hidden

using max makes it only work up to that display

Upvotes: 1

Related Questions