tailwind css 사용 설명서

프론트 앤드와는 담쌓고 디자인과는 거리가 먼 나에게 tailwind css 는 한줄기 빛 이었다. 

세상에 복잡하게 설정 할 필요도 없이 그냥 class 에다가 쭉 적어 넣기만 하면 된다구?

하지만 그 편한 사용법에도 당연히 문법이 있었으니..

 

tailwind css 의 문법들을 간단히 소개해 보고자 한다.

---

tailwind css 횸페이지는 https://tailwindcss.com/ 이다.

Get started 를 누르면 기본적인 설치 방법들이 나오는데 

따라하면 누구나 쉽게 설치 할 수 있다.

 

---

기본 사용법

<htmltag class="tailwind">

예시

<div class="w-12 h-10 text-white bg-gray-400"></div>

class의 "" 안에 있는 내용이 모두 tailwindcss 의 명령어다.

간단히 설명하자면

w-12 는 높이는 12로 설정

h-10 은 넓이는 10으로 설정

text-white 는 글자 색을 흰색으로 설정

bg-gray-400 은 백그라운드를 회색 400 정도로 설정 이다.

 

이런식으로 원하는 설정을 쭉 늘어 놓으면 되는데, 뒤의 설정은 앞의 설정을 덮어쓰니 그것만 조심하면 된다.

---

길이 설정

w : [넓이] 뒤에 적당한 숫자를 넣어주면 된다. 미리 정해진 숫자가 있으니 스니팻을 이용하면 편하다.

w-1/2 w2/3 w-full 같이 비율로 넣어줄 수도 있다.

ex) w-1 w-2 w-12 w-64

h : [높이] 뒤에 적당한 숫자. 역시 미리 정해진 숫자가 있다. 

역시 h-1/2 h-full 처럼 비율로 넣어줄 수 있다.

ex) h-16 h-52

 

색상 설정

기본적인 색상 파레트는 다음 링크에 나와 있다.

https://tailwindcss.com/docs/customizing-colors

Customizing Colors - Tailwind CSS

위의 예시에서 처럼 text-'색상이름'-'숫자' 혹은 bg-'색상이름'-'숫자' 형식으로 사용하면 되는데

예시를 들면 다음과 같다.

<div class="w-full h-10 bg-red-400 text-blue-200">text</div>

 

디스플레이

flex : css의 그것과 같다.

inline : css의 그것과 같다.

inline-block : css의 그것과 같다

inline-flex : css의 그것과 같다.

 

레이아웃

 

tailwind css 의 미디어 쿼리를 사용 하기 위해서 레이아웃 별로 설정을 할 필요가 있다.

설정 방법은 

['사이즈' : '설정' '사이즈' : '설정' '사이즈' : '설정']

방식으로 앞에서 부터 작은 사이즈를 설정하고 앞에서 설정한 항목은 뒤의 설정에서 바꾸지 않는한 유지된다.

간단히 예를 들면

<div class="sm:hidden md:flex lg:inline-block"></div>

위와 같이 화면 크기 별로 상태를 설정해 줄 수 있다.

크기는 다음과 같다.

     'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }

 

여백 설정

 

여백은 p (패딩) m(마진)으로 조절 할 수 있는데,

p-'숫자' 형식 m-'숫자' 형식이다.

 

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="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-full ..."></div>

 

그림자 넣기

<div class="drop-shadow-md ...">
  <!-- ... -->
</div>
<div class="drop-shadow-lg ...">
  <!-- ... -->
</div>
<div class="drop-shadow-xl ...">
  <!-- ... -->
</div>
<div class="drop-shadow-2xl ...">
  <!-- ... -->
</div>

 

마우스 오버시 설정

 

hover : '설정을 적어준다.'