· 2 min read
See what's new in Gimli Tailwind 5
Completely rewritten in Svelte, TailwndCSS 4.0 support and more!
The user interface in Gimli Tailwind 5.0 has been completely rebuilt with Svelte, replacing the previous custom Web Component solution. While the old implementation worked, it became difficult to maintain and slowed the development of new features. Creating my own custom framework was a stupid idea to begin with, and I’m glad I no longer need to use it.
I plan to publish a follow-up post detailing the reasons for choosing Svelte and my experience with the framework.
Better support for Tailwind CSS v4.
While the changes in v4 may seem small to framework users, they required significant work for a tool like Gimli Tailwind. A major focus was also on ensuring the extension remains backward
compatible with Tailwind CSS v3 projects. These two updates—the Svelte rewrite and better v4 support—were the primary goals for this release, but several new features also made it in. Feature Highlights
Feature Highlights
Dynamic Arbitrary Values
Gimli Tailwind now supports dynamic arbitrary values—a key feature of Tailwind CSS v4. You can use utilities like grid-cols-15 or mt-123.75px and see the resulting pixel value displayed for quick reference.
Click here to read more about Dynamic utility values and variants
Enhanced Color Picker
Color support has been significantly improved. When searching for color utilities, you will now see a color swatch next to the value. The color picker UI has also been upgraded with a transparency slider and a clear button for a better workflow.
Slash Syntax Support
Support has been added for the convenient slash syntax, used for applying modifiers to properties like font size and line-height (e.g., text-lg/8) or shadows and opacity (e.g., shadow-md/75)
Other minor improvements
- UI Controls for Size: Toggle height, width, and size directly.
- Search Shortcut: Use the right arrow key to send the selected value to the search input.
- gap is now locked by default under the flex section. Since you usually want uniform gaps in flex layouts, we made this the default to save you a click.
- New “Lists” Section: Dedicated UI for list-specific utilities.
- Improved Error Handling: Clear errors without restarting the extension.