If you are new to TailwindCSS, you're probably familiarizing yourself with some of the utility classes and starting to build some awesome stuff. 😉
As you learn about this awesome framework, there may be a few utility classes that you skimmed over. In this tutorial, I want to share with you some awesome utility classes you might have missed.
Space Between
Using the space utility classes, you can easily add equal spacing between your elements instead of using margin.
Here is a quick example of equally spacing a few boxes using margins:
<div class="flex">
<div class="w-20 h-20 bg-black"></div>
<div class="w-20 h-20 bg-black ml-5"></div>
<div class="w-20 h-20 bg-black ml-5"></div>
<div class="w-20 h-20 bg-black ml-5"></div>
</div>
Now, instead of adding the ml-5 to each element (except the first) we could add the class space-x-5 to the parent and it will get displayed the same way, with equally spaced elements:
<div class="flex space-x-5">
<div class="w-20 h-20 bg-black"></div>
<div class="w-20 h-20 bg-black"></div>
<div class="w-20 h-20 bg-black"></div>
<div class="w-20 h-20 bg-black"></div>
</div>
Here is how the output of our code above:
Hooray for spacing utilities 🥳. Be sure to check out my other article I wrote on Tailwind Spacing Utilities here, or you can checkout the spacing utility documentation here.
Dividers
Similar to the way that you can use the spacing utility classes, you can also use the divider classes to add dividers between your elements instead of using borders.
Here is an example of dividing elements using borders:
<div class="flex">
<div class="px-5 border-r border-gray-300">
<div class="w-20 h-20 bg-black"></div>
</div>
<div class="px-5 border-l border-r border-gray-300">
<div class="w-20 h-20 bg-black"></div>
</div>
<div class="px-5 border-l border-gray-300">
<div class="w-20 h-20 bg-black"></div>
</div>
<div class="px-5 border-l-2 border-gray-300">
<div class="w-20 h-20 bg-black"></div>
</div>
</div>
Now, here is the same design using the divider utility classes:
<div class="flex divide-x-2 divide-gray-300">
<div class="px-5">
<div class="w-20 h-20 bg-black"></div>
</div>
<div class="px-5">
<div class="w-20 h-20 bg-black"></div>
</div>
<div class="px-5">
<div class="w-20 h-20 bg-black"></div>
</div>
<div class="px-5">
<div class="w-20 h-20 bg-black"></div>
</div>
</div>
Here is an example of how this will look:
There are 4 different divider utility classes we can use, which are:
Our code looks a lot cleaner, and it's easier to manage if we utilize these awesome divider utility classes 🙌.
Rings
Next are the ring utility classes. Instead of using custom box-shadow values to create rings around elements, we can utilize these classes to display the same output.
Here is an example of adding a ring around an element using box-shadows (notice we need to add some custom CSS):
<style>
.custom-class{
box-shadow: 0px 0px 0px 4px #90bafb;
}
</style>
<div class="custom-class text-sm w-48 py-3 rounded-md font-semibold text-white bg-blue-500 ml-2 mt-2 text-center focus:outline-none ">
Rings Are Awesome
</div>
This will give us the following output:
We can apply the same styles to our element by using the ring utility classes like so:
<div class="ring-4 text-sm w-48 py-3 rounded-md font-semibold text-white bg-blue-500 ml-2 mt-2 text-center focus:outline-none">
Rings Are Awesome
</div>
Here is the output of the code above:
You can see that they both produce the same output; however, utilizing the ring utility classes will make our lives much easier.
There are 5 ring utility classes that we can use to change the appearance of the ring around our elements. These utilities include:
Be sure to use these ring utility classes in your designs to make your buttons or inputs sparkle. ✨
Placeholder Colors
Don't settle for the ordinary gray input placeholder colors, especially if your form inputs are a different color than white. You'll want to leverage the placeholder color and opacity utility classes.
Here is an example of a form with the default placeholder color:
<div class="bg-gray-900 h-screen w-screen">
<input type="text" placeholder="Placeholder Colors!" class="border border-purple-600 rounded-lg px-4 py-2 ml-1 mt-1 bg-purple-600 text-white focus:outline-none">
</div>
This is how the form will look:
As you can see, the default placeholder text color doesn't look that great. Let's change that with by adding placeholder-purple-400 to our input:
<div class="bg-gray-900 h-screen w-screen">
<input type="text" placeholder="Placeholder Colors!" class="border border-purple-600 rounded-lg px-4 py-2 ml-1 mt-1 bg-purple-600 placeholder-purple-400 text-white focus:outline-none">
</div>
As you can see, our input looks much better with a more appropriate placeholder color.
There are 2 placeholder utility classes you can leverage to change the appearance of your element placeholder text, which include:
Make sure to use these placeholder utilities to display your placeholder text in style 👕.
Animations
I wanted to mention animations because... Well, they're fun, and it's a really nice way to add some quick animations to your site.
Here is an example of a simple spinner using the animate-spin utility:
Here is another example of a simple bounce animation by using the animate-bounce utility class:
You can learn more about adding your own custom animations from my previous post on TailwindCSS Animations, or you can check out the official documentation on TailwindCSS animations here.
Conclusion
Those are just a few hidden gems you may have missed throughout your journey of learning TailwindCSS.
Keep on learning more about this awesome framework because your designs are going to soar ✈️.
Want to get a kick-start on building out some awesome pages using TailwindCSS, be sure to checkout Tails, our TailwindCSS page builder.
Happy Coding ✌️.