Utilities
Effects
Box shadows, opacity and blend modes.
34classes
120variant classes
3properties
Live example
<div class="flex flex-wrap gap-5">
<div class="size-20 rounded-xl bg-surface shadow-sm grid place-items-center text-xs">sm</div>
<div class="size-20 rounded-xl bg-surface shadow-lg grid place-items-center text-xs">lg</div>
<div class="size-20 rounded-xl bg-surface shadow-2xl grid place-items-center text-xs">2xl</div>
<div class="size-20 rounded-xl bg-primary opacity-50 grid place-items-center text-xs text-primary-foreground">50%</div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example hover:shadow-2xs. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | hover:active:disabled: | 26 |
| Group and peer | group-hover:peer-checked: | 26 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | not generated | 0 |
Box shadow 10
Variants: hover:active:group-hover:peer-checked:
| Class | CSS |
|---|---|
shadow-2xs | --m-shadow: 0 1px var(--m-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
shadow-xs | --m-shadow: 0 1px 2px 0 var(--m-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
shadow-sm | --m-shadow: 0 1px 3px 0 var(--m-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--m-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
shadow | --m-shadow: 0 1px 3px 0 var(--m-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--m-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
shadow-md | --m-shadow: 0 4px 6px -1px var(--m-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--m-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
shadow-lg | --m-shadow: 0 10px 15px -3px var(--m-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--m-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
shadow-xl | --m-shadow: 0 20px 25px -5px var(--m-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--m-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
shadow-2xl | --m-shadow: 0 25px 50px -12px var(--m-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
shadow-inner | --m-shadow: inset 0 2px 4px 0 var(--m-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
shadow-none | --m-shadow: 0 0 #0000; box-shadow: var(--m-ring-offset-shadow), var(--m-ring-shadow), var(--m-shadow); |
Opacity 16
Variants: hover:active:disabled:group-hover:peer-checked:
| Class | CSS |
|---|---|
opacity-0 | opacity: 0; |
opacity-5 | opacity: 0.05; |
opacity-10 | opacity: 0.1; |
opacity-15 | opacity: 0.15; |
opacity-20 | opacity: 0.2; |
opacity-25 | opacity: 0.25; |
opacity-30 | opacity: 0.3; |
opacity-40 | opacity: 0.4; |
opacity-50 | opacity: 0.5; |
opacity-60 | opacity: 0.6; |
opacity-70 | opacity: 0.7; |
opacity-75 | opacity: 0.75; |
opacity-80 | opacity: 0.8; |
opacity-90 | opacity: 0.9; |
opacity-95 | opacity: 0.95; |
opacity-100 | opacity: 1; |
Mix blend mode 8
Variants: none
| Class | CSS |
|---|---|
mix-blend-normal | mix-blend-mode: normal; |
mix-blend-multiply | mix-blend-mode: multiply; |
mix-blend-screen | mix-blend-mode: screen; |
mix-blend-overlay | mix-blend-mode: overlay; |
mix-blend-darken | mix-blend-mode: darken; |
mix-blend-lighten | mix-blend-mode: lighten; |
mix-blend-difference | mix-blend-mode: difference; |
mix-blend-luminosity | mix-blend-mode: luminosity; |