👀 Tailwind theme gamechanger #tutorial #css #javascript #webdevelopment #programming

Tailwind's default `text` sizes are fine... but they don't scale. CSS clamp() can help!

[skyhigheagleer]

Devs are obsessed with smooth rescaling but of users will never resize their window or browser from 320 to 1920

[voidbinary]

As UX Designer, some thoughts.
IF you want dynamic text scaling on resize of a users window.
Do we also then dynamically scale elements?
Because if we have a design system set in which contrast and layout is determined by the ratio of text sizes and element sizes.
Having a dynamic size font would break that ratio and therefore the contrast by size, if you do not dynamically scale everything accordingly.

Hence, only covering the fixed breakpoints that work for nearly every screen or well mobile-first and then scale it, most likely will be better. Besides the standard rule is to quite literally define a design system and then adapt those sm, lg, xl etc. to fit your design system.

Because for one you only need to layout test a set of breakpoints.
You can define layouts for a set of breakpoints.
You do not need to iterate check every dynamic resizing, and if you do how much testing is enough, would you need to test every resize possibility a user in theory could do?

The css clamp() function def is neat. But dynamic fonts based on the size of the viewport is more of a niche.
I do could see this being useful though if you want to cover scenarios like.
Split Screen Browsers, when a user attaches the browser to only the left side or right side or only for specific elements.

[nicolasmayorga]

I've been wanting to do this in Tailwind a lot of time ago thanks a lot for this

[aschmelyun]

Oooh, some great info, thanks! I’ve never used the clamp property before, will have to find an excuse to try it out now 😉

[SeanGrimLink]

Great short, I have used this pattern before with FylgjaCSS or OpenProps using there JS file to load the variable fonts in the Tailwind config without having to create them my self

[harshitprasad]

Kevin Powell made a video on this, can explains how clamp func works in depth

[MikeDest]

Rarely do users resize their browsers to notice, but it should still be default behavior in tailwind I think

[FullMealJacke]

Okay, finally something I haven't heard before.

[gideonidoko]

Just knowing about the website. Thanks for sharing.

[JasonEPerkins]

I just base all my font sizes in rem, clamp my root font size, and override when necessary.

[SkyZeLight]

Using view width is not recommended since it doesn't take into account user preference on their devices(base font) which is why we use rem and em.

[alexanderhorner]

I used to do this, but I also switched to hard break points. It just makes the ui much easier to reason about and you make sure the font size is always some accessible size.

For example “14px on small screens, 16px on big sceens” is much easier to reason about then 14px on small screens, then having to figure out what’s right viewport unit amount for in between, and then a 16px max. Not to mention you have to make sure that it actually looks good and is accessible between.

In the end users won’t care, since they’re not constantly rescaling the windows while using the site anyways.

[sayanghosh]

Wait till you hear accessibility is a thing and some people need to zoom in or out

[mluevanos]

Tailwind is for peeps that can't CSS

[muaddib]

Best way to adjust tailwind is to not use it.

[samuelmartins]

Wait so instead of using pure css media queries and specifying the range, I have to import tailwind, make my html look flipping ugly then go to another site to get the range for my dynamic font sizes?

Guys actually go through all this is in tailwind? 😳😳😳

[CobainAmbrose]

It's hilarious to me that people who use frameworks are turning to vanilla CSS as if it's some sort of life hack!

[jameswang]

Are you making your own transition sounds 🔥

[ReuelTeodoro]

What’s the site I the interface is covering the text.

[ethancloin]

shoutout i was just annoyed by this problem last night