Shadow

Tailwind CSSには要素に影を付けるためのユーティリティクラスが用意されています。この記事では、Tailwind CSSで要素に影をつける方法をご紹介します。

.shadow

Tailwind CSSで影をつけるには、shadowクラスを指定します。

<div class="shadow">.shadow</div>
.shadow

.shadow-md

<div class="shadow-md">.shadow-md</div>
.shadow-md

.shadow-lg

<div class="shadow-lg">.shadow-lg</div>
.shadow-lg

.shadow-xl

<div class="shadow-xl">.shadow-xl</div>
.shadow-xl

.shadow-2xl

<div class="shadow-2xl">.shadow-2xl</div>
.shadow-2xl

.shadow-inner

<div class="shadow-inner">.shadow-inner</div>
.shadow-inner

.shadow-outline

<div class="shadow-outline">.shadow-outline</div>
.shadow-outline

.shadow-none

<div class="shadow-none">.shadow-none</div>
.shadow-none