5

I want to extend 540px and 1920px screen size in tailwind but 'xxs' didn't work.

**theme: {
extend:{
  screens:{
    'xxs':'540px',
    'xxl':'1920px',
  },
}

}**

1 Answers1

3

If you want to add an additional small breakpoint, you can’t use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system. Use this code instead:

theme: {
    screens: {
        'xxs':'540px',
        ...defaultTheme.screens,
    },
},

Here is the related link:

Adding smaller breakpoints

mo3n
  • 1,522
  • 2
  • 10
  • 34
  • 1
    The devs could have written code to sort the breakpoints for us. Computers are very good at doing simple computation tasks like sorting. This is 100% an implementation detail that could get abstracted out. ): – John Miller Aug 31 '22 at 14:07