DEV Community

Cover image for Life Pro Tips for TailwindCSS Projects
Wade Zimmerman
Wade Zimmerman

Posted on • Updated on • Originally published at javascript.plainenglish.io

Life Pro Tips for TailwindCSS Projects

Recently, TailwindCSS released version 3.0 and the framework remains highly popular. Do you know all the little tricks for cleaner code?

Image description


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.

Image description

demo: https://play.tailwindcss.com/GOv5fZhyL3

<iframe class="w-full aspect-video ..." 
        src="https://www.youtube.com/ ...">
</iframe>
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

2. Inset Positioning

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

Aspect ratio plugin

Can I use aspect-ratio?

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.

Image description

However, Tailwind developers know this technique is common. Now a single utility class will handle all the positioning. Insets will fill or partially fill the entire parent node.

demo: https://play.tailwindcss.com/4ZTlx80ryN

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

Divided List Styling

Tailwind is not perfect and often requires custom CSS to match the list styles of other popular frameworks like Bootstrap. The iconic design places borders between each list item.

The style is preferable because it shows a clear distinction between list items without needing complex structures like table, flexbox, or grid. Moreover, lists are more compatible across browsers.

How do you quickly style a list like Bootstrap in Tailwind without writing custom CSS? Simple, use the divide utility.

Image description

demo: https://play.tailwindcss.com/YpbjZdaJoU

<ul class="divide-y border">
  <li class="p-3">a</li>
  <li class="p-3">b</li>
  <li class="p-3">c</li>
  <li class="p-3">d</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

You can also change the border weight and color like any other border. However you use the divide prefix instead:

<ul class="divide-y-2 border-2 border-red-500 divide-red-500">
  <li class="p-3">a</li>
  <li class="p-3">b</li>
  <li class="p-3">c</li>
  <li class="p-3">d</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Conclusion

Thank you for reading my post. Now you know a few ways to reduce the number of utility classes included in your code. Here is a final product that uses all the techniques mentioned above: https://play.tailwindcss.com/LmcYBNmbHl

Bonus

In-depth video for new TailwindCSS 3.0 features. (Not affiliated)

Latest comments (18)

Collapse
 
dualyticalchemy profile image
⚫️ nothingness negates itself

your examples are so milquetoast not about anything pragmatic nor practical, not about something at all

Collapse
 
wadecodez profile image
Wade Zimmerman

I agree! Perhaps a more suited expert should write a thorough step-by-step guide with real life examples. Surely a more tautological approach would win. My life is too DRY for such a task. The intellects must devote their time for these child developers. Computational systems including ML/AI are fundamentally flawed without philosophical or sociological backgrounds. Why are we wasting our time on styling websites for consumerism?

Collapse
 
dualyticalchemy profile image
⚫️ nothingness negates itself
Thread Thread
 
wadecodez profile image
Wade Zimmerman

Well played and well versed. I admit defeat.

Collapse
 
kevinast profile image
Kevin Bridges

Thanks for the tailwind tips!

A bit off topic, but you might be interested in tw-themes: which promotes color themes that are dynamically selectable at run-time, and automates your dark-mode through "shade inversion".

tw-themes.js.org/

At minimum, I would be interested in your thoughts :-)

Collapse
 
pawelmiczka profile image
Paweł Miczka

there are also space-[x/y]-* utility which is perfect to adding gaps to non grid layouts - highly recommend

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for sharing the practical tips. Inset Positioning is engaging.

Collapse
 
lamka02sk profile image
lamka02sk

Aspect ratio is cool, but the browser support isn't. If you are okay with supporting the very few latest versions, then fine, but I would not recommend using it just yet.

Collapse
 
wadecodez profile image
Wade Zimmerman • Edited

You're right only ~79% of browsers support the CSS aspect-ratio property. Luckily, there is a Tailwind plugin for aspect ratios which uses the padding-bottom hack. This is when insets become handy.

Aspect ratio plugin

Can I use aspect-ratio?

Collapse
 
lamka02sk profile image
lamka02sk

Thank you, didn't know about the plugin. I will definitely try it

Thread Thread
 
pavelloz profile image
Paweł Kowalski

Yep, dont forget about that important IE 11 :D

Fun fact: Last month i installed windows with ie 8 and for an hour i didnt manage to either update it to newer version, nor install firefox/chrome. Its so old SSL certificates, broken layouts and network issues made that impossible. I wonder hows life in the ie 11 land nowadays.

Thread Thread
 
lamka02sk profile image
lamka02sk

It is not about IE11, it is any browser before 2021...

Thread Thread
 
pavelloz profile image
Paweł Kowalski

Why care about browsers, when we can care about people.

Collapse
 
dandoestech profile image
Dan D

Great article!

Collapse
 
virajsingh19 profile image
Viraj Singh

I think flex spacing is also a good technique to know. Instead of spacing the children with margin classes like mr-5, you could space them at once using space-x-5 in the flex parent

Collapse
 
pavelloz profile image
Paweł Kowalski

+1, flex is great :)
space-x-5 is great.
I found gap-x-5 classes also helpful.

Collapse
 
emurrell profile image
Eric Murrell

Good article!

Collapse
 
alexkarpen profile image
alexkarpen

Many thanks