Error with breakpoints

[jewe11er]

Describe the problem:

In tailwind.config.js added new breakpoints:

module.exports = {
  theme: {
    screens: {
      sm: { max: '600px' },
      md: { max: '960px' },
      lg: { max: '1280px' },
      xl: { max: '1600px' },
    },
  },
}

Try to use it

<div class="flex justify-start w-3/12 md:w-5/12 sm:w-2/12">
        <img src="/img/blue.svg" alt="logo" class="logo" />
</div>

But in browser on width 414px class 'w-2/12' disabled, works only 'w-5/12'

Screenshot

[adamwathan]

For max-width breakpoints you will want to reverse the order of your screens to make sure the smaller ones take precedence over the larger ones:

module.exports = {
  theme: {
    screens: {
      xl: { max: '1600px' },
      lg: { max: '1280px' },
      md: { max: '960px' },
      sm: { max: '600px' },
    },
  },
}