Properly override custom breakpoint Tailwind 2.2.x

tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme")

module.exports = {
  mode: "jit", // Tailwind v2.1

  theme: {
    // Usually, you extend your Tailwind properties. Doing so _appends_ your custom classes
    // to the default ones.
    // The problem with media queries breakpoints is that the order of the classes matters.
    // If you want to add breakpoints larger than the defaults, extending is fine.
    extend: {},

    // However, if you want to add smaller breakpoints, you need to completely override
    // the `screens` property
    screens: {
      xs: "375px", // start with your smaller breakpoint(s)
      ...defaultTheme.screens // append the defaults
    },

    // If you want to add intermediate breakpoints, you have to completely override the property
    //
    // screens: {
    //   'sm': '640px',
    //   'custom-sm': '667px',
    //   'md': '768px',
    //   'lg': '1024px',
    //   'xl': '1280px',
    //   'custom-xl': '1337px',
    //   '2xl': '1536px',
    // }
    
  },
  variants: {},
  plugins: [],
}