Tailwind 어떻게 쓰는건데?

Tailwind란?
HTML을 떠나지 않고 빠르게 빌드하는 CSS 템플릿

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

🧰 Raw html에서 tailwind 사용법

head 태그 안에 아래 코드를 넣어주면됨

<!-- 아래 코드 안에 CSS 리셋 코드도 포함됨 -->
<script src="https://cdn.tailwindcss.com"></script>

 

🚀 다른 곳에서 tailwind 사용하는 방법

Installation - Tailwind CSS

---

 

🔗 Tailwind 속성 별 문법

많이 쓰이는 것들을 위주로 정리함

🧩 width, height

너비, 높이 설정

• w-{size}: 너비 설정
• height-{size}: 높이 설정

size 팁
- w-1/2 : width 50%
- h-3/4 : height 75%
- w-[100px] : width 100px --> 원하는 값을 넣을 수 있음

 

---

🧩 font-weight

텍스트 굵기 설정

• font-thin: 100
• font-extralight: 200
• font-light: 300
• font-normal: 400
• font-medium: 500
• font-semibold: 600
• font-bold: 700
• font-extrabold: 800
• font-black: 900

---

🧩 text-color

텍스트 색상 설정

• text-{color}-{volume}: text-red-500

---

🧩 margin

margin 설정

• m-{size}: 모든 방향에 margin을 적용
• mt-{size}: 위쪽에만 margin을 적용
• mr-{size}: 오른쪽에만 margin을 적용
• mb-{size}: 아래쪽에만 margin을 적용
• ml-{size}: 왼쪽에만 margin을 적용
• mx-{size}: 수평 방향(왼쪽과 오른쪽)에 margin을 적용
• my-{size}: 수직 방향(위쪽과 아래쪽)에 margin을 적용

---

🧩 padding

padding 설정

• p-{size}: 모든 방향에 padding을 적용
• pt-{size}: 위쪽에만 padding을 적용
• pr-{size}: 오른쪽에만 padding을 적용
• pb-{size}: 아래쪽에만 padding을 적용
• pl-{size}: 왼쪽에만 padding을 적용
• px-{size}: 수평 방향(왼쪽과 오른쪽)에 padding을 적용
• py-{size}: 수직 방향(위쪽과 아래쪽)에 padding을 적용

---

🧩 space

자식 요소들 간의 간격을 설정

• space-x-{size}: 자식 요소들 간의 수평 간격을 설정
• space-y-{size}: 자식 요소들 간의 수직 간격을 설정

---

🧩 background-color

배경색을 설정

• bg-{color}: 배경색을 설정
• bg-opacity-{value}: 배경색의 불투명도를 설정

<div class="grid grid-cols-5 gap-2">
    <!-- aspect-squere: 가로 세로 1:1 정방형 -->
    <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>

 

---

🧩 shadow

그림자 설정

• shadow: 기본 그림자 효과를 적용
• shadow-sm: 작은 그림자 효과를 적용
• shadow-md: 중간 크기의 그림자 효과를 적용
• shadow-lg: 큰 그림자 효과를 적용
• shadow-xl: 매우 큰 그림자 효과를 적용

---

🧩 border

border와 관련된 설정

• border: 기본 테두리 설정 (1px solid)
• border-{size}: {size}px 두께의 테두리테두리 색상 설정:
• border-transparent: 투명한 테두리
• border-black: 검은색 테두리
• border-white: 흰색 테두리
• border-red-500: 빨간색 테두리테두리 스타일 설정:
• border-solid: 실선 테두리 (default)
• border-dashed: 점선 테두리
• border-dotted: 점선 테두리

---

🧩 rounded

모서리 둥근 정도 설정

• rounded: 기본 둥글기 (0.25rem) 적용
• rounded-sm: 작은 둥글기 (0.125rem) 적용
• rounded-md: 중간 둥글기 (0.375rem) 적용
• rounded-lg: 큰 둥글기 (0.5rem) 적용
• rounded-xl: 매우 큰 둥글기 (0.75rem) 적용
• rounded-2xl: 최대 크기 둥글기 (1rem) 적용
• rounded-full: 완전 둥글게 (원형) 적용
• rounded-t, rounded-r, rounded-b, rounded-l: 각각 위쪽, 오른쪽, 아래쪽, 왼쪽 모서리 둥글기 적용
• rounded-tl, rounded-tr, rounded-br, rounded-bl: 각각 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리 둥글기 적용

---

🧩 font

폰트 설정

• font-{value}: value로 입력한 폰트 적용

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

---

🧩 list

리스트 설정

• list-disc : ul과 같음
• list-decimal : ol과 같음

---

🧩 flex

flexbox와 관련된 설정

• flex: Flexbox 컨테이너로 설정합니다.
• inline-flex: 인라인 Flexbox 컨테이너로 설정합니다.
• flex-row: flex-direction - row
• flex-col: flex-direction - column
• flex-wrap: flex-wrap - wrap요소 정렬

---

🫧 justify-content

• justify-start: flex-start
• justify-center: center
• justify-end: flex-end
• justify-between:space-between
• justify-around: space-around

---

🫧 align-items

• items-start: flex-start
• items-center: center
• items-end: flex-end

---

🫧 align-self

• self-auto: auto
• self-start: flex-start
• self-end: flex-end

---

🫧 flex

• flex-1: flex: 1 1 0%
• flex-auto: flex: 1 1 auto
• flex-initial: flex: 0 1 auto
• flex-none: flex: none

---

🫧 basis

• basis-{size}: flex-basis 값 설정

---

 

🔗 반응형 웹과 tailwind css 연결

Breakpoint prefix Minimum width CSS
sm - @media (min-width: 640px) { ... }
md - @media (min-width: 768px) { ... }
lg - @media (min-width: 1024px) { ... }
xl - @media (min-width: 1280px) { ... }
2xl - @media (min-width: 1536px) { ... }

tailwind는 min-width:640px을 최소로 하고 있기 때문에
반응형 웹을 제작할 때 기본 스타일을 모바일로 잡아주는 것이 좋음

min-width: 768px 일 때 (태블릿, PC)

max-width: 767px 일 때 (모바일)

<!-- md:flex-row - min-width:768px일때 flex-row -->
<div class="flex md:flex-row flex-col border-4 border-red-300 m-3 mt-20">
    <div class="p-2 flex-1 border-4 border-blue-500 order-1">1 hello</div>
    <div class="p-2 flex-1 border-4 border-blue-500 order-0">2 hello</div>
    <div class="p-2 flex-1 border-4 border-blue-500 order-2">3 hello</div>
    <div class="p-2 flex-1 border-4 border-blue-500 order-3">4 hello</div>
</div>

---

 

✈️ 출처

한국경제신문 x 토스뱅크 풀스택 훈련
https://tailwindcss.com/