Pro tips for tailwindCSS project

1. Aspect Ratio

A clean UI requires all cards and images to be perfectly sized across all devices. There are too many screen sizes to use responsive scaling units like

 em, rem, %,        

or 

vh/vw         

making media distorted on some platforms.

Forcing a size for media is non trivial with pixels but how do you force a responsive ratio? Perhaps, a profile banner is 1500x500 pixels, but user uploaded content makes preserving user experiences challenging. The answer is aspect ratio containers.

Aspect ratios will force the content to grow to the width of the container while auto-scaling the height to match the ratio to 16:9. A node with a width of 1920 will have a height of 1080 while on mobile it will scale to 320x180.

You can also customize the config file for more ratios:

module.exports = {
  theme: {
    extend: {
      aspectRatio: {        
        '4/3': '4 / 3',
        'banner': '1500/500'      
      },
    },
  },
  plugins: [],
}        

2. Inset Positioning

Currently, only 79% of browsers support the CSS aspect-ratio property. Luckily, there is a Tailwind plugin for aspect ratios that uses the padding-bottom hack. This is when insets become handy.

The inset technique plays nicely with aspect ratio containers because it is shorthand for absolute positioning. Perhaps, a perfectly square element needs nested scrolling content. The quickest solution is to use absolute positioning on a child element with full width and full height. Previously, this would take a few class names to correctly position the child element.

<!-- Pin to top left corner --
<div class="relative aspect-square ...">
  <div class="absolute left-0 top-0 h-1/2 w-1/2 ...">01</div>
</div>

<!-- Span top edge -->
<div class="relative aspect-square ...">
  <div class="absolute inset-x-0 top-0 h-1/2 ...">02</div>
</div>

<!-- Pin to top right corner -->
<div class="relative aspect-square ...">
  <div class="absolute top-0 right-0 h-1/2 w-1/2 ...">03</div>
</div>

<!-- Span left edge -->
<div class="relative aspect-square ...">
  <div class="absolute inset-y-0 left-0 w-1/2 ...">04</div>
</div>

<!-- Fill entire parent -->
<div class="relative aspect-square ...">
  <div class="absolute inset-0 ...">05</div>
</div>

<!-- Span right edge -->
<div class="relative aspect-square ...">
  <div class="absolute inset-y-0 right-0 w-1/2 ...">06</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative aspect-square ...">
  <div class="absolute bottom-0 left-0 h-1/2 w-1/2 ...">07</div>
</div>

<!-- Span bottom edge -->
<div class="relative aspect-square ...">
  <div class="absolute inset-x-0 bottom-0 h-1/2 ...">08</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative aspect-square ...">
  <div class="absolute bottom-0 right-0 h-1/2 w-1/2 ...">09</div>
</div>>