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

Add shadows documentation.

Browse Source
This commit is contained in:
Jonathan Reinink 2017-08-15 08:37:00 -04:00
parent 3e7817dfa9
commit f3b1980d8d
3 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/source/_assets/less/main.less
View File

@ -19,6 +19,19 @@ a {
}
}
@spacing-scale:
'px' 1px,
'0' 0,
'1' 0.25rem,
'2' 0.5rem,
'3' 0.75rem,
'4' 1rem,
'6' 1.5rem,
'8' 2rem,
'12' 3rem,
'16' 4rem,
;
@text-colors:
'light' @text-light,
'light-soft' @text-light-soft,

1
docs/source/_layouts/master.blade.php
View File

@ -45,6 +45,7 @@
<li><a class="{{ $page->getUrl() === '/grid' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
<li><a class="{{ $page->getUrl() === '/images' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
<li><a class="{{ $page->getUrl() === '/position' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
<li><a class="{{ $page->getUrl() === '/shadows' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/shadows">Shadows</a></li>
<li><a class="{{ $page->getUrl() === '/spacing' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
<li><a class="{{ $page->getUrl() === '/text' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
<li><a class="{{ $page->getUrl() === '/z-index' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>

43
docs/source/shadows.md Normal file
View File

@ -0,0 +1,43 @@
---
extends: _layouts.master
title: "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.
<div class="flex text-sm my-6">
<div class="mr-3 p-4 shadow-1">.shadow-1</div>
<div class="mr-3 p-4 shadow-2">.shadow-2</div>
<div class="p-4 shadow-3">.shadow-3</div>
</div>
```html
<div class="shadow-1"></div>
<div class="shadow-2"></div>
<div class="shadow-3"></div>
```
```less
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.
```less
// 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)",
;
```