Top Tailwind Classes You Don't Know About

Top Tailwind Classes You Don't Know About

March 12, 2024

Here are some tailwind css classes that goes beyond mapping directly to CSS

Software Dev

Tell us how many you knew before this article in the comment section

Introduction

If you're reading this, you definitely know TailwindCss. However, do you know they're Tailwind CSS classes that adds more feature than just a single feature in css ? Here's a list of some I know of:

Sizes

Have you ever built a component that has same width and height? With sizes, you don't have to set both.

Use case
<div class="size-20 bg-orange-100 rounded-lg my-4">
</div>
blog content

Divide

This utility allows you to control the border width between elements. You can set Divide for both the x and y axis. You can also make it solid , dotted , sliced and everything you can do to borders.

Use case
<div class=" divide-y-4 divide-x-8 divide-orange-500">
<div class="bg-red-500 size-20 m-4 rounded-xl"></div>
<div class="bg-red-500 size-20 m-4 rounded-xl"></div>
<div class="bg-red-500 size-20 m-4 rounded-xl"></div>
<div class="bg-red-500 size-20 m-4 rounded-xl"></div>
</div>
blog content

Line Clamp

Utilities for clamping text to a specific number of lines.

Use case
<p class="px-4 line-clamp-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed odit fugiat
iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium
nemo autem. Veritatisobcaecati tenetur iure eius earum ut molestias architecto voluptate aliquamnihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed

quibusdamrecusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maximedoloremque. Quaerat provident commodi consectetur veniam similique
ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat.
</p>
blog content
Note: You can use the truncate utility to make your text never go more than one line long.

Gradients

TailwindCss makes it easy to specify where the colors start , their percentages, and even allows you to place a color in between using the via utility. You use the bg-gradient to pick the direction, the from to pick the starting point, via to pick the color in between and to for the last color. You can also set percentages for each of them.

Use case
<div class="h-48 w-full rounded-xl bg-gradient-to-bl from-pink-600 via-purple-700 to-orange-500 from-40%">
</div>
blog content

Screen Readers

Utilities for improving accessibility with screen readers. You can use sr-only for screen readers only and not-sr-only to remove sr-only.

Group

With the group class , you can style children components when their parent is hovered, active, etc.

Use case
<div class="group m-8 size-40 rounded-xl bg-black p-4">
<div class="size-20 rounded-lg bg-orange-500 group-hover:bg-pink-700">
</div>
</div>
blog content

Note: You can name the groups using group/thename and there's a lot you can do with Group apart from hover. Here's a list of the major ones:

Conclusion

To learn more you can check out the Tailwind docs. You can research about Ring, Animation Typography (for markdown) etc. If you have corrections to make to this article, please feel free to express them in the comment.

See more

Kindly share this story:

Leave a Reply

Your email address will not be published.

Required fields are marked*

Comment *

Name*

Email*