tailwind

#최적화하기
  파일크기를 최소화하기 위해서 purge 사용 → 프로덕션으로 빌드할 때 여기에 설정된 파일에서 사용되지 않는 모든 클래스는 제거됨 

//tailwind.config.js
module.exports = {
	purge: ['.?src/**/*.{js,jsx,ts,tsx}'],
    ...
}

[자주 사용할 문법]

w-12 높이 12

h-10 넓이 10

text-white 

bg-gray-400 백그라운드 회색 400

text-blue-200 텍스트 파랑 200

 

#크기

‘sm’ : ‘640px’ //@media(min-width: 640px)

‘md’ : 768px’ //@media(min-width: 768px)

‘lg’ : ‘1024px’ //@media(min-width: 1025px)

‘xl’ : ‘1280px’ //@media(min-width: 1280px)

‘2xl’ : ‘1536px’ //@media(min-width: 1536px)

 

#여백

p-3 (전체 방향 3간격)

px-3 (가로축 방향 3간격)

py-3 (세로축 방향 3간격)

pr-3 (오른쪽 3간격)

pl-3 (왼쪽 3간격)

pt-3 (위 3간격)

pb-3 (아래 3간격)

 

m-3 (전체 방향 3간격)

mx-3 (가로축 방향 3간격)

my-3 (세로축 방향 3간격)

mr-3 (오른쪽 3간격)

ml3 (왼쪽 3간격)

mt-3 (위 3간격)

mb-3 (아래 3간격)

 

#폰트

폰트 패밀리 : font- : sans, serif, mono

폰트 크기 : font- : xs, sm, base, lg, lx, 2xl, 3xl .....

폰트 웨이트 font- : thin, light, normal, semibold, bold

 

#모서리라운드

<div class=“rounded …”></div>

<div class=“round-md …”></div>

<div class=“round-lg …”></div>

<div class=“round-full …”></div>

 

#마우스오버

hover : ‘설정할내용’