CODEWITHSUNDEEP
reactjstailwind-css
Blak
Blak

Reputation: 525

Tailwind responsive breakpoints are not working

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.

Upvotes: 6

Views: 12015

Answers (2)

Sanket Sardesai
Sanket Sardesai

Reputation: 439

if you miss this line - then nothing will work

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Add this to your tag, and then responsive classes will take their effect, of course your classes needs to be correct.

tailwind is mobile-first css so your un-prefixed class will affect mobile and for large screens you can use sm, md, lg as per your requirement

Upvotes: 1

Matanel Gordon
Matanel Gordon

Reputation: 168

The idea with "sm:" prefixes is that they are not meant for mobile. If you wish to style for mobile, you should just remove the prefix from the class's name, and override the styles for larger devices such as follows:

<button className="text-xs h-1 lg:text-lg xl:text-xl  redbtn">click me, I'm awesome</button>

That way, text-xs will run on mobile devices, until it hits lg:text-lg on wider screens, which enlarges the font's size. read more about it at the tailwindcss Documentation here

Upvotes: 17

Related Questions