이번에는 Tailwind을 활용한 공간 사이즈, 레이아웃, 그림자를 조절하는 방법에 대해서 소개하고자 한다.
공간 사이즈
tailwind에서는 공간의 크기를 조절하기 위해서는 w(가로), h(세로)를 이용한다. 다음은 공간 사이즈에 조절 하는 방법에 대한 이야기이다.
- 화면에 퍼센티지를 이용하여 나타내고 싶을때는,w-1/2 h-1/3 처럼 표현한다.
- 화면 전체를 사용하기 위해서는 w-screen, h-screen을 사용하며 100% 퍼센티지를 사용하기 위해서는 w-full을 이용한다.
- w-min, w-max 처럼 크기에 대한 최소, 최대의 제약을 설정할 수 있다.
-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Sizing</title>
</head>
<body>
<!-- Width -->
<div class="bg-black text-white my-2 w-0">w-0</div>
<div class="bg-black text-white my-2 w-1">w-1</div>
<div class="bg-black text-white my-2 w-1.5">w-1.5</div>
<div class="bg-black text-white my-2 w-2">w-2</div>
<div class="bg-black text-white my-2 w-3">w-3</div>
<div class="bg-black text-white my-2 w-5">w-5</div>
<div class="bg-black text-white my-2 w-6">w-6</div>
<div class="bg-black text-white my-2 w-7">w-7</div>
<div class="bg-black text-white my-2 w-8">w-8</div>
<div class="bg-black text-white my-2 w-9">w-9</div>
<div class="bg-black text-white my-2 w-10">w-10</div>
<div class="bg-black text-white my-2 w-11">w-11</div>
<div class="bg-black text-white my-2 w-12">w-12</div>
<!-- By 2 -->
<div class="bg-black text-white my-2 w-14">w-14</div>
<div class="bg-black text-white my-2 w-16">w-16</div>
<!-- By 4 -->
<div class="bg-black text-white my-2 w-20">w-20</div>
<div class="bg-black text-white my-2 w-24">w-24</div>
<div class="bg-black text-white my-2 w-28">w-28</div>
<div class="bg-black text-white my-2 w-32">w-32</div>
<div>...</div>
<div class="bg-black text-white my-2 w-36">w-36</div>
<!-- By 8 -->
<div class="bg-black text-white my-2 w-64">w-64</div>
<!-- By 16 -->
<div class="bg-black text-white my-2 w-80">w-80</div>
<div class="bg-black text-white my-2 w-96">w-96</div>
<div class="bg-black text-white my-2 w-auto">Auto</div>
<!-- Percentages -->
<div class="bg-green-500 text-white my-2 w-1/2">w-1/2</div>
<div class="bg-green-500 text-white my-2 w-1/3">w-1/3</div>
<div class="bg-green-500 text-white my-2 w-2/3">w-2/3</div>
<div class="bg-green-500 text-white my-2 w-1/4">w-1/4</div>
<div class="bg-green-500 text-white my-2 w-2/4">w-2/4</div>
<div class="bg-green-500 text-white my-2 w-3/4">w-3/4</div>
<div class="bg-green-500 text-white my-2 w-1/5">w-1/5</div>
<!-- Width of the viewport -->
<div class="bg-purple-500 text-white my-2 w-screen">w-screen</div>
<!-- 100% of container -->
<div class="bg-zinc-500 text-white my-2 w-full">w-full</div>
<!-- min/max content -->
<div class="bg-emerald-500 text-white my-2 w-min">w-min</div>
<div class="bg-emerald-500 text-white my-2 w-max">w-max</div>
<!-- Arbitrary Width -->
<div class="bg-red-500 text-white my-2 w-[300px]">300px</div>
<!-- Max Width -->
<div class="bg-gray-100 max-w-lg mx-auto">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum
perferendis incidunt nihil ullam repellendus praesentium consectetur et
sed distinctio, magni iusto quos repellat officiis cum dolore aliquid
minus esse pariatur.
</div>
<!-- Height (Most of the same options as widths) -->
<div class="flex items-end">
<div class="bg-orange-500 w-20 h-24">h-24</div>
<div class="bg-orange-500 w-20 h-32">h-32</div>
<div class="bg-orange-500 w-20 h-40">h-40</div>
<div class="bg-orange-500 w-20 h-48">h-48</div>
<div class="bg-orange-500 w-20 h-64">h-64</div>
<div class="bg-orange-500 w-20 h-80">h-80</div>
</div>
<!-- Min Height -->
<div class="h-48 bg-red-200">
<div class="h-24 bg-red-600 min-h-full">Tailwind is awesome</div>
</div>
<!-- Max Height -->
<div class="h-24 bg-orange-200">
<div class="h-48 bg-orange-500 max-h-full">Tailwind is awesome</div>
</div>
<!-- Full screen height -->
<div class="h-screen bg-blue-300">Hello</div>
</body>
</html>
<!--
Width Sizes
w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /* 2px */
w-1 width: 0.25rem; /* 4px */
w-1.5 width: 0.375rem; /* 6px */
w-2 width: 0.5rem; /* 8px */
w-2.5 width: 0.625rem; /* 10px */
w-3 width: 0.75rem; /* 12px */
w-3.5 width: 0.875rem; /* 14px */
w-4 width: 1rem; /* 16px */
w-5 width: 1.25rem; /* 20px */
w-6 width: 1.5rem; /* 24px */
w-7 width: 1.75rem; /* 28px */
w-8 width: 2rem; /* 32px */
w-9 width: 2.25rem; /* 36px */
w-10 width: 2.5rem; /* 40px */
w-11 width: 2.75rem; /* 44px */
w-12 width: 3rem; /* 48px */
w-14 width: 3.5rem; /* 56px */
w-16 width: 4rem; /* 64px */
w-20 width: 5rem; /* 80px */
w-24 width: 6rem; /* 96px */
w-28 width: 7rem; /* 112px */
w-32 width: 8rem; /* 128px */
w-36 width: 9rem; /* 144px */
w-40 width: 10rem; /* 160px */
w-44 width: 11rem; /* 176px */
w-48 width: 12rem; /* 192px */
w-52 width: 13rem; /* 208px */
w-56 width: 14rem; /* 224px */
w-60 width: 15rem; /* 240px */
w-64 width: 16rem; /* 256px */
w-72 width: 18rem; /* 288px */
w-80 width: 20rem; /* 320px */
w-96 width: 24rem; /* 384px */
w-auto width: auto;
w-1/2 width: 50%;
w-1/3 width: 33.333333%;
w-2/3 width: 66.666667%;
w-1/4 width: 25%;
w-2/4 width: 50%;
w-3/4 width: 75%;
w-1/5 width: 20%;
w-2/5 width: 40%;
w-3/5 width: 60%;
w-4/5 width: 80%;
w-1/6 width: 16.666667%;
w-2/6 width: 33.333333%;
w-3/6 width: 50%;
w-4/6 width: 66.666667%;
w-5/6 width: 83.333333%;
w-1/12 width: 8.333333%;
w-2/12 width: 16.666667%;
w-3/12 width: 25%;
w-4/12 width: 33.333333%;
w-5/12 width: 41.666667%;
w-6/12 width: 50%;
w-7/12 width: 58.333333%;
w-8/12 width: 66.666667%;
w-9/12 width: 75%;
w-10/12 width: 83.333333%;
w-11/12 width: 91.666667%;
w-full width: 100%;
w-screen width: 100vw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content; -->
<!--
Min Width Sizes
min-w-0 min-width: 0px;
min-w-full min-width: 100%;
min-w-min min-width: min-content;
min-w-max min-width: max-content;
min-w-fit min-width: fit-content;
-->
<!--
Max Width Sizes
max-w-0 max-width: 0rem; /* 0px */
max-w-none max-width: none;
max-w-xs max-width: 20rem; /* 320px */
max-w-sm max-width: 24rem; /* 384px */
max-w-md max-width: 28rem; /* 448px */
max-w-lg max-width: 32rem; /* 512px */
max-w-xl max-width: 36rem; /* 576px */
max-w-2xl max-width: 42rem; /* 672px */
max-w-3xl max-width: 48rem; /* 768px */
max-w-4xl max-width: 56rem; /* 896px */
max-w-5xl max-width: 64rem; /* 1024px */
max-w-6xl max-width: 72rem; /* 1152px */
max-w-7xl max-width: 80rem; /* 1280px */
max-w-full max-width: 100%;
max-w-min max-width: min-content;
max-w-max max-width: max-content;
max-w-fit max-width: fit-content;
max-w-prose max-width: 65ch;
max-w-screen-sm max-width: 640px;
max-w-screen-md max-width: 768px;
max-w-screen-lg max-width: 1024px;
max-w-screen-xl max-width: 1280px;
max-w-screen-2xl max-width: 1536px;
-->
<!--
Height Sizes
h-0 height: 0px;
h-px height: 1px;
h-0.5 height: 0.125rem; /* 2px */
h-1 height: 0.25rem; /* 4px */
h-1.5 height: 0.375rem; /* 6px */
h-2 height: 0.5rem; /* 8px */
h-2.5 height: 0.625rem; /* 10px */
h-3 height: 0.75rem; /* 12px */
h-3.5 height: 0.875rem; /* 14px */
h-4 height: 1rem; /* 16px */
h-5 height: 1.25rem; /* 20px */
h-6 height: 1.5rem; /* 24px */
h-7 height: 1.75rem; /* 28px */
h-8 height: 2rem; /* 32px */
h-9 height: 2.25rem; /* 36px */
h-10 height: 2.5rem; /* 40px */
h-11 height: 2.75rem; /* 44px */
h-12 height: 3rem; /* 48px */
h-14 height: 3.5rem; /* 56px */
h-16 height: 4rem; /* 64px */
h-20 height: 5rem; /* 80px */
h-24 height: 6rem; /* 96px */
h-28 height: 7rem; /* 112px */
h-32 height: 8rem; /* 128px */
h-36 height: 9rem; /* 144px */
h-40 height: 10rem; /* 160px */
h-44 height: 11rem; /* 176px */
h-48 height: 12rem; /* 192px */
h-52 height: 13rem; /* 208px */
h-56 height: 14rem; /* 224px */
h-60 height: 15rem; /* 240px */
h-64 height: 16rem; /* 256px */
h-72 height: 18rem; /* 288px */
h-80 height: 20rem; /* 320px */
h-96 height: 24rem; /* 384px */
h-auto height: auto;
h-1/2 height: 50%;
h-1/3 height: 33.333333%;
h-2/3 height: 66.666667%;
h-1/4 height: 25%;
h-2/4 height: 50%;
h-3/4 height: 75%;
h-1/5 height: 20%;
h-2/5 height: 40%;
h-3/5 height: 60%;
h-4/5 height: 80%;
h-1/6 height: 16.666667%;
h-2/6 height: 33.333333%;
h-3/6 height: 50%;
h-4/6 height: 66.666667%;
h-5/6 height: 83.333333%;
h-full height: 100%;
h-screen height: 100vh;
h-min height: min-content;
h-max height: max-content;
h-fit height: fit-content;
-->
<!--
Min Height Sizes
min-h-0 min-height: 0px;
min-h-full min-height: 100%;
min-h-screen min-height: 100vh;
min-h-min min-height: min-content;
min-h-max min-height: max-content;
min-h-fit min-height: fit-content;
-->
<!--
Max Height Sizes
max-h-0 max-height: 0px;
max-h-px max-height: 1px;
max-h-0.5 max-height: 0.125rem; /* 2px */
max-h-1 max-height: 0.25rem; /* 4px */
max-h-1.5 max-height: 0.375rem; /* 6px */
max-h-2 max-height: 0.5rem; /* 8px */
max-h-2.5 max-height: 0.625rem; /* 10px */
max-h-3 max-height: 0.75rem; /* 12px */
max-h-3.5 max-height: 0.875rem; /* 14px */
max-h-4 max-height: 1rem; /* 16px */
max-h-5 max-height: 1.25rem; /* 20px */
max-h-6 max-height: 1.5rem; /* 24px */
max-h-7 max-height: 1.75rem; /* 28px */
max-h-8 max-height: 2rem; /* 32px */
max-h-9 max-height: 2.25rem; /* 36px */
max-h-10 max-height: 2.5rem; /* 40px */
max-h-11 max-height: 2.75rem; /* 44px */
max-h-12 max-height: 3rem; /* 48px */
max-h-14 max-height: 3.5rem; /* 56px */
max-h-16 max-height: 4rem; /* 64px */
max-h-20 max-height: 5rem; /* 80px */
max-h-24 max-height: 6rem; /* 96px */
max-h-28 max-height: 7rem; /* 112px */
max-h-32 max-height: 8rem; /* 128px */
max-h-36 max-height: 9rem; /* 144px */
max-h-40 max-height: 10rem; /* 160px */
max-h-44 max-height: 11rem; /* 176px */
max-h-48 max-height: 12rem; /* 192px */
max-h-52 max-height: 13rem; /* 208px */
max-h-56 max-height: 14rem; /* 224px */
max-h-60 max-height: 15rem; /* 240px */
max-h-64 max-height: 16rem; /* 256px */
max-h-72 max-height: 18rem; /* 288px */
max-h-80 max-height: 20rem; /* 320px */
max-h-96 max-height: 24rem; /* 384px */
max-h-full max-height: 100%;
max-h-screen max-height: 100vh;
max-h-min max-height: min-content;
max-h-max max-height: max-content;
max-h-fit max-height: fit-content;
-->
레이아웃
Relative, Absolute
tailwind에서 레이아웃을 조정하기 위해서는 relative, absolute을 이용하여 처리한다. 해당 부분이 조금 어려웠었는데 현재는 relative로 기준점을 잡고, absolute을 이용하여 relative로 기준을 잡은 곳을 기점으로 움직임을 표현한다. 라고 이해하고 있다.
이는 우리가 흔히 사용하는 CSS에서도 같은 개념이므로 해당 블로그를 참조하여 이해하려고 노력했다.
참조 : https://creamilk88.tistory.com/197
[CSS] CSS Position (relative, absolute) 한 방에 정리!
목차 1. Position 속성 1-1. Relative 1-2. Absolute 1-2-1. 부모 relative & 자식 absolute 1-2-2. 조상 relative & 자식 absolute 1-2-3. 조상 position 없음 & 자식 absolute 1-3. Fixed CSS Position CSS Position 요약 position 속성을 통해
creamilk88.tistory.com
inline, inline-block, block, hidden
해당 자료를 참고 하면 이해하기 쉽다.
참조 : https://www.daleseo.com/css-display-inline-block/
CSS의 display 속성: inline, block, inline-block
Engineering Blog by Dale Seo
www.daleseo.com
간단하게 내용을 정리하면 다음과 같다.
- inline: 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지한다. 좌우 margin, padding 간격이 조절이 가능하지만 상하로는 조정일 불가능하다.
- block: block으로 지정된 엘리먼트는 전, 후로 줄바꿈이 들어가 한 줄을 차지한다. 상하좌우 margin, padding 조절이 가능하다.
- inline-block: 마크업하고 있는 컨텐츠의 크기 만큼 공간을 차지하지만, 상화좌우 margin, padding 조절이 가능하다.
- hidden: 해당 요소를 숨긴다.
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>TailwindCSS</title>
</head>
<body>
<!-- Positioning -->
<div class="relative w-1/2 h-12 bg-red-200">
<p>Relative parent</p>
<div class="absolute bottom-0 right-0 bg-red-500">
<p>Absolute child</p>
</div>
</div>
<!-- Top left corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute left-0 top-0 h-16 w-16 bg-yellow-300">01</div>
</div>
<!-- Top right corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute top-0 right-0 h-16 w-16 bg-yellow-300">03</div>
</div>
<!-- Bottom left corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute bottom-0 left-0 h-16 w-16 bg-yellow-300">07</div>
</div>
<!-- Bottom right corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute bottom-0 right-0 h-16 w-16 bg-yellow-300">09</div>
</div>
<!-- Span top edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-x-0 top-0 h-16 bg-yellow-300">02</div>
</div>
<!-- Span left edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-y-0 left-0 w-16 bg-yellow-300">04</div>
</div>
<!-- Span right edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-y-0 right-0 w-16 bg-yellow-300">06</div>
</div>
<!-- Span bottom edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-x-0 bottom-0 h-16 bg-yellow-300">08</div>
</div>
<!-- Display Classes -->
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
<span class="inline">This is display inline and will wrap normally</span
>sapiente ut rerum esse ullam provident, fugit
<span class="inline-block"
>This is display inline-block and will not extend beyond it's
parent</span
>eos quam
<span class="block"
>This is display block and will move to it's own line</span
>
reprehenderit est hic aut unde sequi, officia, ipsa amet doloribus
ratione<span class="hidden"
>This is display none and will not display at all</span
>
ad.
</div>
<!-- Z-Index -->
<div class="relative h-36">
<div class="absolute left-10 w-24 h-24 bg-blue-200 z-40">1</div>
<div class="absolute left-20 w-24 h-24 bg-blue-300">2</div>
<div class="absolute left-40 w-24 h-24 bg-blue-400 z-10">3</div>
<div class="absolute left-60 w-24 h-24 bg-blue-500 z-20">4</div>
<div class="absolute left-80 w-24 h-24 bg-blue-600">5</div>
</div>
<!-- Floats -->
<div class="w-1/2">
<img class="h-48 w-48 float-right" src="/assets/img/img1.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere numquam
voluptatem accusantium atque cupiditate nulla ratione saepe veniam, ex
iure nisi mollitia sed rerum veritatis temporibus iusto! Molestiae,
ratione doloribus?
</p>
</div>
</body>
</html>
<!-- Position Classes
static position: static;
fixed position: fixed;
absolute position: absolute;
relative position: relative;
sticky position: sticky;
-->
<!-- Display Classes
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;
-->
<!-- Z-Index
z-0 z-index: 0;
z-10 z-index: 10;
z-20 z-index: 20;
z-30 z-index: 30;
z-40 z-index: 40;
z-50 z-index: 50;
z-auto z-index: auto;
-->
<!-- Float
float-right float: right;
float-left float: left;
float-none float: none;
-->
그림자와 그라데이션 조절
그림자
일반적으로 그림자를 표현하기 위해서는 shadow을 사용하며 그림자의 크기에 따라 md ~ 2xl로 조절이 가능하며 그림자 색을 바꾸기 위해서는 앞서 설명했던 색깔 조절 처럼 shadow-blue-500 처럼 나타내어 사용이 가능하다.
그라데이션
만약 배경색에 그라데이션을 사용하고자 한다면 bg-gradient-to-r from-cyan-500 to-blue-500 처럼 이용하여 처리가 가능하다. 서로 다른 색을 섞고 싶다면 mix-blend-multiply을 이용하면 서로 다른 색이 만나게 되면, 두 색이 섞인 색을 표현 해 준다.
-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Backgrounds & Shadows</title>
</head>
<body>
<!-- Background Classes -->
<div
class="h-64 w-72 bg-blue-500 bg-cover bg-no-repeat bg-center"
style="background-image: url('../assets/img/img1.jpg')"
></div>
<!-- Gradients -->
<div class="h-24 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div
class="h-24 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"
></div>
<!-- Shadows -->
<div class="w-96 mt-6 ml-4 p-3 shadow-md">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-lg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-xl">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-2xl">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-inner">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<!-- Shadow Colors -->
<div class="w-96 mt-6 ml-4 p-3 shadow-xl shadow-blue-500/50">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="w-96 mt-6 ml-4 p-3 shadow-xl shadow-red-500/100">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<!-- Mix Blend -->
<div class="flex justify-center -space-x-24">
<div class="mix-blend-multiply bg-blue-400 ...">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
<div class="mix-blend-multiply bg-pink-400 ...">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
deleniti iusto delectus alias natus quam dolor explicabo quas eius!
</div>
</div>
</body>
</html>
<!-- Background Size
bg-auto background-size: auto;
bg-cover background-size: cover;
bg-contain background-size: contain;
-->
<!-- Background Repeat
bg-repeat background-repeat: repeat;
bg-no-repeat background-repeat: no-repeat;
bg-repeat-x background-repeat: repeat-x;
bg-repeat-y background-repeat: repeat-y;
bg-repeat-round background-repeat: round;
bg-repeat-space background-repeat: space;
-->
<!-- Background Position
bg-bottom background-position: bottom;
bg-center background-position: center;
bg-left background-position: left;
bg-left-bottom background-position: left bottom;
bg-left-top background-position: left top;
bg-right background-position: right;
bg-right-bottom background-position: right bottom;
bg-right-top background-position: right top;
bg-top background-position: top;
-->
<!-- Background Attachment
bg-fixed background-attachment: fixed;
bg-local background-attachment: local;
bg-scroll background-attachment: scroll;
-->
<!--
Shadows
shadow-sm box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-inner box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-none box-shadow: 0 0 #0000;
-->
'FrameWork > Tailwind' 카테고리의 다른 글
| 트랜스폼, 애니메이션 조절하기 (1) | 2023.11.06 |
|---|---|
| 플렉스, 그리드 조절하기 (0) | 2023.11.05 |
| 테두리, 필터, 상호작용 조절하기 (0) | 2023.11.05 |
| 색 , 컨테이너와 공간, 타이포그래피 조절하기 (0) | 2023.11.05 |
| Tailwindcss에 대하여, 설치 방법 (0) | 2023.11.05 |