Introduction

Tailwind CSS has won me over, and now if I can get away with using it, I will. However with great power comes great responsibility, and with Tailwind, that mean writing classes in a way that gets you what you need, with as few classes as possible.

General Tips

Here are some tips I've slowly migrated to using regularly that have made mine and others lives easier, and hopefully now yours too!

You can use Tailwind CSS Playground to experiment with any of these examples 👍

X/Y axis

Most of the time when using padding or margins, the spacing you are creating will be the same top and bottom, as it is left and right, so if you see:

<div class="pl-4 pr-4 pt-2 pb-2"></div>

Change it to:

<div class="px-4 py-2"></div>

If all 4 directions need to be the same, just use p

<div class="p-4"></div>

Only vertical margins

Margins are great as it allows you to create space around an element without creating a needless parent with padding. But in complex UI structures, setting margin-left or margin-right can cause all kinds of hell later on as things change as it can push elements causing them to overflow their parent.

Vertical margins on the other hand are usually fine and very rarely cause this issue. So if you see:

<div class="mx-4 my-4"></div>

If possible, changing it to:

<div class="px-4">
    <div class="my-4"></div>
</div>

May save you a headache in the future.

Use inset

When positioning an element using position: absolute or position: fixed and expanding it to fill its parent, its very common to see something like:

<div class="absolute top-0 bottom-0 left-0 right-0"></div>

A shorthand for setting each directional anchor is using inset:

<div class="absolute inset-0"></div>

This does the exact same thing and saves needless classes!

Responsive grid

Many people still use flex-box for almost all layouts, which can get pretty complex fast. You can use grid to layout the top level responsiveness of key sections/elements in your site, leaving flex-box to deal with the smaller, more manageable elements in isolation.

Here is a simple example of a making a row of 4 divs responsive using only the parent:

<div class="grid sm:grid-cols-2 lg:grid-cols-4">
    <div class="h-24" />
    <div class="h-24" />
    <div class="h-24" />
    <div class="h-24" />
</div>

Using sm: and lg: modifiers (which simply relate to pre-configured media queries) you can elegantly define how many columns should be in this grid row. Larger screen widths (more than 1024px under the hood) will show 4 in a row, smaller screen widths (less than 1024px and larger than 640px) will show 2 rows of 2, and finally anything less than 640px will show all 4 divs top to bottom.

Sometimes you may see a default setting defining 1 column for the smallest screen widths:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">

In this case defining grid grid-cols-1 has the exact same effect as simply defining grid, as its default column setting is 1. This means using grid-cols-1 is pointless and can be removed.

Selecting children from a parent tag using custom selectors

Let's take a look at the previous example:

<div class="grid sm:grid-cols-2 lg:grid-cols-4">
    <div class="h-24" />
    <div class="h-24" />
    <div class="h-24" />
    <div class="h-24" />
</div>

It's using grid which is great, but defining class="h-24" on every child div is cumbersome.

Tailwind CSS 3.1+ to the rescue! If you make sure you are on at least version 3.1, you can do this!

<div class="grid sm:grid-cols-2 lg:grid-cols-4 [&>div]:h-24">
    <div />
    <div />
    <div />
    <div />
</div>

This does the same thing! You can use [] to define a selector and target all children that match to apply a class to them! In this case we used [&>div]. The & denotes the current element that you are defining the class on. The > is used in CSS selectors to denote direct children, and in this case, we needed to target direct div children.

Change elevation on hover

Tailwind makes elevation super easy and provides nice looking shadow classes out of the box.

Elevated elements are great on their own to show key content in cards etc, adding an extra slightly higher elevation to the element on hover: really makes a users experience that bit more engaging:

<div class="grid sm:grid-cols-3 gap-3">
    <div class="h-32 w-32 hover:scale-110 border rounded-md shadow-md hover:shadow-xl transition-all"></div>
    <div class="h-32 w-32 hover:scale-110 border rounded-md shadow-md hover:shadow-xl transition-all"></div>
    <div class="h-32 w-32 hover:scale-110 border rounded-md shadow-md hover:shadow-xl transition-all"></div>
</div>

In this example we have a simple div with border, rounded-md and shadow-md. But as you can see, increasing the elevation using hover:shadow-xl and the size using hover:scale-110 dramatically changes the user experience. And as always, we use transition-all to allow those changes to be animated smoothly instead of changing instantly. 3 classes to drastically improve the user engagement seems worth it to me!

NOTE: Always try to change the size of an element with it's elevation. It's just common sense that if the elevation increases and makes an element look like it's further away from the page, that it would also appear larger to the user!

Honourable mention

Although this goes beyond a general tip and is more of a fully-fledged pattern, I thought I would share this with you as I find my self using it again and again!

Elegantly responsive modal / overlay

Below is an example of a containing div that represents an overlay, with child div that is responsively centred and even becomes scrollable if there is not enough space to show all of it's content!

This example also uses backdrop-blur-sm to blur the pages content if the browser supports it, bringing even more focus to the modals content 👍

<div class="fixed inset-0 bg-[rgba(0,0,0,0.4)] backdrop-blur-sm">
      <div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100%_-_30px)] max-w-lg max-h-[calc(100%_-_30px)] overflow-y-auto rounded bg-white p-4">
            <p class="h-64">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
      </div>
</div>

Conclusion

That's it! I hope this article helped you in some way when using Tailwind CSS, and please let me know if there is anything you would like me to add, especially if it can be done better! 👍

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!