예제
예제는 tailwindcss 공식홈페이지에 있는 예제를 하겠습니다.
https://tailwindcss.com/#constraint-based
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Documentation for the Tailwind CSS framework.
tailwindcss.com
CDN
현재는 테스트용이므로 cdn을 사용하여서 작성하겠습니다.
https://tailwindcss.com/docs/installation/play-cdn
Installation: Play CDN - Tailwind CSS
Documentation for the Tailwind CSS framework.
tailwindcss.com
<head> <!-- 기존 head 사이에 넣어주세요. -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
Sizing
Space Between
https://tailwindcss.com/docs/space
Space Between - Tailwind CSS
Utilities for controlling the space between child elements.
tailwindcss.com
자식 요소 사이의 공간을 제어
| Class | Properties |
| space-x-1 | margin-left: 0.25rem (4px) |
| space-y-1 | margin-top: 0.25rem (4px) |
| space-x-px | margin-left: 1px |
| space-y-px | margin-top: 1px |
| space-x-reverse | --tw-space-x-reverse: 1 |
| space-y-reverse | --tw-space-y-reverse: 1 |
| -space-x-4 | margin-left: -0.25rem |
| -space-y-4 | margin-top: -0.25rem |
space-x-reverse는 자식 요소의 순서를 반전시켜서 정렬한다.
Width
https://tailwindcss.com/docs/width
Width - Tailwind CSS
Utilities for setting the width of an element.
tailwindcss.com
| Class | Width |
| w-1 | 1rem |
| w-96 | 24rem (384px) |
| w-auto | auto |
| w-1/2 | 50% |
| w-full | 100% |
| w-screen | 100vw |
| w-min | min-content |
| w-max | max-content |
| w-fit | fit-content |
Background Color
https://tailwindcss.com/docs/background-color
Background Color - Tailwind CSS
Utilities for controlling an element's background color.
tailwindcss.com
| Class | background-color |
| bg-inherit | inherit |
| bg-current | currentColor |
| bg-transparent | transparent |
| bg-black | rgb(0, 0, 0) |
| bg-white | rgb(255, 255, 255) |
| bg-slate-50 | rgb(248, 250, 252) |
| bg-gray-500 | rgb(107, 114, 128) |
| bg-zinc-400 | rgb(161, 161, 170) |
| bg-neutral-200 | rgb(245, 245, 245) |
숫자가 높아질 수록 진해짐.
만약 클래스명이 중복이 되었다면, 낮은 숫자를 가진 클래스가 우선 순위
(같은 숫자라면 red가 blue보다 우선순위인데.. 이건 잘 파악을 못했습니다.)
Typography
Font Size
https://tailwindcss.com/docs/font-size
Font Size - Tailwind CSS
Utilities for controlling the font size of an element.
tailwindcss.com
| Class | Properties |
| text-xs | font-size: 0.75rem; line-height: 1rem; |
| text-sm | font-size: 0.875rem; line-height: 1.25rem; |
| text-base | font-size: 1rem; line-height: 1.5rem; |
| text-lg | font-size: 1.125rem; line-height: 1.75rem; |
| text-xl | font-size: 1.25rem; line-height: 1.75rem; |
| text-2xl | font-size: 1.5rem; line-height: 2rem; |
| text-3xl | font-size: 1.875rem; line-height: 2.25rem; |
| text-4xl | font-size: 2.25rem; line-height: 2.5rem; |
| text-5xl | font-size: 3rem; line-height: 1; |
Font Family
https://tailwindcss.com/docs/font-family
Font Family - Tailwind CSS
Utilities for controlling the font family of an element.
tailwindcss.com
| Class | font-family |
| font-sans | ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Symbol", Noto Color Emoji" |
| font-serif | ui-serif, Georgia, Cambria, "Times New Roman", Times, serif |
| font-mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace |
Shadows
https://tailwindcss.com/docs/box-shadow
Box Shadow - Tailwind CSS
Utilities for controlling the box shadow of an element.
tailwindcss.com
| Class | box-shadow |
| shadow-sm | 0 1px 2px 0 rgb(0, 0, 0 / 0.05) |
| shadow | 0 1px 3px 0 rgb(0, 0, 0 / 0.1), 0 1px 2px -1px rgb(0, 0, 0 / 0.1) |
| shadow-md | 0 4px 6px -1px rgb(0, 0, 0 / 0.1), 0 2px 4px -2px rgb(0, 0, 0 / 0.1) |
| shadow-lg | 0 10px 15px -3px rgb(0, 0, 0 / 0.1), 0 4px 6px -4px rgb(0, 0, 0 / 0.1) |
| shadow-xl |
0 20px 25px -5px rgb(0, 0, 0 / 0.1), 0 8px 10px -6px rgb(0, 0, 0 / 0.1) |
| shadow-2xl |
0 25px 50px -12px rgb(0, 0, 0 / 0.25) |
| shadow-inner |
inset 0 2px 4px 0 rgb(0, 0, 0 / 0.05) |
| shadow-none |
0 0 #0000 |
3버전에서 2xl가 동작하지 않는 이슈가 있다고 합니다.
참고: 제주코딩베이스캠프
'CSS > Tailwind CSS' 카테고리의 다른 글
| Tailwind CSS Animation (0) | 2022.05.06 |
|---|---|
| Tailwind CSS Transitions (0) | 2022.05.06 |
| Tailwind CSS Flexbox & Grid (0) | 2022.05.06 |
| Tailwind CSS 기본 속성 (0) | 2022.05.06 |
| Tailwind CSS 소개 (0) | 2022.05.04 |
