Tailwind CSS 상자 그림자 예제

이 섹션에서는 tailwind css에서 상자 그림자를 사용하는 방법을 살펴보겠습니다. 그림자 크기, 사용자 정의 그림자, tailwind 그림자 크기, 그림자 버튼, Tailwind CSS 3의 그림자 예제가 있는 카드를 볼 수 있습니다.
view

예 1

Tailwind 섀도우 유틸리티 크기는 shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl 또는 shadow-2xl 입니다.

<div class="p-6 shadow-md">Shadow-md</div>
<div class="p-6 shadow-lg">Shadow-lg</div>
<div class="p-6 shadow-xl">Shadow-xl</div>
<div class="p-6 shadow-2xl">Shadow-2xl</div>

그림자 내부 상자를 적용하기 위한 tailwind .shadow-inner 클래스입니다.

<div class="p-6 shadow-inner">shadow-inner</div>

.shadow-none 그림자 효과를 제거하는 데 사용합니다.

<div class="p-6 shadow-none">shadow-none</div>

예 2

호버 클래스와 함께 그림자를 사용하는 뒷바람.

<div class="p-6 shadow hover:shadow-lg">Shadow hover</div>

그림자 효과가 있는 Tailwind CSS 그림자 버튼.

<button class="px-6 py-2 rounded shadow bg-rose-400 hover:shadow-lg text-rose-100">Button</button>

예 3

반응형 그림자 상자 사용.

<div class="p-6 shadow lg:shadow-lg md:shadow-md">Responsive Shadow</div>

Tailwind CSS 맞춤 그림자 임의 값

<div class="p-6 shadow-[0px_0px_3px_rgba(3,102,214,0.3)]">Custom Shadow</div>
<div class="p-6 shadow-[0px_22px_70px_4px_rgba(0,0,0,0.56)]">Custom Shadow</div>

그림자가 있는 Tailwind CSS 카드.

<div class="w-full p-6 bg-white border border-gray-200 rounded-lg shadow-md lg:max-w-md">
    <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Tailwind CSS Card with Shadow</h2>
    <p class="mb-3 font-normal text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quasi
        autem accusamus odio minima fugiat, consectetur recusandae assumenda.</p>
    <a href="#"
        class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:outline-none">
        Read more
    </a>
</div>