Scale fontsize different viewports

[merijnponzo]

Hi, i'm very new to tailwind.

How would i resize my

fontSize: {
      meta: '.875rem',
      read: '1rem',
      quote: '1.125rem',
      hero: '72px'
    }

hero fontsize at small viewports to (let's say) 48px

[olets]

For Tailwind you'll need to make a mental shift. You don't have a single font style that changes value responsively. Instead, you have two font styles and apply them at different breakpoints.

The method for that is responsive prefixes. There's an example at https://tailwindcss.com/docs/font-size#responsive

The two sizes your hero uses, 48px and 72px, are included in Tailwinds default configuration as text-5xl and text-7xl.

You can use the paradigm where you provide just a single class and handle the responsive sizing in the config file if you use the https://github.com/tailwindlabs/tailwindcss-typography plugin. But that's aimed more at styling markup which you don't have control over and so can't add text classes to. The responsive prefixes is the "Tailwindy" way.

[merijnponzo]

thanks, i will make the mental shift but except for typography this seems lot's of work to me.

Within Sass i created a mixin which works great, instead of going for Heading based sizes i use names which works great, also to brief from designer to developer. Since h1 is just semantic, and could inherit any class- i rather use names like hero or title

$font-types: (
  ('fs-hero', 56px, 25%, 'fs__h', 'expressive', bold, 1.1, 'inherit'),
  ('fs-title', 32px, 35%, 'fs__t', 'productive', bold, 1.1, 'inherit'),
  ('fs-subtitle', 26px, 34%, 'fs__s', 'productive', bold, 1.1, 'inherit'),
  ('fs-read', 20px, 20%, 'fs__r', 'productive', normal, 1.4, 'inherit'),
  ('fs-quote', 24px, 25%, 'fs__q', 'productive', 300, 1.4, 'inherit'),
  ('fs-label', 18px, 25%, 'fs__l', 'productive', normal, 1.1, 'inherit'),
  ('fs-input', 18px, 25%, 'fs__i', 'productive', normal, 1.1, 'inherit'),
  ('fs-btn', 16px, 30%, 'fs__b', 'productive', normal, 1.1, 'inherit'),
  ('fs-meta', 14px, 25%, 'fs__m', 'productive', normal, 1.1, 'inherit'),
  ('fs-nav', 14px, 25%, 'fs__n', 'productive', normal, 1.1, 'inherit'),
  ('fs-icon', 28px, 15%, 'fs__ico', 'icons', normal, 1.1, 'inherit')
);

So for example using

<h1 class="fs__h">

Uses an expressive typeface, can be upscaled 25% with space modifers, is bold, has a lineheight all applied with RFS.

I guess i should create a tailwind plugin for this ;-)