[tailwind] tailwind 적응기

시작하기 전 잠깐의 tmi를 풀어보자면..

지금까지 vuetify, bootstrap, tailwind, antdesign 등등 써보면서, 

개인적으로 최애는 tailwind가 될 것 같습니다.

미리 좋은 점에 대해 소개드리자면,
css custom이 많이 편합니다. ㅠㅠ 

단점은 js기능을 많이 지원하지 않는데, 예를 들어 pagination이라던가..

하지만 css custom이 많이 편한점이 정말 맘에 듭니다!!

왜 이제서야 안거니.. 내 최애 css 프레임워크 등극이다..

 

각설하고 tailwind 적용법에 대해 소개하겠습니다.

---

1. tailwind란?

utility-first 컨셉의 css 프레임 워크입니다.

속성이 중시됨으로, 미리 만들어진 속성에 대한 클래스들이 있고 이를 조합하여 컴포넌트를 구성합니다.

tailwind class 명을 보시면, 각 속성에 대해 직관적으로 표현이 되어있어서 클래스명을 보시면 어떤 역할을 하는지 파악 가능합니다.

 

 

vuetify나 ant design은 하나의 컴포넌트 단위로 css 프레임워크를 제공하고 있기 때문에 tailwind와 코드 스타일이 다릅니다. 

예시를 살펴보겠습니다.

 

1) tailwind

avatar를 구성하기 위해 위의 코드를 작성하였습니다.

img에 대한 className을 보겠습니다. 

rounded-full, h-20, w-20 .. 클래스들이 추가되어 있습니다. 

이는 tailwind가 미리 만들어서 제공하고 있는 클래스들입니다. 

또한, 클래스명은 css에 대해 어느정도 작업해보신 분들은 쉽게 유추 가능하도록 만들어졌습니다.

이렇게 하나하나 직접 클래스명을 추가하여 avatar를 만드는 형태입니다.

 

2) ant design

두번째로 ant design으로 작성한 코드에 대해 살펴보겠습니다.

ant design에서 avatar를 구성할 때 css보다 역할에 대해 중점을 두어 <Avatar>라는 코드를 import하고, 삽입하고 있습니다.

추가적으로 미리 지정한 size, icon 등등을 넣어 Avatar라는 기능을 꾸며주고 있습니다.

ant deisgn같은 css 프레임워크는 커스텀이 많이 들어가지 않을 경우 tailwind보다 더 편할 수 있습니다.

tailwind처럼 하나하나 지정하는 것 말고 <Avatar> 라는 코드 한줄만 넣으면 되니깐요!

그래서 저는 ant design, vuetify를 쓸 때, 참 편하다고 생각을 했습니다. 

하지만 개발을 하다가 css custom하기가 너무 불편하다고 느꼈습니다. 

이미 avatar에서 기본적인 css가 지정되어 있어 custom하려면 이미 지정된 css를 오버라이드 하는 형태로 진행해야 하기 때문입니다ㅜ

 

 

---

 

2. tailwind의 장점 vs 단점

1) 장점

• 이미 정의된 class를 추가하여 자유롭게 css 구성 -> class naming에 대한 걱정은 안하셔도 됩니다.
• 쉬운 반응형 처리 : sm, md, lg, xl, 2xl
  만약 mobile일때 text size를 sm으로 하고 web일때, text-base로 하고 싶으면 간단히 아래의 코드로 작성해주시면 됩니다.
  class=
  "text-sm sm:text-base"
• customize 가능
  tailwind.config.js 파일에서 직접 class에 해당하는 속성을 변경하실 수 있습니다.
  예를 들어 tailwind의 sm의 기준과, 자신의 프로젝트의 sm기준이 다르다면 
  tailwind.config.js에서 customize해주시면 됩니다.
  

  

 

 

2) 단점

• 하나의 태그에 class가 길어질 수 있다.(자주 사용하는 component들은 꼭 공통 컴포넌트로 빼놓읍시다.ㅋㅋ)
• class명에 대한 익숙함이 필요하다. (매번 tailwind 페이지에 들어가며 필요할 때마다 속성 확인합니다.ㅋㅋ)

 

---

참고자료

https://tailwindcss.com/

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

 

https://wonny.space/writing/dev/hello-tailwind-css

Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log

---

 

다음번에는

tailwind 설치 및 setting하는 법에 대해 작성하겠습니다.

tailwind가 처음에 class에 너무많은 애들을 넣어서 안이쁘다고 생각했지만..(길어진다는 것에 대한 거부감이 있었네여) 

그럼에도 불구하고~ 지금까지 사용한 녀석들 중 개발하기에 가장 만족스러운 css 프레임워크인 것 같습니다.