Responsive breakpoints are not working

[decadak0n]

I can't figure out why the overrides are not working in my project. I'm trying to make my website readable on mobile and at the moment it is displaying buttons with desktop size. I'm using tailwind and react. My button component is:

return <button className="sm:text-xs sm:h-1 redbtn" onClick={onClick}>{children}</button>

However text-xs only works if I removed the sm: prefix. I tried including

screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px'
        }

in my config file but that did not change anything.

[tlgreg]

Tailwind by default is mobile-first and uses min-width media queries. The above button would have that font-size and height applied from sm breakpoint and up, while default font size would apply only below sm. Demo: https://tailwind.run/rhvtGH

[decadak0n]

Well the problem is that it's displaying the button normally on ≥ md screens but its too big for sm screens.

[adamwathan]

Greg explained it correctly, check out the docs:

https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens

“sm:” targets screens 640 and bigger. Remove the prefix to target mobile.

[adamwathan]

Try something like “redbtn text-xs h-1 sm:text-base sm:h-auto”.

[decadak0n]

Okay thank you. I think I understand how it works now!