Error – textSizes vs. fontSize

[andyfitch]

Appreciate it's early doors with Tailwind 1.0.0-beta.3!

The new key for textSizes in Tailwind 1.0.0-beta.3 is fontSize, which seems to cause it to error now:

TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>) at /Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss-fluid/dist/index.js:1:1293 at Array.forEach (<anonymous>) at /Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss-fluid/dist/index.js:1:1240 at plugins.forEach.plugin (/Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss/lib/util/processPlugins.js:45:5) at Array.forEach (<anonymous>) at _default (/Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss/lib/util/processPlugins.js:44:11) at /Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss/lib/processTailwindFeatures.js:33:58 at LazyResult.run (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss/lib/lazy-result.js:295:14) at LazyResult.asyncTick (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss/lib/lazy-result.js:208:26) npm ERR! code ELIFECYCLE

[mdominguez]

Hi! v1.0 is out :D Any news on this? Thanks!

[magicspon]

I've open a PR that addresses this: https://github.com/bradlc/tailwindcss-fluid/pull/7

[jeremydouglas]

@bradlc any chance of getting this PR merged? Seems like a useful plugin.

[joelkrause]

This would be really handle to merge... Pretty please, @bradlc 🥺

[zizther]

+1

[willhindson]

Fantastic plugin! Also hoping for some maintenance updates for more recent version of Tailwind along the lines of this PR :)

[jeremydouglas]

I wonder if this is need still, now that we pretty have pretty wide clamp support.

[geonanorch]

@jeremydouglas I was about to fork this repo as it is clearly unmaintained (tried to email the owner repeatedly, no answer) when I saw your comment, thanks a lot for the hint! clamp() (neutral link to Mozilla in place of the Twitter link above) does indeed look like the proper solution. There are BUTs, though:

• it has "only" 85-90% coverage (caniuse). This most devs can ignore, I guess
• it is not directly usable with tailwind ? Or were you able to set it up ?

[jeremydouglas]

I haven't used it with Tailwind, but I image you would just set the font-size in your config to a clamp() value. I would do a fallback if you want to support IE and opera mini.

[geonanorch]

Agreed, that should work. I also realized that I want different clamping values depending on the device, so ended up disabling the default font-size handling in tailwind and defining alternative for the classes. Here is what it looks like for whomever might be interested to have fluid fonts with tailwind:

First some SCSS to help with the calculations:

@function vw($target, $device-width) {
  $vw-context: ($device-width*.01) * 1;
  @return ($target/$vw-context) * 1vw;
}

@mixin responsive-font($min, $max, $device-width) {
  $responsive: vw($max, $device-width);
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $min-breakpoint: $min / $responsive-unitless * 100;
  $max-breakpoint: $max / $responsive-unitless * 100;

  font-size: $max;  // fallback
  font-size: clamp($min, $responsive, $max);
}

Then the actual classes (the actual numbers might not make sense):

// MOBILE, w=320-768, 1rem=14px
%text-lg {
  @include responsive-font(15px, 18px, 768px);
}

// TABLET, w=768-1024, 1rem=16px
@media only screen and (min-width : 768px) {
  %text-lg {
    @include responsive-font(18px, 21px, 1024px);
  }
}

// DESKTOP, w=1024-1440, 1rem=18px
@media only screen and (min-width : 1024px) {
  %text-lg{
    @include responsive-font(21px, 24px, 1440px);
  }
}

The SCSS is far from perfect, the problem is too constrained by providing all of $min, $max and $device-width; the poly-fluid-sizing mixin mentioned in issue #5 looks like the best way to go, it is just a bit on the heavy side and I haven't tried it yet.

[NicoHood]

Hey guys, did you checkout this calculator? https://utopia.fyi/type/calculator

Using the new clamp feature is allows to set font-sizes like this:

/* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */

:root {
  --step--2: clamp(0.91rem, 0.89rem + 0.10vw, 0.96rem);
  --step--1: clamp(1.09rem, 1.05rem + 0.21vw, 1.20rem);
  --step-0: clamp(1.31rem, 1.24rem + 0.37vw, 1.50rem);
  --step-1: clamp(1.58rem, 1.46rem + 0.59vw, 1.88rem);
  --step-2: clamp(1.89rem, 1.71rem + 0.89vw, 2.34rem);
  --step-3: clamp(2.27rem, 2.01rem + 1.29vw, 2.93rem);
  --step-4: clamp(2.72rem, 2.36rem + 1.83vw, 3.66rem);
  --step-5: clamp(3.27rem, 2.75rem + 2.56vw, 4.58rem);
}

Maybe we could make use of this smaller clamp function?