6 Tailwind CSS Utilities You Are Probably Not Using

Save time and use everything Tailwind CSS makes available to you

It has been nearly a year since I started to use Tailwind CSS instead of Bootstrap. Sometimes I wonder if in a few months I’ll be able to add only utilities or if I’ll remember how to write CSS code.

Anyway, today I’d like to show you six utilities that I met after a few months of using Tailwind CSS but I would have been grateful if someone had introduced them to me before.

Inset

Utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent. They are useful because they allow you to avoid writing a class for each position, for example, inset-0 will be

top: 0px;
right: 0px;
bottom: 0px;
left: 0px;

Read more here.

Group-hover

This is one of my favourite utilities. It is useful when you need to style a child element when hovering over a specific parent element. You simply need to add group class to the parent element and add the group-hover: prefix to the utility on the child element.

Read more here.

Ring

Utilities to apply solid box-shadow of a specific thickness to an element.

Read more here.

Space Between

This is one of the utilities I use the most and it can save you a lot of time. These utilities used in the parent allow you to control the horizontal and vertical space between children.

Read more here.

Divide

Utilities for controlling the border width between elements. You can use these utilities instead of using <br>, border-bottom , border-top , border-right , border-left to separate elements.

Read more here.

Object Fit

These utilities help to adapt our images to all needs without using the background-image property. They allow you to control how a replaced element’s content should be resized.

Read more here.

I hope I introduced you to some new utilities and saved you time 😃