Tailwind media queries not working properly

Question

tailwind media queries work ok above 1000px but when used for less than 1000px not work.

working ok for this code.

\<div className="flex max-\[1000px\]:hidden"\>

but not working when using following

\<div className="flex max-\[900px\]:hidden"\>

Answer 1

If you want to specifically target screens with a maximum width of 1000 pixels, you would use the following:

<div class="hidden md:block lg:block xl:block 2xl:block"> <!-- Hidden on small screens, visible on screens up to 1000px wide -->
  Content to hide on small screens and screens wider than 1000px
</div>

another solution is that you should define your media query in Taiwind config. e.g

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    fontFamily: {
      satoshi: ['Satoshi', 'sans-serif'],
    },
    colors: {
      current: 'currentColor',
      transparent: 'transparent',
      white: '#FFFFFF',
      black: '#1C2434'
    },
    screens: {
      '2xsm': '375px',
      xsm: '425px',
      '3xl': '2000px',
      ...defaultTheme.screens,
    },
  },
  plugins: [require("daisyui")],
}