Type a utility to see its CSS, or type CSS declarations to find the utility that
produces them. Arbitrary values, such as p-[16px], resolve to their canonical
spelling. The URL keeps your input, so you can share the results.
Enable JavaScript to look up other utilities. The results show an example.
p-4
& {
padding: calc(var(--spacing) * 4) /* 1rem = 16px */;
}
Read the results
Each result shows one utility and its declarations. & stands for the styled
element. Comments show the resolved theme values and pixel sizes. A result for
CSS declarations names the declaration that it comes from.
The results leave out the theme variables and other supporting CSS that the full stylesheet contains. The macro reference shows complete generated stylesheets.
A declaration without a matching utility becomes an arbitrary property, such as
[hyphens:manual]. Variants and shorthand properties can change what a utility
does, so compare its declarations with your CSS before you replace it.
What the lookup covers
The lookup runs the Stillwind compiler in your browser with the default theme.
It downloads the compiler when the page opens. Utilities from your own @theme
tokens, such as bg-brand, do not resolve here. See
Design systems to add them, and hover over a
utility in the editor to check it in your project.
The editor and the CLI report non-canonical spellings with prefer-canonical-utilities.