Shadows
Shadows foundation is used for box-shadow and drop-shadow
Size
token-nametailwind-class-name
Shadow
X axisY axisBlurSpread
ColorOpacity
Small (sm)shadow.smshadow-sm
Shadow
X 0Y 1B 2S 0
$gray.1005%
Shadow
X 0Y 1B 3S 0
$gray.10010%
Medium (md)shadow.mdshadow-md
Shadow
X 0Y 2B 4S 0
$gray.1005%
Shadow
X 0Y 4B 6S -1
$gray.10010%
Large (lg)shadow.lgshadow-lg
Shadow
X 0Y 4B 6S 0
$gray.1005%
Shadow
X 0Y 10B 15S -3
$gray.10010%
XLarge (xl)shadow.xlshadow-xl
Shadow
X 0Y 16B 25S -2
$gray.10010%
Shadow
X 0Y 8B 10S -2
$gray.10010%
2XLarge (2xl)shadow.2xlshadow-2xl
Shadow
X 0Y 20B 40S -8
$gray.10025%
Large (top)shadow.lg-topshadow-lg-top
Shadow
X 0Y -4B 6S 0
$gray.1005%
Shadow
X 0Y -10B 15S -3
$gray.10010%
lg On Emphasisshadow.lg-on-emphasisshadow-lg-on-emphasis
Shadow
X 0Y 4B 6S -2
$gray.10015%
Shadow
X 0Y 10B 15S -3
$gray.10035%
lg OE Darkershadow.lg-on-emphasis-darkershadow-lg-on-emphasis-darker
Shadow
X 0Y 4B 6S -2
$base.black65%
Shadow
X 0Y 10B 15S -3
$base.black85%
Colors
Shadow with roles color just available in large size.
Large (accent)shadow.lg-accentshadow-lg-accent
Shadow
X 0Y 4B 6S -2
$blue.105%
Shadow
X 0Y 10B 15S -3
$blue.1010%
Large (success)shadow.lg-successshadow-lg-success
Shadow
X 0Y 4B 6S -2
$green.105%
Shadow
X 0Y 10B 15S -3
$green.1010%
Large (warning)shadow.lg-warningshadow-lg-warning
Shadow
X 0Y 4B 6S -2
$orange.405%
Shadow
X 0Y 10B 15S -3
$orange.405%
Large (danger)shadow.lg-dangershadow-lg-danger
Shadow
X 0Y 4B 6S -2
$red.105%
Shadow
X 0Y 10B 15S -3
$red.1010%