연습장:Sakura: 두 판 사이의 차이

  • 최근 수정 시각: 2023년 11월 5일 (일) 08:31
  • 창작 문서는 문서 별 라이선스를 확인하세요. 실용 문서는 다른 조건이 없는 한 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0에 따라 사용할 수 있습니다. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 역사
편집 요약 없음
1번째 줄: 1번째 줄:
== 기능 틀 ==
=== 테마(라이트모드/다크모드) 별 이미지 ===
<div class="inline-block dark:hidden">{{{1|라이트모드에서 보입니다!}}}</div><div class="hidden dark:inline-block">{{{2|다크모드에서 보입니다!}}}</div>
=== 다크모드 전환 토글 ===
{{test}}
== Tailwind CSS 설명 ==
== Tailwind CSS 설명 ==
=== 무엇인가? ===
=== 무엇인가? ===

2023년 11월 5일 (일) 08:31 판

Tailwind CSS 설명

무엇인가?


Tailwind CSS를 설명하는 영상

css 파일 대신 html에 코드를 쓰는 걸로 대신할 수 있는 CSS 프레임워크 라고는 하지만 이해 못하시죠? 간단히 말하자면 style="" 사이에 무언가를 쓰는것 대신에 class=""에 적어서 적용할 수 있게 만드는 기능입니다.

왜 쓰는가?

코드를 짜는 시간이 짧아집니다. 대표적으로 틀을 가운데 두기 위해 많이 쓰는 style="margin-right: auto; margin-left: auto;"는 class="mx-0"로 짧게 작성할 수 있습니다. 또, 문서의 다크모드 대응도 가능하게 됩니다. 기존 방식에서는 다크모드에 대응할 수 없고, 대응하고자 하면 관리자가 미리 작성해놓은 class="evewiki-dark-txt" 같은걸 써야했지만, 이제는 관리자가 미리 작성했느냐와는 관계 없이 class="dark:text-white"라고 작성하여 다크모드에서 글자를 흰색으로 보이게 할 수 있습니다.

Tailwind CSS 색상표

