연습장:Sakura

기능 틀

테마(라이트모드/다크모드) 별 이미지

라이트모드에서 보입니다!

다크모드에서 보입니다!

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, #000)과 흰색(white, #fff)는 당연히 포함이죠! 또, 필요하다면 대괄호([,])를 이용해 별도의 색을 지정할 수도 있습니다. 예를 들어, 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