archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity
tailwindcss/docs/source/shadows.md
Adam Wathan 0b71c16d21 Hacking on example components and crap
2017-08-18 12:46:57 -04:00

1.3 KiB
Raw Blame History

extends title
_layouts.markdown Shadows

Shadows

Box shadows can be applied using the shadow utilities. By default these are a linear scale, where the lower values represent smaller (shallow) shadows, and higher values represent bigger (deeper) shadows.

.shadow-1
.shadow-2
.shadow-3
<div class="shadow-1"></div>
<div class="shadow-2"></div>
<div class="shadow-3"></div>

div {
  .shadow-1;
  .shadow-2;
  .shadow-3;
}

Customizing shadows

You can customize the shadow utilities using the @shadows variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale. Shadows can be defined with multiple box-shadow values, as illustrated below.

// The default shadows scale
@shadows:
  '1' ~"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
  '2' ~"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
  '3' ~"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
  '4' ~"0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
  '5' ~"0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)",
;