Tailwind CSS custom breakpoints not working

Question

I registered a custom breakpoint ('mymd': '962px') and after that all breakpoints that are lower in width do not work

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'mymd': '962px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
  variants: {
    extend: {},
  },
  plugins: [

  ],
}

html

<div class="sm:bg-red-900 
            md:bg-yellow-900 
            mymd:bg-gray-900 
            lg:bg-green-900 
            xl:bg-blue-900 
            2xl:bg-indigo-900 
            h-screen w-full">

2xl, xl, lg and mymd work correctly, but md & sm doesn't work

img - https://ibb.co/D4x3vF8

Answer 1

I cannot create a new breakpoint between the default breakpoint, but I did this

theme

const defaultTheme = require('tailwindcss/defaulttheme');

module.exports = {
  purge: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    screens: {
      'xs': '425px',
      ...defaultTheme.screens,
    },
    extend: {
      screens: {
        '3xl': '1920px',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [

  ],
}

HTML

<div class="sm:bg-red-900
            lg:bg-green-900
            3xl:bg-indigo-900
            h-screen w-full">
</div>

Answer 2

Try extending,

theme: {
 screens: {
   'sm': '640px',
   'md': '768px',
   'lg': '1024px',
   'xl': '1280px',
   '2xl': '1536px',
  },
  extend: {
    screens: {
      'mymd': '962px'
    }
  },
},

Update:

Seems to be working fine - check this sandbox You can view the result here