why does tailwind use rem instead of em?

Basically the title. This is mostly just out of curiosity but im trying to make my existing webapp (that was written for desktop) mobile friendly and it seems like its going to be a lot of work to add

className="text-lg :lg:text-xl xl:text-3xl"

className="text-lg :lg:text-xl xl:text-3xl"

all over my code

SuplenC•1/13/23, 10:40 PM

It's better to generally not use em, and use rem instead because sometimes it might cause undesired behaviour. That's why either bootstrap and tailwind uses it and it's generally recommended to use it.

TomOP•1/13/23, 10:41 PM

ok. ive seem some conflicting stuff online

TomOP•1/13/23, 10:42 PM

somethings say you can just use em and font sizes are kinda responsive without much work

TomOP•1/13/23, 10:42 PM

but it was definitely confusing

TomOP•1/13/23, 10:42 PM

is there a source somewhere on why its bad practice?

TomOP•1/13/23, 10:52 PM

that makes a lot of sense

TomOP•1/13/23, 10:52 PM

is the book worth it? i was considering getting it

TomOP•1/13/23, 10:53 PM

ok. thanks. that quote alone clears up a lot

TomOP•1/13/23, 10:53 PM

thanks

TTom is the book worth it? i was considering getting it

SuplenC•1/13/23, 10:56 PM

Yes absolutely. Highly recommended.

SuplenC•1/13/23, 10:58 PM

is good if you are going for just css. If you are using Tailwind if you have repeating same text sizes for each h1 up to h6 you can use

TomOP•1/13/23, 10:58 PM

that seems good. kinda not how tailwind works... this is my first project with tailwind. it makes a lot of stuff so much faster to write and think about, but it definitely seems limitting too

TomOP•1/13/23, 10:59 PM

@SuplenC oh ok. ill have to look into that

SuplenC•1/13/23, 11:00 PM

there is a good video from fireship that shows most of the tailwind features: https://www.youtube.com/watch?v=pfaSUYaSgRo

YouTubeFireship

Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated...

Learn the basics of Tailwind CSS by building a Discord-inspired navbar from scratch. Learn how to leverage utility classes to build responsive animated UI elements faster https://fireship.io/lessons/tailwind-tutorial/

#webdev #css #tutorial