[question] amount of classes - css size

[danpii]

Hi,

I really like this approach.
I usually use something like https://utopia.fyi to generate fluid font sizes.
Each font size is a css variable and is fluid by itself.
With this setup I still have to write classe like fluid-text-base sm:fluid-text-md lg:fluid-text-2xl. But I only have 8 css classes.

Do I understand it correctly, that your plugin creates a css class for every used combination? So if used extensively, could that lead to a big amount of css classes and a big css file? Compared to using 'fluid utility classes'? Especially when also used with padding and margin?

[barvian]

Thanks for the question! Yes, this plugin creates a unique class for each used combination. But when compared to your Utopia setup, I wouldn't expect a larger CSS bundle. That's because, if I follow correctly:

Your output CSS	Would become
.fluid-text-base { font-size: clamp(...) }	.\~text-base\/xl { font-size: clamp(...) }
.fluid-text-md { font-size: clamp(...) }	.\~text-xl\/2xl { font-size: clamp(...) }
.fluid-text-lg { font-size: clamp(...) }	.\~text-2xl\/3xl { font-size: clamp(...) }

So it'd mostly be a matter of renamed classes.

As for padding/margin: yes, introducing new fluid classes in a site will probably result in a slightly larger CSS output, but that's true whether you use this plugin or generate the clamp() values with a tool like Utopia and paste them into your Tailwind config.

[danpii]

Thanks for clarifying.
I think in my case it will be a few more classes. Let's say I create fluid margin classes for values sm,base,md,lg,2xl. Without fluid-tailwind I would add thise classes in the default tailwind breakpoint style. But only those 5.
With fluid-tailwind I will probably create classes like ~m-2/10, ~m-4/10, ~m-4/8 and many more.
But the automatic fluid styling of fluid-tailwind is super valueable, so I will definitively use it!