mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
42 lines
1.1 KiB
Markdown
42 lines
1.1 KiB
Markdown
---
|
|
extends: _layouts.markdown
|
|
title: "Shadows"
|
|
---
|
|
|
|
# Shadows
|
|
|
|
<div class="subnav">
|
|
<a class="subnav-link" href="#usage">Usage</a>
|
|
<a class="subnav-link" href="#responsive">Responsive</a>
|
|
<a class="subnav-link" href="#customizing">Customizing</a>
|
|
</div>
|
|
|
|
## Usage
|
|
|
|
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-inner">.shadow-inner</div>
|
|
<div class="mr-3 p-4 shadow-1">.shadow-1</div>
|
|
<div class="mr-3 p-4 shadow-2">.shadow-2</div>
|
|
<div class="mr-3 p-4 shadow-3">.shadow-3</div>
|
|
<div class="mr-3 p-4 shadow-4">.shadow-4</div>
|
|
<div class="mr-3 p-4 shadow-5">.shadow-5</div>
|
|
</div>
|
|
|
|
<div>
|
|
</div>
|
|
|
|
```html
|
|
<div class="shadow-inner"></div>
|
|
<div class="shadow-1"></div>
|
|
<div class="shadow-2"></div>
|
|
<div class="shadow-3"></div>
|
|
<div class="shadow-4"></div>
|
|
<div class="shadow-5"></div>
|
|
```
|
|
|
|
## Responsive
|
|
|
|
## Customizing
|