Gimli

What Is Gimli?

Gimli is a browser DevTools extension that provides visual tools for front-end developers, offering in-browser editing and live preview of utility CSS classes for both Tailwind and Bootstrap

Features ✨

• Works on any website using Tailwind CSS or Bootstrap

• Instant feedback: preview style changes on hover

• Autocomplete suggestions for class names and CSS properties

• Quick toggling of utility values with Cmd/Ctrl + Click

• Slider control for utility values via Cmd/Ctrl + drag

• Intuitive, customizable UI that groups inputs like official docs

Included Components 📒

• Gimli Tailwind extension for Chrome and Firefox

• Gimli Bootstrap extension for Chrome

• Gimli Playground (coming soon): an online environment for experimenting with CSS utilities

Pros and Cons

Pros ✅

• Universal compatibility across any website framework

• Real-time, in-browser CSS editing without switching context

• Speeds up development with instant previews and autocomplete

• Cross-browser support for Chrome and Firefox DevTools

• Privacy-focused: no user data or history is collected

Cons ⚠️

• No support for custom Tailwind configurations

• Currently limited to Tailwind CSS and Bootstrap frameworks

• Some newer utilities like size-* aren’t directly visible, requiring autocomplete

• Changes aren’t synced back to source code or editor integrations

Integration

• Integrates seamlessly into Chrome DevTools panel

• Available in Firefox Developer Tools as a sidebar panel

• Works alongside React, Vue, Angular apps in-browser

• Can be used with any static or dynamic site using supported CSS classes