CODEWITHSUNDEEP
tailwind-csstailwind-ui
Rasel Ahmed Chowdhury
Rasel Ahmed Chowdhury

Reputation: 51

How to Extend Tailwind Screen size?

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

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

}**

Upvotes: 5

Views: 2504

Answers (1)

mo3n
mo3n

Reputation: 1870

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

Upvotes: 4

Related Questions