DEV Community

Tony Lea
Tony Lea

Posted on • Originally published at devdojo.com on

TailwindCSS Hidden Gems 💎

TailwindCSS Hidden Gems

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Here is an example of how this will look:

There are 4 different divider utility classes we can use, which are:

  1. Divide Width
  2. Divide Color
  3. Divide Opacity
  4. Divide Style

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Ring Width
  2. Ring Color
  3. Ring Opacity
  4. Ring Offset Width
  5. Ring Offset Color

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Placeholder Color
  2. Placeholder Opacity

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 ✌️.

Top comments (1)

Collapse
 
davboy profile image
Daithi O’Baoill

Cheers, thanks 👍