메인페이지에서 다루고 있는 예제를 살펴봅시다.
•
구버전은 cdn 다운로드 속도에서 차이가 큽니다. 반드시 3버전 이상을 사용해주세요. 비교를 해보실 수 있도록 첫번째 예제에서 구버전도 함께 첨부합니다.
•
3버전부터는 단점으로 손꼽혔던 CDN 속도도 잘 나옵니다.
•
Tailwind CSS를 사용하면 기본 스타일링이 안됩니다.(h1부터 h6까지 사용해보세요.)
Sizing
•
신버전
<!DOCTYPE html>
<html lang="ko">
<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">
<title>tailwindcss</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- space-y-8 : 각 요소의 간격 -->
<!-- bg-red-200 : red color 숫자가 높아질수록 진해짐 -->
<!-- shadow : 그림자, rounded : radius -->
<!--
w-96 : 96%나 96px이 아님, 0.25rem*96임
https://tailwindcss.com/docs/width
-->
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
<div class="space-y-8 bg-red-200">
<div class="w-96 h-10 bg-white shadow rounded">
w-96
</div>
<div class="w-80 bg-white shadow rounded">
w-80
</div>
<div class="w-72 bg-white shadow rounded">
w-72
</div>
<div class="w-64 bg-white shadow rounded">
w-64
</div>
<div class="w-60 bg-white shadow rounded">
w-60
</div>
<div class="w-56 bg-white shadow rounded">
w-56
</div>
<div class="w-52 bg-white shadow rounded">
w-52
</div>
<div class="w-48 bg-white shadow rounded">
w-48
</div>
</div>
</body>
</html>
HTML
복사
•
구버전
<!DOCTYPE html>
<html lang="ko">
<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">
<title>tailwindcss</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<!-- space-y-8 : 각 요소의 간격 -->
<!-- bg-red-200 : red color 숫자가 높아질수록 진해짐 -->
<!-- shadow : 그림자, rounded : radius -->
<!--
w-96 : 96%나 96px이 아니라 0.25rem*96 입니다.
https://tailwindcss.com/docs/width
-->
<!--
h-10 :2.5rem
https://tailwindcss.com/docs/height
-->
<div class="space-y-8 bg-red-200">
<div class="w-96 h-10 bg-white shadow rounded">
w-96
</div>
<div class="w-80 bg-white shadow rounded">
w-80
</div>
<div class="w-72 bg-white shadow rounded">
w-72
</div>
<div class="w-64 bg-white shadow rounded">
w-64
</div>
<div class="w-60 bg-white shadow rounded">
w-60
</div>
<div class="w-56 bg-white shadow rounded">
w-56
</div>
<div class="w-52 bg-white shadow rounded">
w-52
</div>
<div class="w-48 bg-white shadow rounded">
w-48
</div>
</div>
</body>
</html>
HTML
복사
Colors
•
color는 같은 숫자일 때 우선순위를 강제로 가지게 되어 class 순서와는 상관없이 color를 가지는 경우가 있으니 주의해야 합니다.
<!DOCTYPE html>
<html lang="ko">
<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">
<title>tailwindcss</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-10 h-10 bg-blue-500 bg-red-500"></div>
<div class="w-10 h-10 bg-red-500 bg-blue-500"></div>
<div class="w-10 h-10 bg-blue-400 bg-red-500"></div>
<div class="w-10 h-10 bg-red-500 bg-blue-400"></div>
<div class="grid grid-cols-10 gap-2">
<div class="bg-sky-50 aspect-square"></div>
<div class="bg-sky-100 aspect-square"></div>
<div class="bg-sky-200 aspect-square"></div>
<div class="bg-sky-300 aspect-square"></div>
<div class="bg-sky-400 aspect-square"></div>
<div class="bg-sky-500 aspect-square"></div>
<div class="bg-sky-600 aspect-square"></div>
<div class="bg-sky-700 aspect-square"></div>
<div class="bg-sky-800 aspect-square"></div>
<div class="bg-sky-900 aspect-square"></div>
</div>
<div class="grid grid-cols-10 gap-2">
<div class="bg-blue-50 aspect-square"></div>
<div class="bg-blue-100 aspect-square"></div>
<div class="bg-blue-200 aspect-square"></div>
<div class="bg-blue-300 aspect-square"></div>
<div class="bg-blue-400 aspect-square"></div>
<div class="bg-blue-500 aspect-square"></div>
<div class="bg-blue-600 aspect-square"></div>
<div class="bg-blue-700 aspect-square"></div>
<div class="bg-blue-800 aspect-square"></div>
<div class="bg-blue-900 aspect-square"></div>
</div>
<div class="grid grid-cols-10 gap-2">
<div class="bg-indigo-50 aspect-square"></div>
<div class="bg-indigo-100 aspect-square"></div>
<div class="bg-indigo-200 aspect-square"></div>
<div class="bg-indigo-300 aspect-square"></div>
<div class="bg-indigo-400 aspect-square"></div>
<div class="bg-indigo-500 aspect-square"></div>
<div class="bg-indigo-600 aspect-square"></div>
<div class="bg-indigo-700 aspect-square"></div>
<div class="bg-indigo-800 aspect-square"></div>
<div class="bg-indigo-900 aspect-square"></div>
</div>
<div class="grid grid-cols-10 gap-2">
<div class="bg-violet-50 aspect-square"></div>
<div class="bg-violet-100 aspect-square"></div>
<div class="bg-violet-200 aspect-square"></div>
<div class="bg-violet-300 aspect-square"></div>
<div class="bg-violet-400 aspect-square"></div>
<div class="bg-violet-500 aspect-square"></div>
<div class="bg-violet-600 aspect-square"></div>
<div class="bg-violet-700 aspect-square"></div>
<div class="bg-violet-800 aspect-square"></div>
<div class="bg-violet-900 aspect-square"></div>
</div>
</body>
</html>
HTML
복사
Typography
<!DOCTYPE html>
<html lang="ko">
<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">
<title>tailwindcss</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--
https://tailwindcss.com/docs/font-family
font-sans
font-serif
font-mono
-->
<!--
https://tailwindcss.com/docs/font-size
text-xs font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */
text-sm font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */
text-base font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
text-lg font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */
text-xl font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */
text-2xl font-size: 1.5rem; /* 24px */
line-height: 2rem; /* 32px */
...
-->
<div class="space-y-5">
<div class="p-3 bg-white shadow rounded-lg">
<h3 class="text-xs border-b">font-sans</h3>
<p class="font-sans">
The quick brown fox jumps over the lazy dog.
</p>
</div>
<div class="p-3 bg-white shadow rounded-lg">
<h3 class="text-xs border-b">font-serif</h3>
<p class="font-serif">
The quick brown fox jumps over the lazy dog.
</p>
</div>
<div class="p-3 bg-white shadow rounded-lg">
<h3 class="text-xs border-b">font-mono</h3>
<p class="font-mono">
The quick brown fox jumps over the lazy dog.
</p>
</div>
</div>
</body>
</html>
HTML
복사
Shadows
<!DOCTYPE html>
<html lang="ko">
<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">
<title>tailwindcss</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--
https://tailwindcss.com/docs/box-shadow
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl(작동하지 않는 이슈 있음)
shadow-inner
shadow-none
-->
<div class="grid grid-cols-2 gap-6">
<div class="shadow-sm bg-white rounded-lg">
shadow-sm
</div>
<div class="shadow bg-white rounded-lg">
shadow
</div>
<div class="shadow-md bg-white rounded-lg">
shadow-md
</div>
<div class="shadow-lg bg-white rounded-lg">
shadow-lg
</div>
<div class="shadow-xl bg-white rounded-lg">
shadow-xl
</div>
<div class="shadow-inner bg-white rounded-lg">
shadow-2xl
</div>
</div>
</body>
</html>
HTML
복사