Automated fluid rescaling & typography #12238
MartijnCuppens
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Earlier this month, I announced Tailwind fluid at the Tailwind Amsterdam meetup. In the meantime I did some adjustments with the feedback from the audience, so maybe now it's time to have a look if this functionality can be useful in Tailwind core.
About the rescaling technique
Tailwind fluid is based on RFS, a rescaling technique I made for Bootstrap in 2017. It was originally built to rescale font sizes, but the idea can be applied to whatever you want to rescale, like paddings, margins or gaps. Therefore I changed the name in the tailwind plugin to "fluid", since it's a little more generic.
Implementation
The implementation is pretty easy, you can just prefix any class where you want to apply fluid rescaling to with
fluid:
instead of adding all the responsive modifiers you're used to. It's an automated approach, so you don't need to define minimum sizes, just trust "the system". The goal is just to simplify your codebase from thisto this
To fluid modifier allows you to opt-in to fluid rescaling, so if you're not a fan of fluid rescaling, you can still stick to the utility classes you were already familiar to.
Alternative fluid rescaling methods
There are lot's of great other fluid rescaling methods available today like this one, that can give you a fine grained control over minimum and maximum sizes, but here you have to define a minimum per font size, padding, margin, etc... My approach focusses more on the ease of use, you don't even need to know what actually happens in CSS when you use the utilities.
Demos
Tailwind play
Go ahead, play with it: https://play.tailwindcss.com/nTyVWtOoQQ
Tailwind studio
This is the (commercial) Tailwind UI studio theme (original) with fluid resizing (font sizes, line heights, paddings, margins & gaps) applied to. In this implementation, the padding, margin, space, gap & font size utilities were replaced by fluid variants, which led to less classes & less generated CSS.
Demo: https://tailwind-studio-fluid.netlify.app/
Diff in CSS output: https://www.diffchecker.com/Z6EEucp2/
Beta Was this translation helpful? Give feedback.
All reactions