DEV Community

Cover image for Gimli Tailwind 4 is out - the most popular DevTools extension for Tailwind CSS developers
Gimli
Gimli

Posted on

Gimli Tailwind 4 is out - the most popular DevTools extension for Tailwind CSS developers

It’s been almost a year since 3.0 was released. Today I’m happy to announce that Gimli Tailwind 4.0 is finally released.

If you are a Tailwind CSS user and haven’t used Gimli Tailwind yet, get it here. You may also want to look at this short introduction:

What’s new
Autocompletion — with CSS property name support!

I personally really like this feature. It’s nice to be able to use the keyboard and not be completely reliant on the UI.

Values within the same utility group will automatically be replaced. For example, if you have the classes: “grid m-10 pt-2”, then add “m-2” using the autocomplete input. The result will be: “grid m-2 pt-2”.

Another useful feature is that the autocomplete does not only work for utility classes. Let’s say you want to change the line-height. But you are new to Tailwind and do not know what those values are called. Then you can search for the CSS property name: “line-height”, and press enter, and now all line-height utilities are shown (leading-1,leading-2, and so on)

Image description

Quickly Copy all class names -button.

This was the first feature request I got. I just wasn’t sure where to put it in the UI until now.

New utilities

Tailwind 3.4 added many new utilities which are now also added in Gimli Tailwind. The size-* utilities are not shown in the UI but adding them using the new autocomplete feature works!

Updated UI

Devtools itself changed its colors a while back. Gimli Tailwind has been updated to use the same colors.

The 2xl variant has been added.

Bug fixes and other minor improvements.

As always, many minor bugs have been fixed and I’m sure some have been added too. If you find any bugs or have any other feedback. Please let me know.

Follow Gimli Tailwind here: Twitter/X Medium

Top comments (0)