TailwindCSS Hidden Gems 💎
Tags: css, tailwindcss
Published: 2021-03-11 02:31:25

---
title: TailwindCSS Hidden Gems 💎
published: true
date: 2021-03-10 23:30:15 UTC
tags: css,tailwindcss,tailwind
featured-image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wvekk7s94snhgpquchz.jpg
canonical_url: https://devdojo.com/tnylea/tailwindcss-hidden-gems
---

![TailwindCSS Hidden Gems](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wvekk7s94snhgpquchz.jpg)

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:

{% codepen https://codepen.io/devdojo/pen/vYyvLrB %}

Hooray for spacing utilities 🥳. Be sure to check out my other article I wrote on [Tailwind Spacing Utilities here](https://devdojo.com/tnylea/tailwindcss-space-classes), or you can checkout the [spacing utility documentation here](https://tailwindcss.com/docs/space).

# 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:

{% codepen https://codepen.io/devdojo/pen/YzpdwMP %}

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

1. [Divide Width](https://tailwindcss.com/docs/divide-width)
2. [Divide Color](https://tailwindcss.com/docs/divide-color)
3. [Divide Opacity](https://tailwindcss.com/docs/divide-opacity)
4. [Divide Style](https://tailwindcss.com/docs/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>
```

This will give us the following output:

{% codepen https://codepen.io/devdojo/pen/OJbrNZz %}

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:

{% codepen https://codepen.io/devdojo/pen/yLVGOxw %}

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](https://tailwindcss.com/docs/ring-width)
2. [Ring Color](https://tailwindcss.com/docs/ring-color)
3. [Ring Opacity](https://tailwindcss.com/docs/ring-opacity)
4. [Ring Offset Width](https://tailwindcss.com/docs/ring-offset-width)
5. [Ring Offset Color](https://tailwindcss.com/docs/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>
```

This is how the form will look:

{% codepen https://codepen.io/devdojo/pen/JjbwXwX %}

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.

{% codepen https://codepen.io/devdojo/pen/OJbrNdv %}

There are 2 **placeholder** utility classes you can leverage to change the appearance of your element placeholder text, which include:

1. [Placeholder Color](https://tailwindcss.com/docs/placeholder-color)
2. [Placeholder Opacity](https://tailwindcss.com/docs/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:

{% codepen https://codepen.io/devdojo/pen/dyOwMxW %}

Here is another example of a simple bounce animation by using the `animate-bounce` utility class:

{% codepen https://codepen.io/devdojo/pen/vYyvKBe %}

You can learn more about adding your own custom animations from my previous post on [TailwindCSS Animations](https://devdojo.com/tnylea/tailwindcss-animations), or you can check out the [official documentation on TailwindCSS animations here](https://tailwindcss.com/docs/animation).

# 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](https://devdojo.com/tails).

Happy Coding ✌️.