Conveniently toggle and add Tailwind CSS classes in Chrome DevTools
The one feature of Chrome DevTools I discovered lately is the ability to toggle and add CSS classes in the Elements panel. This is a very handy feature that can help you quickly add and remove Tailwind CSS classes from the selected element.
Now, this feature can be especially useful when you are working on a project that uses Tailwind CSS since there might be a lot of classes to add and remove from the selected element. And this feature can help you do that in a jiffy.
First, Check the following GIF to see how it works.
As you can tell, to use this feature, first, you need to select the element in the Elements panel. And then, you can toggle and add classes by clicking on the “Toggle class” (.cls) button in the “Styles” tab.
It will list all the classes applied to the selected element. You can conveniently toggle and add classes from there.
The only limitation of this feature is you’d only be able to add classes that are already present in the CSS file. So, if you want to add a class that is not present in the CSS file, you’d have to add it manually.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
