Tailwind Trick You Probably Didn’t Know Existed!
Tailwind has more potential than you have been thinking of; you just don’t know how to use it to its full potential.
Tailwind CSS has recently become so popular that there’s not a single web developer right now who hasn’t used this amazing CSS framework in their projects.
Due to the frequent updates, there are some new features of which you might not be aware, and perhaps you're thinking of Tailwind as it’s not capable of doing so.
So let’s see one of the most vital features of Tailwind that you probably didn’t know about...
Peer and Group Utility Classes
If you’ve ever used Tailwindcss in your projects, I’m sure that you’ve used the hover: utility class, which allows you to change the style of the element by hovering over it.
What if we could change the style of an element based on another element? For instance, when hovering over the parent element, the colors of the child element must be changed.
This is where the peer: and group: utility classes step in to help us with that.
1. Group
Let’s change the color of the child paragraph by hovering over the parent element. To do so, we just need the group: utility class:
2. Peer
You can also change the styles of the sibling element by hovering over another element; for doing so, we need the peer utility class.
Let’s add another sibling element to our existing element and change the background color of it by hovering over another element:
Making your `peer` and `group` unique
It’s vital to choose names for your groups and peers to distinguish them from other group elements; moreover, if you don’t choose a specific name for your utility classes, it’ll crash your project.
Exclusive for My Blog Readers!
Are you always on the lookout for the latest tips and tricks in web development? Look no further! Sign up for my weekly newsletter, where I share short trending articles about web development tips and FREE tools and resources that are currently trending. Plus, I’ll throw in some exclusive content that you won’t find anywhere else! Subscribe now and join the community of web developers who are always one step ahead.
Get ahead in web development with our weekly newsletter. Join now!
Here is how you can add names to them:
you can do the same thing to choose a name for the peer utility class.
That’s it for this article. I hope you enjoyed it and learned something new from it.
Don’t forget to share it with the community, too, so they can also benefit from this context.
Don’t forget to subscribe to my exclusive newsletter just for My Blog readers: 👇
— You can follow me on Twitter as well, where I’ll share short and incredible stuffs out there, so don’t miss those. 🚀