배경색(background), 테두리 색(border), 글자 색(color) 등 색상을 정할 때 Tailwind CSS에서는 이 색상표의 색을 기본으로 제공합니다. 물론, 검은색(black)과 흰색(white)는 당연히 포함이죠! 또, 필요하다면 대괄호([,])를 이용해 별도의 색을 지정할 수도 있습니다. 예를 들어, text-[#00FF00]처럼 말이죠!

색상표
[ 펼치기 · 접기 ]

Slate

50

#f8fafc

100

#f1f5f9

200

#e2e8f0

300

#cbd5e1

400

#94a3b8

500

#64748b

600

#475569

700

#334155

800

#1e293b

900

#0f172a

950

#020617

Gray

50

#f9fafb

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

400

#9ca3af

500

#6b7280

600

#4b5563

700

#374151

800

#1f2937

900

#111827

950

#030712

Zinc

50

#fafafa

100

#f4f4f5

200

#e4e4e7

300

#d4d4d8

400

#a1a1aa

500

#71717a

600

#52525b

700

#3f3f46

800

#27272a

900

#18181b

950

#09090b

Neutral

50

#fafafa

100

#f5f5f5

200

#e5e5e5

300

#d4d4d4

400

#a3a3a3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0a0a0a

Stone

50

#fafaf9

100

#f5f5f4

200

#e7e5e4

300

#d6d3d1

400

#a8a29e

500

#78716c

600

#57534e

700

#44403c

800

#292524

900

#1c1917

950

#0c0a09

Red

50

#fef2f2

100

#fee2e2

200

#fecaca

300

#fca5a5

400

#f87171

500

#ef4444

600

#dc2626

700

#b91c1c

800

#991b1b

900

#7f1d1d

950

#450a0a

Orange

50

#fff7ed

100

#ffedd5

200

#fed7aa

300

#fdba74

400

#fb923c

500

#f97316

600

#ea580c

700

#c2410c

800

#9a3412

900

#7c2d12

950

#431407

Amber

50

#fffbeb

100

#fef3c7

200

#fde68a

300

#fcd34d

400

#fbbf24

500

#f59e0b

600

#d97706

700

#b45309

800

#92400e

900

#78350f

950

#451a03

Yellow

50

#fefce8

100

#fef9c3

200

#fef08a

300

#fde047

400

#facc15

500

#eab308

600

#ca8a04

700

#a16207

800

#854d0e

900

#713f12

950

#422006

Lime

50

#f7fee7

100

#ecfccb

200

#d9f99d

300

#bef264

400

#a3e635

500

#84cc16

600

#65a30d

700

#4d7c0f

800

#3f6212

900

#365314

950

#1a2e05

Green

50

#f0fdf4

100

#dcfce7

200

#bbf7d0

300

#86efac

400

#4ade80

500

#22c55e

600

#16a34a

700

#15803d

800

#166534

900

#14532d

950

#052e16

Emerald

50

#ecfdf5

100

#d1fae5

200

#a7f3d0

300

#6ee7b7

400

#34d399

500

#10b981

600

#059669

700

#047857

800

#065f46

900

#064e3b

950

#022c22

Teal

50

#f0fdfa

100

#ccfbf1

200

#99f6e4

300

#5eead4

400

#2dd4bf

500

#14b8a6

600

#0d9488

700

#0f766e

800

#115e59

900

#134e4a

950

#042f2e

Cyan

50

#ecfeff

100

#cffafe

200

#a5f3fc

300

#67e8f9

400

#22d3ee

500

#06b6d4

600

#0891b2

700

#0e7490

800

#155e75

900

#164e63

950

#083344

Sky

50

#f0f9ff

100

#e0f2fe

200

#bae6fd

300

#7dd3fc

400

#38bdf8

500

#0ea5e9

600

#0284c7

700

#0369a1

800

#075985

900

#0c4a6e

950

#082f49

Blue

50

#eff6ff

100

#dbeafe

200

#bfdbfe

300

#93c5fd

400

#60a5fa

500

#3b82f6

600

#2563eb

700

#1d4ed8

800

#1e40af

900

#1e3a8a

950

#172554

Indigo

50

#eef2ff

100

#e0e7ff

200

#c7d2fe

300

#a5b4fc

400

#818cf8

500

#6366f1

600

#4f46e5

700

#4338ca

800

#3730a3

900

#312e81

950

#1e1b4b

Violet

50

#f5f3ff

100

#ede9fe

200

#ddd6fe

300

#c4b5fd

400

#a78bfa

500

#8b5cf6

600

#7c3aed

700

#6d28d9

800

#5b21b6

900

#4c1d95

950

#2e1065

Purple

50

#faf5ff

100

#f3e8ff

200

#e9d5ff

300

#d8b4fe

400

#c084fc

500

#a855f7

600

#9333ea

700

#7e22ce

800

#6b21a8

900

#581c87

950

#3b0764

Fuchsia

50

#fdf4ff

100

#fae8ff

200

#f5d0fe

300

#f0abfc

400

#e879f9

500

#d946ef

600

#c026d3

700

#a21caf

800

#86198f

900

#701a75

950

#4a044e

Pink

50

#fdf2f8

100

#fce7f3

200

#fbcfe8

300

#f9a8d4

400

#f472b6

500

#ec4899

600

#db2777

700

#be185d

800

#9d174d

900

#831843

950

#500724

Rose

50

#fff1f2

100

#ffe4e6

200

#fecdd3

300

#fda4af

400

#fb7185

500

#f43f5e

600

#e11d48

700

#be123c

800

#9f1239

900

#881337

950

#4c0519

Tailwind CSS 코드

Padding

Class 이름
적용되는 Style
p-0 padding: 0px;
px-0 padding-left: 0px;
padding-right: 0px;
py-0 padding-top: 0px;
padding-bottom: 0px;
ps-0 padding-inline-start: 0px;
pe-0 padding-inline-end: 0px;
pt-0 padding-top: 0px;
pr-0 padding-right: 0px;
pb-0 padding-bottom: 0px;
pl-0 padding-left: 0px;
p-px padding: 1px;
px-px padding-left: 1px;
padding-right: 1px;
py-px padding-top: 1px;
padding-bottom: 1px;
ps-px padding-inline-start: 1px;
pe-px padding-inline-end: 1px;
pt-px padding-top: 1px;
pr-px padding-right: 1px;
pb-px padding-bottom: 1px;
pl-px padding-left: 1px;
p-0.5 padding: 0.125rem; /* 1.875px */
px-0.5 padding-left: 0.125rem; /* 1.875px */
padding-right: 0.125rem; /* 1.875px */
py-0.5 padding-top: 0.125rem; /* 1.875px */
padding-bottom: 0.125rem; /* 1.875px */
ps-0.5 padding-inline-start: 0.125rem; /* 1.875px */
pe-0.5 padding-inline-end: 0.125rem; /* 1.875px */
pt-0.5 padding-top: 0.125rem; /* 1.875px */
pr-0.5 padding-right: 0.125rem; /* 1.875px */
pb-0.5 padding-bottom: 0.125rem; /* 1.875px */
pl-0.5 padding-left: 0.125rem; /* 1.875px */
p-1 padding: 0.25rem; /* 3.75px */
px-1 padding-left: 0.25rem; /* 3.75px */
padding-right: 0.25rem; /* 3.75px */
py-1 padding-top: 0.25rem; /* 3.75px */
padding-bottom: 0.25rem; /* 3.75px */
ps-1 padding-inline-start: 0.25rem; /* 3.75px */
pe-1 padding-inline-end: 0.25rem; /* 3.75px */
pt-1 padding-top: 0.25rem; /* 3.75px */
pr-1 padding-right: 0.25rem; /* 3.75px */
pb-1 padding-bottom: 0.25rem; /* 3.75px */
pl-1 padding-left: 0.25rem; /* 3.75px */
p-1.5 padding: 0.375rem; /* 5.625px */
px-1.5 padding-left: 0.375rem; /* 5.625px */
padding-right: 0.375rem; /* 5.625px */
py-1.5 padding-top: 0.375rem; /* 5.625px */
padding-bottom: 0.375rem; /* 5.625px */
ps-1.5 padding-inline-start: 0.375rem; /* 5.625px */
pe-1.5 padding-inline-end: 0.375rem; /* 5.625px */
pt-1.5 padding-top: 0.375rem; /* 5.625px */
pr-1.5 padding-right: 0.375rem; /* 5.625px */
pb-1.5 padding-bottom: 0.375rem; /* 5.625px */
pl-1.5 padding-left: 0.375rem; /* 5.625px */
p-4 padding: 0.5rem; /* 7.5px */
px-2 padding-left: 0.5rem; /* 7.5px */
padding-right: 0.5rem; /* 7.5px */
py-2 padding-top: 0.5rem; /* 7.5px */
padding-bottom: 0.5rem; /* 7.5px */
ps-2 padding-inline-start: 0.5rem; /* 7.5px */
pe-2 padding-inline-end: 0.5rem; /* 7.5px */
pt-2 padding-top: 0.5rem; /* 7.5px */
p-4 padding-right: 0.5rem; /* 7.5px */
pb-2 padding-bottom: 0.5rem; /* 7.5px */
p-4 padding-left: 0.5rem; /* 7.5px */
p-4.5 padding: 0.625rem; /* 9.375px */
px-2.5 padding-left: 0.625rem; /* 9.375px */
padding-right: 0.625rem; /* 9.375px */
py-2.5 padding-top: 0.625rem; /* 9.375px */
padding-bottom: 0.625rem; /* 9.375px */
ps-2.5 padding-inline-start: 0.625rem; /* 9.375px */
pe-2.5 padding-inline-end: 0.625rem; /* 9.375px */
pt-2.5 padding-top: 0.625rem; /* 9.375px */
p-4.5 padding-right: 0.625rem; /* 9.375px */
pb-2.5 padding-bottom: 0.625rem; /* 9.375px */
p-4.5 padding-left: 0.625rem; /* 9.375px */
p-3 padding: 0.75rem; /* 11.25px */
px-3 padding-left: 0.75rem; /* 11.25px */
padding-right: 0.75rem; /* 11.25px */
py-3 padding-top: 0.75rem; /* 11.25px */
padding-bottom: 0.75rem; /* 11.25px */
ps-3 padding-inline-start: 0.75rem; /* 11.25px */
pe-3 padding-inline-end: 0.75rem; /* 11.25px */
pt-3 padding-top: 0.75rem; /* 11.25px */
pr-3 padding-right: 0.75rem; /* 11.25px */
pb-3 padding-bottom: 0.75rem; /* 11.25px */
pl-3 padding-left: 0.75rem; /* 11.25px */
p-3.5 padding: 0.875rem; /* 13.125px */
px-3.5 padding-left: 0.875rem; /* 13.125px */
padding-right: 0.875rem; /* 13.125px */
py-3.5 padding-top: 0.875rem; /* 13.125px */
padding-bottom: 0.875rem; /* 13.125px */
ps-3.5 padding-inline-start: 0.875rem; /* 13.125px */
pe-3.5 padding-inline-end: 0.875rem; /* 13.125px */
pt-3.5 padding-top: 0.875rem; /* 13.125px */
pr-3.5 padding-right: 0.875rem; /* 13.125px */
pb-3.5 padding-bottom: 0.875rem; /* 13.125px */
pl-3.5 padding-left: 0.875rem; /* 13.125px */
p-4 padding: 1rem; /* 15px */
px-4 padding-left: 1rem; /* 15px */
padding-right: 1rem; /* 15px */
py-4 padding-top: 1rem; /* 15px */
padding-bottom: 1rem; /* 15px */
ps-4 padding-inline-start: 1rem; /* 15px */
pe-4 padding-inline-end: 1rem; /* 15px */
pt-4 padding-top: 1rem; /* 15px */
pr-4 padding-right: 1rem; /* 15px */
pb-4 padding-bottom: 1rem; /* 15px */
pl-4 padding-left: 1rem; /* 15px */
p-5 padding: 1.25rem; /* 18.75px */
px-5 padding-left: 1.25rem; /* 18.75px */
padding-right: 1.25rem; /* 18.75px */
py-5 padding-top: 1.25rem; /* 18.75px */
padding-bottom: 1.25rem; /* 18.75px */
ps-5 padding-inline-start: 1.25rem; /* 18.75px */
pe-5 padding-inline-end: 1.25rem; /* 18.75px */
pt-5 padding-top: 1.25rem; /* 18.75px */
pr-5 padding-right: 1.25rem; /* 18.75px */
pb-5 padding-bottom: 1.25rem; /* 18.75px */
pl-5 padding-left: 1.25rem; /* 18.75px */
p-6 padding: 1.5rem; /* 22.5px */
px-6 padding-left: 1.5rem; /* 22.5px */
padding-right: 1.5rem; /* 22.5px */
py-6 padding-top: 1.5rem; /* 22.5px */
padding-bottom: 1.5rem; /* 22.5px */
ps-6 padding-inline-start: 1.5rem; /* 22.5px */
pe-6 padding-inline-end: 1.5rem; /* 22.5px */
pt-6 padding-top: 1.5rem; /* 22.5px */
pr-6 padding-right: 1.5rem; /* 22.5px */
pb-6 padding-bottom: 1.5rem; /* 22.5px */
pl-6 padding-left: 1.5rem; /* 22.5px */
p-7 padding: 1.75rem; /* 26.25px */
px-7 padding-left: 1.75rem; /* 26.25px */
padding-right: 1.75rem; /* 26.25px */
py-7 padding-top: 1.75rem; /* 26.25px */
padding-bottom: 1.75rem; /* 26.25px */
ps-7 padding-inline-start: 1.75rem; /* 26.25px */
pe-7 padding-inline-end: 1.75rem; /* 26.25px */
pt-7 padding-top: 1.75rem; /* 26.25px */
pr-7 padding-right: 1.75rem; /* 26.25px */
pb-7 padding-bottom: 1.75rem; /* 26.25px */
pl-7 padding-left: 1.75rem; /* 26.25px */
p-8 padding: 2rem; /* 30px */
px-8 padding-left: 2rem; /* 30px */
padding-right: 2rem; /* 30px */
py-8 padding-top: 2rem; /* 30px */
padding-bottom: 2rem; /* 30px */
ps-8 padding-inline-start: 2rem; /* 30px */
pe-8 padding-inline-end: 2rem; /* 30px */
pt-8 padding-top: 2rem; /* 30px */
pr-8 padding-right: 2rem; /* 30px */
pb-8 padding-bottom: 2rem; /* 30px */
pl-8 padding-left: 2rem; /* 30px */
p-9 padding: 2.25rem; /* 33.75px */
px-9 padding-left: 2.25rem; /* 33.75px */
padding-right: 2.25rem; /* 33.75px */
py-9 padding-top: 2.25rem; /* 33.75px */
padding-bottom: 2.25rem; /* 33.75px */
ps-9 padding-inline-start: 2.25rem; /* 33.75px */
pe-9 padding-inline-end: 2.25rem; /* 33.75px */
pt-9 padding-top: 2.25rem; /* 33.75px */
pr-9 padding-right: 2.25rem; /* 33.75px */
pb-9 padding-bottom: 2.25rem; /* 33.75px */
pl-9 padding-left: 2.25rem; /* 33.75px */
p-10 padding: 2.5rem; /* 33.75px */
px-10 padding-left: 2.5rem; /* 33.75px */
padding-right: 2.5rem; /* 33.75px */
py-10 padding-top: 2.5rem; /* 33.75px */
padding-bottom: 2.5rem; /* 33.75px */
ps-10 padding-inline-start: 2.5rem; /* 33.75px */
pe-10 padding-inline-end: 2.5rem; /* 33.75px */
pt-10 padding-top: 2.5rem; /* 33.75px */
pr-10 padding-right: 2.5rem; /* 33.75px */
pb-10 padding-bottom: 2.5rem; /* 33.75px */
pl-10 padding-left: 2.5rem; /* 33.75px */
p-11 padding: 2.75rem; /* 41.25px */
px-11 padding-left: 2.75rem; /* 41.25px */
padding-right: 2.75rem; /* 41.25px */
py-11 padding-top: 2.75rem; /* 41.25px */
padding-bottom: 2.75rem; /* 41.25px */
ps-11 padding-inline-start: 2.75rem; /* 41.25px */
pe-11 padding-inline-end: 2.75rem; /* 41.25px */
pt-11 padding-top: 2.75rem; /* 41.25px */
pr-11 padding-right: 2.75rem; /* 41.25px */
pb-11 padding-bottom: 2.75rem; /* 41.25px */
pl-11 padding-left: 2.75rem; /* 41.25px */
p-12 padding: 3rem; /* 45px */
px-12 padding-left: 3rem; /* 45px */
padding-right: 3rem; /* 45px */
py-12 padding-top: 3rem; /* 45px */
padding-bottom: 3rem; /* 45px */
ps-12 padding-inline-start: 3rem; /* 45px */
pe-12 padding-inline-end: 3rem; /* 45px */
pt-12 padding-top: 3rem; /* 45px */
pr-12 padding-right: 3rem; /* 45px */
pb-12 padding-bottom: 3rem; /* 45px */
pl-12 padding-left: 3rem; /* 45px */
p-14 padding: 3.5rem; /* 52.5px */
px-14 padding-left: 3.5rem; /* 52.5px */
padding-right: 3.5rem; /* 52.5px */
py-14 padding-top: 3.5rem; /* 52.5px */
padding-bottom: 3.5rem; /* 52.5px */
ps-14 padding-inline-start: 3.5rem; /* 52.5px */
pe-14 padding-inline-end: 3.5rem; /* 52.5px */
pt-14 padding-top: 3.5rem; /* 52.5px */
pr-14 padding-right: 3.5rem; /* 52.5px */
pb-14 padding-bottom: 3.5rem; /* 52.5px */
pl-14 padding-left: 3.5rem; /* 52.5px */
p-16 padding: 4rem; /* 60px */
px-16 padding-left: 4rem; /* 60px */
padding-right: 4rem; /* 60px */
py-16 padding-top: 4rem; /* 60px */
padding-bottom: 4rem; /* 60px */
ps-16 padding-inline-start: 4rem; /* 60px */
pe-16 padding-inline-end: 4rem; /* 60px */
pt-16 padding-top: 4rem; /* 60px */
pr-16 padding-right: 4rem; /* 60px */
pb-16 padding-bottom: 4rem; /* 60px */
pl-16 padding-left: 4rem; /* 60px */
p-40 padding: 5rem; /* 75px */
px-20 padding-left: 5rem; /* 75px */
padding-right: 5rem; /* 75px */
py-20 padding-top: 5rem; /* 75px */
padding-bottom: 5rem; /* 75px */
ps-20 padding-inline-start: 5rem; /* 75px */
pe-20 padding-inline-end: 5rem; /* 75px */
pt-20 padding-top: 5rem; /* 75px */
p-40 padding-right: 5rem; /* 75px */
pb-20 padding-bottom: 5rem; /* 75px */
p-40 padding-left: 5rem; /* 75px */
p-44 padding: 6rem; /* 90px */
px-24 padding-left: 6rem; /* 90px */
padding-right: 6rem; /* 90px */
py-24 padding-top: 6rem; /* 90px */
padding-bottom: 6rem; /* 90px */
ps-24 padding-inline-start: 6rem; /* 90px */
pe-24 padding-inline-end: 6rem; /* 90px */
pt-24 padding-top: 6rem; /* 90px */
p-44 padding-right: 6rem; /* 90px */
pb-24 padding-bottom: 6rem; /* 90px */
p-44 padding-left: 6rem; /* 90px */
p-48 padding: 7rem; /* 105px */
px-28 padding-left: 7rem; /* 105px */
padding-right: 7rem; /* 105px */
py-28 padding-top: 7rem; /* 105px */
padding-bottom: 7rem; /* 105px */
ps-28 padding-inline-start: 7rem; /* 105px */
pe-28 padding-inline-end: 7rem; /* 105px */
pt-28 padding-top: 7rem; /* 105px */
p-48 padding-right: 7rem; /* 105px */
pb-28 padding-bottom: 7rem; /* 105px */
p-48 padding-left: 7rem; /* 105px */
p-32 padding: 8rem; /* 120px */
px-32 padding-left: 8rem; /* 120px */
padding-right: 8rem; /* 120px */
py-32 padding-top: 8rem; /* 120px */
padding-bottom: 8rem; /* 120px */
ps-32 padding-inline-start: 8rem; /* 120px */
pe-32 padding-inline-end: 8rem; /* 120px */
pt-32 padding-top: 8rem; /* 120px */
pr-32 padding-right: 8rem; /* 120px */
pb-32 padding-bottom: 8rem; /* 120px */
pl-32 padding-left: 8rem; /* 120px */
p-36 padding: 9rem; /* 135px */
px-36 padding-left: 9rem; /* 135px */
padding-right: 9rem; /* 135px */
py-36 padding-top: 9rem; /* 135px */
padding-bottom: 9rem; /* 135px */
ps-36 padding-inline-start: 9rem; /* 135px */
pe-36 padding-inline-end: 9rem; /* 135px */
pt-36 padding-top: 9rem; /* 135px */
pr-36 padding-right: 9rem; /* 135px */
pb-36 padding-bottom: 9rem; /* 135px */
pl-36 padding-left: 9rem; /* 135px */
p-40 padding: 10rem; /* 150px */
px-40 padding-left: 10rem; /* 150px */
padding-right: 10rem; /* 150px */
py-40 padding-top: 10rem; /* 150px */
padding-bottom: 10rem; /* 150px */
ps-40 padding-inline-start: 10rem; /* 150px */
pe-40 padding-inline-end: 10rem; /* 150px */
pt-40 padding-top: 10rem; /* 150px */
pr-40 padding-right: 10rem; /* 150px */
pb-40 padding-bottom: 10rem; /* 150px */
pl-40 padding-left: 10rem; /* 150px */
p-44 padding: 11rem; /* 165px */
px-44 padding-left: 11rem; /* 165px */
padding-right: 11rem; /* 165px */
py-44 padding-top: 11rem; /* 165px */
padding-bottom: 11rem; /* 165px */
ps-44 padding-inline-start: 11rem; /* 165px */
pe-44 padding-inline-end: 11rem; /* 165px */
pt-44 padding-top: 11rem; /* 165px */
pr-44 padding-right: 11rem; /* 165px */
pb-44 padding-bottom: 11rem; /* 165px */
pl-44 padding-left: 11rem; /* 165px */
p-48 padding: 12rem; /* 180px */
px-48 padding-left: 12rem; /* 180px */
padding-right: 12rem; /* 180px */
py-48 padding-top: 12rem; /* 180px */
padding-bottom: 12rem; /* 180px */
ps-48 padding-inline-start: 12rem; /* 180px */
pe-48 padding-inline-end: 12rem; /* 180px */
pt-48 padding-top: 12rem; /* 180px */
pr-48 padding-right: 12rem; /* 180px */
pb-48 padding-bottom: 12rem; /* 180px */
pl-48 padding-left: 12rem; /* 180px */
p-52 padding: 13rem; /* 195px */
px-52 padding-left: 13rem; /* 195px */
padding-right: 13rem; /* 195px */
py-52 padding-top: 13rem; /* 195px */
padding-bottom: 13rem; /* 195px */
ps-52 padding-inline-start: 13rem; /* 195px */
pe-52 padding-inline-end: 13rem; /* 195px */
pt-52 padding-top: 13rem; /* 195px */
pr-52 padding-right: 13rem; /* 195px */
pb-52 padding-bottom: 13rem; /* 195px */
pl-52 padding-left: 13rem; /* 195px */
p-56 padding: 14rem; /* 210px */
px-56 padding-left: 14rem; /* 210px */
padding-right: 14rem; /* 210px */
py-56 padding-top: 14rem; /* 210px */
padding-bottom: 14rem; /* 210px */
ps-56 padding-inline-start: 14rem; /* 210px */
pe-56 padding-inline-end: 14rem; /* 210px */
pt-56 padding-top: 14rem; /* 210px */
pr-56 padding-right: 14rem; /* 210px */
pb-56 padding-bottom: 14rem; /* 210px */
pl-56 padding-left: 14rem; /* 210px */
p-60 padding: 15rem; /* 225px */
px-60 padding-left: 15rem; /* 225px */
padding-right: 15rem; /* 225px */
py-60 padding-top: 15rem; /* 225px */
padding-bottom: 15rem; /* 225px */
ps-60 padding-inline-start: 15rem; /* 225px */
pe-60 padding-inline-end: 15rem; /* 225px */
pt-60 padding-top: 15rem; /* 225px */
pr-60 padding-right: 15rem; /* 225px */
pb-60 padding-bottom: 15rem; /* 225px */
pl-60 padding-left: 15rem; /* 225px */
p-64 padding: 16rem; /* 240px */
px-64 padding-left: 16rem; /* 240px */
padding-right: 16rem; /* 240px */
py-64 padding-top: 16rem; /* 240px */
padding-bottom: 16rem; /* 240px */
ps-64 padding-inline-start: 16rem; /* 240px */
pe-64 padding-inline-end: 16rem; /* 240px */
pt-64 padding-top: 16rem; /* 240px */
pr-64 padding-right: 16rem; /* 240px */
pb-64 padding-bottom: 16rem; /* 240px */
pl-64 padding-left: 16rem; /* 240px */
p-72 padding: 18rem; /* 270px */
px-72 padding-left: 18rem; /* 270px */
padding-right: 18rem; /* 270px */
py-72 padding-top: 18rem; /* 270px */
padding-bottom: 18rem; /* 270px */
ps-72 padding-inline-start: 18rem; /* 270px */
pe-72 padding-inline-end: 18rem; /* 270px */
pt-72 padding-top: 18rem; /* 270px */
pr-72 padding-right: 18rem; /* 270px */
pb-72 padding-bottom: 18rem; /* 270px */
pl-72 padding-left: 18rem; /* 270px */
p-80 padding: 20rem; /* 300px */
px-80 padding-left: 20rem; /* 300px */
padding-right: 20rem; /* 300px */
py-80 padding-top: 20rem; /* 300px */
padding-bottom: 20rem; /* 300px */
ps-80 padding-inline-start: 20rem; /* 300px */
pe-80 padding-inline-end: 20rem; /* 300px */
pt-80 padding-top: 20rem; /* 300px */
pr-80 padding-right: 20rem; /* 300px */
pb-80 padding-bottom: 20rem; /* 300px */
pl-80 padding-left: 20rem; /* 300px */
p-96 padding: 24rem; /* 360px */
px-96 padding-left: 24rem; /* 360px */
padding-right: 24rem; /* 360px */
py-96 padding-top: 24rem; /* 360px */
padding-bottom: 24rem; /* 360px */
ps-96 padding-inline-start: 24rem; /* 360px */
pe-96 padding-inline-end: 24rem; /* 360px */
pt-96 padding-top: 24rem; /* 360px */
pr-96 padding-right: 24rem; /* 360px */
pb-96 padding-bottom: 24rem; /* 360px */
pl-96 padding-left: 24rem; /* 360px */


Margin