Other elements
The name is the honest one. These dimensions have nothing in common except that a reader is unlikely to arrive looking for the category — they arrive holding a name, and this is where the names that are not colour and not type live.
size
44 tokens — 16 house, 14 inert, 14 vendor.
No drawing: a length is drawn at its own value, and these run to 80rem — wider than the column that would hold them, so every one of them clamps to the same bar.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--container-2xl | 42rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-2xs | 18rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-3xl | 48rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-3xs | 16rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-4xl | 56rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-5xl | 64rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-6xl | 72rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-7xl | 80rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-lg | 32rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-md | 28rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-sm | 24rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-xl | 36rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--container-xs | 20rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--header-height | 40px | same | house | declared directly (variables.css:76) |
--height-vh | 100vh | same | inert | declared directly (tailwind-theme.css:447) |
--heroku-height | 32px | same | house | declared directly (variables.css:77) |
--inset--16 | -4rem | same | inert | declared directly (tailwind-theme.css:471) |
--inset--30px | -30px | same | inert | declared directly (tailwind-theme.css:474) |
--inset-full | 100% | same | house | declared directly (tailwind-theme.css:472) |
--inset-half | 50% | same | house | declared directly (tailwind-theme.css:473) |
--max-height-128 | 32rem | same | inert | declared directly (tailwind-theme.css:454) |
--max-height-192 | 48rem | same | inert | declared directly (tailwind-theme.css:455) |
--max-height-256 | 64rem | same | inert | declared directly (tailwind-theme.css:456) |
--max-height-32 | 8rem | same | house | declared directly (tailwind-theme.css:450) |
--max-height-40 | 10rem | same | inert | declared directly (tailwind-theme.css:451) |
--max-height-52 | 13rem | same | house | declared directly (tailwind-theme.css:452) |
--max-height-96 | 24rem | same | house | declared directly (tailwind-theme.css:453) |
--max-width-7xl | 80rem | same | inert | declared directly (tailwind-theme.css:459) |
--max-width-8xl | 90rem | same | house | declared directly (tailwind-theme.css:460) |
--max-width-prose | 65ch | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--min-width-1 | 0.25rem | same | house | declared directly (tailwind-theme.css:463) |
--min-width-2 | 0.5rem | same | inert | declared directly (tailwind-theme.css:464) |
--min-width-64 | 16rem | same | house | declared directly (tailwind-theme.css:465) |
--nav-width | 256px | same | house | declared directly (variables.css:78) |
--sidebar-collapsed-width | 66px | same | house | declared directly (variables.css:79) |
--uber-nav-width | 60px | same | house | declared directly (variables.css:80) |
--width-128 | 32rem | same | house | declared directly (tailwind-theme.css:442) |
--width-192 | 48rem | same | inert | declared directly (tailwind-theme.css:443) |
--width-256 | 64rem | same | house | declared directly (tailwind-theme.css:444) |
--width-52 | 13rem | same | inert | declared directly (tailwind-theme.css:440) |
--width-96 | 24rem | same | house | declared directly (tailwind-theme.css:441) |
--width-max-content | max-content | same | inert | declared directly (tailwind-theme.css:437) |
--width-min-content | min-content | same | inert | declared directly (tailwind-theme.css:438) |
--width-vw | 100vw | same | inert | declared directly (tailwind-theme.css:439) |
shadow
31 tokens — 11 house, 1 inert, 19 vendor.
No drawing: a shadow is painted outside the box that casts it, so at any size that fits in a list the drawing is mostly the part that got clipped.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--box-shadow | 0 1px 3px 0 rgba(26, 26, 26, 0.1), 0 1px 2px 0 rgba(26, 26, 26, 0.06) | 0 2px 5px 0 rgba(5, 5, 5, 0.5), 0 1px 3px 0 rgba(5, 5, 5, 0.4) | house | light: declared directly (theme-tokens.css:17) dark: declared directly (theme-tokens.css:75) |
--box-shadow-inner | inset 0 2px 4px 0 rgba(26, 26, 26, 0.06) | inset 0 2px 5px 0 rgba(5, 5, 5, 0.4) | house | light: declared directly (theme-tokens.css:20) dark: declared directly (theme-tokens.css:78) |
--box-shadow-lg | 0 4px 8px -3px rgba(26, 26, 26, 0.1), 0 3px 6px -2px rgba(26, 26, 26, 0.05) | 0 8px 18px -3px rgba(5, 5, 5, 0.6), 0 4px 10px -2px rgba(5, 5, 5, 0.5) | house | light: declared directly (theme-tokens.css:19) dark: declared directly (theme-tokens.css:77) |
--box-shadow-md | 0 3px 6px -1px rgba(26, 26, 26, 0.1), 0 2px 4px -1px rgba(26, 26, 26, 0.06) | 0 4px 10px -1px rgba(5, 5, 5, 0.5), 0 2px 6px -1px rgba(5, 5, 5, 0.4) | house | light: declared directly (theme-tokens.css:18) dark: declared directly (theme-tokens.css:76) |
--box-shadow-sm | 0 1px 2px 0 rgba(26, 26, 26, 0.05) | 0 1px 3px 0 rgba(5, 5, 5, 0.35) | house | light: declared directly (theme-tokens.css:16) dark: declared directly (theme-tokens.css:74) |
--drop-shadow | 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--drop-shadow-2xl | 0 25px 25px rgb(0 0 0 / 0.15) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--drop-shadow-lg | 0 4px 4px rgb(0 0 0 / 0.15) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--drop-shadow-md | 0 3px 3px rgb(0 0 0 / 0.12) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--drop-shadow-sm | 0 1px 2px rgb(0 0 0 / 0.15) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--drop-shadow-xl | 0 9px 7px rgb(0 0 0 / 0.1) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--drop-shadow-xs | 0 1px 1px rgb(0 0 0 / 0.05) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--inset-shadow-2xs | inset 0 1px rgb(0 0 0 / 0.05) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--inset-shadow-sm | inset 0 2px 4px rgb(0 0 0 / 0.05) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--inset-shadow-xs | inset 0 1px 1px rgb(0 0 0 / 0.05) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--shadow | 0 1px 3px 0 rgba(26, 26, 26, 0.1), 0 1px 2px 0 rgba(26, 26, 26, 0.06) | 0 2px 5px 0 rgba(5, 5, 5, 0.5), 0 1px 3px 0 rgba(5, 5, 5, 0.4) | house | --box-shadow |
--shadow-2xl | 0 25px 50px -12px rgb(0 0 0 / 0.25) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--shadow-2xs | 0 1px rgb(0 0 0 / 0.05) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--shadow-focus | 0 0 0 3px rgba(66, 153, 225, 0.5) | same | inert | declared directly (tailwind-theme.css:244) |
--shadow-inner | inset 0 2px 4px 0 rgba(26, 26, 26, 0.06) | inset 0 2px 5px 0 rgba(5, 5, 5, 0.4) | house | --box-shadow-inner |
--shadow-lg | 0 4px 8px -3px rgba(26, 26, 26, 0.1), 0 3px 6px -2px rgba(26, 26, 26, 0.05) | 0 8px 18px -3px rgba(5, 5, 5, 0.6), 0 4px 10px -2px rgba(5, 5, 5, 0.5) | house | --box-shadow-lg |
--shadow-md | 0 3px 6px -1px rgba(26, 26, 26, 0.1), 0 2px 4px -1px rgba(26, 26, 26, 0.06) | 0 4px 10px -1px rgba(5, 5, 5, 0.5), 0 2px 6px -1px rgba(5, 5, 5, 0.4) | house | --box-shadow-md |
--shadow-outline | 0 0 0 3px rgba(66, 153, 225, 0.5) | same | house | declared directly (tailwind-theme.css:243) |
--shadow-sm | 0 1px 2px 0 rgba(26, 26, 26, 0.05) | 0 1px 3px 0 rgba(5, 5, 5, 0.35) | house | --box-shadow-sm |
--shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--shadow-xs | 0 1px 2px 0 rgb(0 0 0 / 0.05) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--text-shadow-2xs | 0px 1px 0px rgb(0 0 0 / 0.15) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--text-shadow-lg | 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--text-shadow-md | 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--text-shadow-sm | 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--text-shadow-xs | 0px 1px 1px rgb(0 0 0 / 0.2) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
radius
10 tokens — 1 house, 9 vendor.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--br | 3px | same | house | declared directly (variables.css:74) |
--radius | 0.25rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--radius-2xl | 1rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--radius-3xl | 1.5rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--radius-4xl | 2rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--radius-lg | 0.5rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--radius-md | 0.375rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--radius-sm | 0.25rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--radius-xl | 0.75rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--radius-xs | 0.125rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
filter
8 tokens — 8 vendor.
No drawing: a filter needs an image beneath it.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--blur | 8px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--blur-2xl | 40px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--blur-3xl | 64px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--blur-lg | 16px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--blur-md | 12px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--blur-sm | 8px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--blur-xl | 24px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--blur-xs | 4px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
framework-default
8 tokens — 8 vendor.
No drawing: these are values of many different kinds at once, with no one appearance between them.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--default-font-family | --theme(--font-sans, initial) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--default-font-feature-settings | --theme(--font-sans--font-feature-settings, initial) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--default-font-variation-settings | --theme(--font-sans--font-variation-settings, initial) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--default-mono-font-family | --theme(--font-mono, initial) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--default-mono-font-feature-settings | --theme(--font-mono--font-feature-settings, initial) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--default-mono-font-variation-settings | --theme(--font-mono--font-variation-settings, initial) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--default-transition-duration | 150ms | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--default-transition-timing-function | cubic-bezier(0.4, 0, 0.2, 1) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
transform
6 tokens — 6 inert.
No drawing: a transform needs something to transform.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--rotate--1 | -1deg | same | inert | declared directly (tailwind-theme.css:429) |
--rotate--2 | -2deg | same | inert | declared directly (tailwind-theme.css:430) |
--rotate--3 | -3deg | same | inert | declared directly (tailwind-theme.css:431) |
--rotate-1 | 1deg | same | inert | declared directly (tailwind-theme.css:426) |
--rotate-2 | 2deg | same | inert | declared directly (tailwind-theme.css:427) |
--rotate-3 | 3deg | same | inert | declared directly (tailwind-theme.css:428) |
breakpoint
5 tokens — 1 house, 4 vendor.
No drawing: a breakpoint is a condition on the viewport, not a value you can look at.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--breakpoint-2xl | 1440px | same | house | declared directly (tailwind-theme.css:423) |
--breakpoint-lg | 64rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--breakpoint-md | 48rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--breakpoint-sm | 40rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--breakpoint-xl | 80rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
perspective
5 tokens — 5 vendor.
No drawing: perspective only exists relative to a 3D scene.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--perspective-distant | 1200px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--perspective-dramatic | 100px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--perspective-midrange | 800px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--perspective-near | 300px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--perspective-normal | 500px | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
animation
4 tokens — 4 vendor.
No drawing: an animation is motion, and this page does not move.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--animate-bounce | bounce 1s infinite | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--animate-ping | ping 1s cubic-bezier(0, 0, 0.2, 1) infinite | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--animate-pulse | pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--animate-spin | spin 1s linear infinite | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
spacing
4 tokens — 2 house, 1 inert, 1 vendor.
--padding20px--spacing0.25rem--spacing-10025rem--spacing-8020rem
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--padding | 20px | same | house | declared directly (variables.css:75) |
--spacing | 0.25rem | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--spacing-100 | 25rem | same | inert | declared directly (tailwind-theme.css:420) |
--spacing-80 | 20rem | same | house | declared directly (tailwind-theme.css:419) |
border-width
3 tokens — 2 house, 1 inert.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--border-width | 1px | same | inert | declared directly (tailwind-theme.css:233) |
--border-width-2 | 2px | same | house | declared directly (tailwind-theme.css:234) |
--border-width-4 | 4px | same | house | declared directly (tailwind-theme.css:235) |
easing
3 tokens — 3 vendor.
No drawing: an easing curve is motion, and this page does not move.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--ease-in | cubic-bezier(0.4, 0, 1, 1) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
--ease-out | cubic-bezier(0, 0, 0.2, 1) | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
aspect
1 tokens — 1 vendor.
No drawing: an aspect ratio describes a box you have not chosen the size of.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--aspect-video | 16 / 9 | same | vendor | declared directly (tailwindcss@4.3.3/theme.css) |
opacity
1 tokens — 1 inert.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--background-opacity-90 | 0.9 | same | inert | declared directly (tailwind-theme.css:477) |
z-index
1 tokens — 1 inert.
No drawing: stacking order has no appearance of its own.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--z-index--10 | -10 | same | inert | declared directly (tailwind-theme.css:434) |