메인페이지에서 다루고 있는 예제를 살펴봅시다.

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>

<!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>

Colors

<!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>

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>

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>