Tailwind Sail is a quite powerful toolbox for Tailwind that displays the content of class strings or @apply directives in a much more accessible way.

Features

Filter classes by utility, state or breakpoint
Support for class strings and @apply
Preview color and pixel values
Edit or delete classes directly
Hide variant prefixes to focus on class values
Add Tailwind v4 theme files to preview custom colors and overrides

I really appreciate your feedback. Just drop a github issue or send me a dm. And if you're really enjoying it, it would be awesome if you consider to leave a star for the github repo.

Tailwind Sail demo

Add theme files

To show previews for your own palette, spacing, and other theme values, point Tailwind Sail at the CSS file(s) where you define Tailwind v4 theme custom properties.

Open your theme file in the editor (it must be a .css file inside the workspace).
Run Tailwind Sail: Add Current File to Theme Files from the Command Palette, or set the tailwind-sail.variables.sourceFiles array in Settings to one or more workspace-relative paths, for example src/app/globals.css.

Layout settings

Since VS Code and some third-party forks, such as Cursor, handle layouts slightly differently, Tailwind Sail provides consistent layout settings to improve the visual fit. You can adjust the sidebar padding, borders, and the spacing between the panel title and the extension content to match your preferences.

You can find the available settings and commands in the Features tab.