Tailwind 101

Font / Color

font-size

• text-사이즈

text-xs
text-sm
text-base
...
text-6xl

font-color

• text-색상-농도

text-black-100

• 농도는 100~900

font-weight

• font-굵기

font-bold
fong-light
...

Custom font

기본폰트

• font-sans / font-serif 등등

커스텀폰트

• @import 를 css 최상단에 적용
• extend에 추가

fontFamily: {
	body: ['Nunito']
}

• font-body 로 Nunito 폰트를 사용 가능하다.

---

Margin / Padding

• 패딩
• p-크기

p-1
p-2
p-[100px]
py-3 // y방향 패딩
px-2 // x방향 패딩
pt-1 // 윗쪽 패딩

• 마진은 p를 m으로 바꾸면 된다.

---

border

• border-0 : 없음
• border-2 : 2px border
• 위 경우처럼 적을시 0, 2, 4, 8 만 가능
• 혹은 border-[10px] 과 같이 JIT 기능 사용 가능.
• border-t-1 : 윗쪽 1px border // 숫자 없으면 자동 1px

color

• border-색상-농도

style

• border-스타일

border-radius

• rounded-굴곡
• rounded-위치-굴곡

---

Tailwind Config

• 위와 같이 지정시

text-primary

• primary의 색상이 적용된다.

---

Background

color

• bg-색상-농도

---

Flexbox

• flex / flex-row 로 적용
• justify-위치 / items-위치 로 정렬 가능
  • justify : 축 방향
  • items : 축과 수직 방향

Height / Width

• h-크기

h-1
h-[100px]

• w-크기

w-1
w-[100px]

---

MediaQuery

• sm : 휴대폰

• md : 태블릿

• lg : 데스크탑

• xl : 큰 데스크탑

• sm > md > lg > xl 순으로 적용된다. ( min-width )

sm:bg-green
// 작은 기기에선 백그라운드 컬러가 green

---

@apply

.card {
	@apply bg-white rounded overflow-hidden shadow-md relative;
}
- card 클래스 적용시 위 모든 css가 적용된다.

---

Hover

• hover:text-gray-800
• hover시 스타일 지정 가능

---

Transition

• transition 클래스 적용
• ease-out / ease-in 클래스 적용
• duration-길이 클래스 적용
• hover 등으로 생기는 변화가 duration 길이만큼 적용된다.

Transform

• transform 클래스 적용
• hover:scale-125 hover시 125%로 크기가 변경됨
• transition / duration / ease-out / ease-in 가능