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

Expand box shadow docs

Browse Source
This commit is contained in:
Adam Wathan 2017-10-30 14:05:27 -04:00
parent fefb9c9f20
commit 19945af883
1 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/source/docs/shadows.blade.md
View File

@ -60,21 +60,47 @@ title: "Shadows"
</table>
</div>
Box shadows can be applied using the `.shadow-{size}` utilities. By default these are a size scale, where the smaller sizes represent more shallow shadows, and larger sizes represent deeper shadows. If you use the `.shadow` utility without a suffix, you'll get the default shadow.
## Outer shadow
Use the `.shadow`, `.shadow-md`, or `.shadow-lg` utilities to apply different sized outer box shadows to an element.
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
<div class="mr-3 p-4 bg-smoke-lighter shadow-inner">.shadow-inner</div>
<div class="mr-3 p-4 shadow">.shadow</div>
<div class="mr-3 p-4 shadow-md">.shadow-md</div>
<div class="mr-3 p-4 shadow-lg">.shadow-lg</div>
<div class="p-4 shadow-lg">.shadow-lg</div>
@slot('code')
<div class="shadow-inner"></div>
<div class="shadow"></div>
<div class="shadow-md"></div>
<div class="shadow-lg"></div>
@endslot
@endcomponent
## Inner shadow
Use the `.shadow-inner` utility to apply a subtle inset box shadow to an element.
This can be useful for things like form controls or wells.
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
<div class="p-4 bg-smoke-lighter shadow-inner">.shadow-inner</div>
@slot('code')
<div class="shadow-inner"></div>
@endslot
@endcomponent
## No shadow
Use `.shadow-none` to remove an existing box shadow from an element.
This is most commonly used to remove a shadow that was applied at a smaller breakpoint.
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
<div class="p-4 shadow-none bg-grey-light">.shadow-none</div>
@slot('code')
<div class="shadow-none"></div>
@endslot
@endcomponent
## Responsive
To control the shadow of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above.