tailwind 문법

테일윈드는 utility-classes라는 것으로 html에 디자인을 한다. 2017년에 처음 등장했다. 

전통적으로 우리는 css로 웹 스타일링을 해왔는데...

테일윈드는 그냥 html 요소에다가 클래스 이름으로 디자인을 주는 기능이다.

뭔가 디자인 속성을 줄임말처럼 쓰는 독특한 문법이 있음.

이게 좀 html을 복잡해보이게 하고 뭐하는 짓인가 싶지만..
장점들이 있으니까 쓰는 거겠죵

 

 

 

tailwind로 개발할 때의 대표적인 장점은 다음과 같다.

1. 클래스 이름 뭘로 할지 고민하지 않아도 된다. 

2. css파일의 용량이 줄어든다. utility를 쓰면 모든 것을 재사용할 수 있기 때문에 새로운 css를 쓸 필요가 없다. 

3. 쉽게 변화를 줄 수 있다. 일단 css는 쓰는 당시에는 어디에 적용되는 건지 그렇게 명확하게 와닿지 않는데, html안에 있는 클래스 이름은 너무 local한 거라.. 다른 요소들을 망가뜨릴 걱정을 안하고 편하게 속성을 줄 수 있다. 

"아니 그럴 거면 그냥 inline style을 쓰지 그러냐"라는 반박이 있을 수 있다. 

 

 

재반박: 

1. (중요) tailwind는 인라인스타일보다 제약이 많아서 predefined된 디자인 시스템을 따르는 것에 가깝다.

utility classes에 쓰는 문법은 이미 다 정해져있기 때문에 tailwind를 쓰면 전보다 훨씬 생산적이고 시각적으로 일관성 있는 UI를 만들 수 있다.

2. 인라인 쿼리에서는 쓸 수 없는 미디어 쿼리를 쓸 수 있다. --> tailwind의 responsive utilities로 가능하다.

3. hover, focus 등의 state... 인라인 스타일에서는 이 state들을 지정할 수 없었지만 tailwind는 state variants를 통해서 가능하다.

 

(사용 예시)


<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-slate-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

그렇다면 tailwind의 단점은 무엇일까?

유틸리티 우선 접근 방식은 유지보수성이 낮을 수도 있다고 한다.

이를 보완하기 위해서 자주 사용되는 utility 조합을 관리할 수 있다. (컴포넌트로 추출하기, 에디터와 언어 기능 활용하기)

 

#추가1

 

states 추가하기.

<button class = "bg-sky-500 hover:bg-sky-700 ...">이런 거?

 

 

#추가 2

 

Breakpoint prefix Minimum width CSS
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) { ... }

 

 

# 추가 3

위의 재반박 근거 1과 관련해서. 
tailwind는 주로 사용되는 css 속성을 모아두고 그 중에서 값을 골라서 사용할 수 있도록 만들어 놓은? 문법을 가지고 있다.
예를 들어 font-size의 경우에는 'xs', 'sm', 'baxe', 'lg', 'xl', '2xl', ...'9xl'의 크기만을 지원한다. 
일반적인 css에서는 아무 숫자나 올 수 있는.. 무한한 경우의 수를 가진 것과 차이가 있다. 


tailwind에서는 미리 지정된 속성 이외의 값을 쓰기 위해서는 대괄호 안에다가 arbitary value로 입력할 수 있다. 근데 이렇게 하면 문법이 복잡해지기 때문에 arbitary 속성을 미리 지정해 둔 테마를 만들어서 사용할 수도 있다. 
만약 px 단위로 디자인 요구사항을 충족해야 하는 경우라면, 다음과 같이 미리 px에 대한 프리셋을 등록해 놓으면 된다.

 

 

 

# 추가 4

 

장점: 
1. 유연성을 증가시켜서 커스터마이징을 쉽게 할 수 있는 오픈 프레임워크이다. 
2. tailwind는 css프레임워크이므로, react말고도 css를 사용하는 아무 웹 사이트에서나 사용할 수 있다. 
3. 성능이 좋다. 번틀 크기가 가벼워서 로딩 속도를 빠르게 한다. 
테일윈드는 순수한 css 프레임워크이기 때문에 전통적인 javascript 프레임워크보다 빨리 로딩된다. 반면 Material UI는 JavaScript 프레임워크이므로, 웹사이트를 로드할 때마다 전체 Material UI JavaScript 프레임워크가 로드되어야 한다. 

단점:
1. 테일윈드는 앱에서 사용되지 못하고, 웹 사이트에서만 사용될 수 있다. 
만약 크기가 다른 디바이스별로 커스터마이징하고 싶다면 각 장치별로 버튼을 여러 개 만들고 각각 수동으로 개발해야 한다. 
2. 유연한만큼 모든 것을 직접 개발해야 한다. 
3. 테일윈드에도 미리 만들어진 컴포넌트가 있지만 무료가 아니다.