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>
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>
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>
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>
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>
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:
- Group-even
- Group-odd
- Group-focus
- Group-active
- Group-target
- Group-checked
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 moreLeave a Reply
Your email address will not be published.
Required fields are marked*
Comment *
Name*
Email*