Using more than 2 Breakpoints

[firdausbaihaqi]

Hello everyone, I'm trying to make one of my components only show on xs screen, make it hidden on medium and larger screen, and also hidden it on anything smaller than xs screen, but it doesn't seem working with my code below..

[simonswiss]

Hey!

This should totally work - but there is no xs breakpoint in Tailwind by default - the smallest breakpoint is called sm.

Here's a working example that "shows/hides" an element at different screen sizes:

https://play.tailwindcss.com/baxS1WMexk

Hope it helps 👍

[firdausbaihaqi]

Hi Simon, thanks for your answer, but actually I've extended my tailwind config with xs breakpoint.

here is my config :

theme: {
        extend: {
            screens: {
                'xs': '375px',
            },
        },
    }

or maybe using multiple breakpoints just doesn't work with extended breakpoints?

[MartinHughes-BPC]

Hi!

From the docs: https://tailwindcss.com/docs/breakpoints#extending-the-default-breakpoints

"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.

Instead, override the entire screens key, re-specifying the default breakpoints:"

Cheers,
Martin.

[firdausbaihaqi]

oh, you're right, I totally missed that one 😓

I override my screens config so that xs breakpoints take the first place of all other breakpoints, and now it works just as I want.

Thanks Martin!!