responsive typography and vertical rhythm

[bnomei]

about responsive typography in tailwind... sure one could set it up using the utility classes in some cases. i usually create a component and it get some html parsed content from a cms. like h1 and p in example below.

<div class="my-component text-xl md:text-base">
  <!-- start component content -->
  <h1>Hello</h1>
  <h2>world</h2>
  <p>lorem ipsum</p>
  <!-- end component content -->
</div>

i ended up using @apply and @screen but thats a bit of a hassel to get done responsive imho. especially calulating the margin-bottom for vertical rhythm myself.

.my-component {
  h1 {
    @apply 
      .text-xl
      .leading-normal
      .mb-6; 
      /* 20px, 1.4 unitless lineheight, 1.4rem margin */
  }
  h2 {
    @apply .text-lg .leading-tight .mb-5; /* 18px, 1.2, ~1.2rem */
  }
  p {
   @apply .text-base;
  }
  p + p {
    @apply .pt-4; /* 1rem padding top */
  }
}

/* skipping @screen sm to keep it brief */

@screen md {
  .my-component {
    h1 {
      @apply .text-3xl .leading-tight .mb-7; 
      /* 28px, 1.2 lineheight, 1.2 margin based on lineheight. 
     now to get vertical rhythm right...
      margin bottom: not 1.2rem but 28/20*1.2 = 1.68 rem ! */
    }
   /* ... and lots more :-( */
  }
}

since i am using tailwind as a webpack postcss plugin i can no longer make use of sass mixin typi and its awesome vertical-rhythm function.

what i would love to have instead is something like this.

tailwind.config.js

// sm = 600px
// md = 800px
// define named font and vertical rhythm pairs for each breakpoint
typo: {
  'base': { // applied to root html element using @typo-init; like @include typi-init; does in typi.
    'base' : [ 16px, 1.4 ], // font-size, line-height aka vr. enter in px but will be converted to rem
    'sm': [ 18px ], // keeps 1.4 from above
    'md': [ 20px ],
  },
  'headline' : {
    'base' : [ 20px, 1.4 ],
    'sm': [ 24px ], // skipping line-height
    'md': [ 28px, 1.2 ],
  },
  'subtitle' : {
    'base' : [ 18px, 1.2 ], // or 'fontsize.lg', 'leading.tight' to keep it DRY
    // skipping sm
    'md': [20px ], // or 'fontsize.xl' to keep it DRY
  }
}

any tailwind css file

@typo-init; /* call on no element */

.my-component {
  h1 {
    @typo headline; // will create responsive font-size and line-heights
    @vr headline margin-bottom; // will create responsive margin-bottoms based on rem of line-height for headline (but multiplied by ratio like explained above)
  }
  h2 {
    @typo subtitle;
    @vr subtitle padding; // will create responsive versions of padding set to correctt line-height of subtitle in rem
  }
  p {
   @typo base; // this is redundant since calling @typo-init on html, but it explains it usage.
  }
  p + p {
    @vr base padding-top; // i think you get where i am going by now ;-)
  }
}

result of @typo-init

html {
  font-size: 100%; /* this means 16px */
  line-height: 1.4;
}

@media all and (min-width: 600px) {
  html {
    font-size: 112.5%; /* this means 18px */
  }
}

@media all and (min-width: 800px) {
  html {
    font-size: 125%; /* this means 20px */
  }
}

the resulting css is what i did before by hand but way shorter and solving the vertical rhythm problem.

maybe tailwind could be enhanced for better responsive typography and vertical rhythm based on typi? or any suggestions how to get it done better using tailwind?

[bnomei]

the main problem is how @typo and @vr should know their context and "bubble up" the @media rule. maybe having postcss-nested could do the trick?

[simensen]

would love to figure out how we could do more vertical rhythm stuff with tailwind. has anyone made personal progress on this?

[ricricucit]

did anyone move forward with this idea? @bnomei

[77cc33]

maybe we can do similar to Bootstrap 4.3? They are using this code https://github.com/twbs/rfs#how-does-it-work