오늘은 Framework 중 Tailwind CSS에 대해 알아보는 시간을 가지자 :)

1. 정의

• Utility-First를 지향하는 CSS 프레임워크

🤔 Utility-First가 뭐지?
: Utility-First란 미리 세팅된 유틸리티 클래스를 활용하여 인라인에서 스타일링하는 것이다!

🤔 엥? 유틸리티 클래스는 또 뭐야?
: 유틸리티 클래스란 아래와 같이 딱 하나의 기능만 하는 매우 적은 양의 CSS 코드를 담고 있는 클래스를 의미한다!

.rounded {
  border-radius: 0.25rem;
}

• 즉, 저번에 다뤘던 Bootstrap처럼 미리 정해져있는 클래스명들을 인라인 스타일로 지정하여 쉽게 디자인할 수 있게 만들어주는 CSS 프레임워크이다!

2. 장점

• CSS를 위한 클래스의 이름을 짓지 않아도 됨
  : 이미 만들어진 클래스명들로 스타일을 적용할 수 있으므로 클래스명을 고민하지 않아도 됨. 아마 개발자들이 Tailwind CSS를 좋아하는 가장 큰 이유일 듯 (나도 극공감 👍)
  
  
• 쉽게 반응형 페이지를 구현할 수 있도록 지원
  : 기본적으로 제공하는 BreakPoint가 존재하기 때문에 반응형 디자인을 쉽게 구현할 수 있음
  
  
• CSS 파일을 작게 유지할 수 있음
  : 보통은 컴포넌트를 하나 생성할 때 마다 CSS 파일을 생성하지만 Tailwind CSS를 이용하면 인라인으로 스타일을 지정할 수 있기 때문에 프로젝트 관점에서 보았을 때 CSS 파일 용량이 상대적으로 늘어나지 않음
  
  
• 로우 레벨의 스타일 제공
  : 아주 낮은 로우 레벨의 스타일(radius, color 등)을 제공하므로 내가 원하는 디자인을 구현하기 편함
  cf)Bootstrap은 버튼, 표처럼 해당 요소 전체가 디자인 된 스타일을 제공하여 내 입맛에 맞는 디자인을 구현하는 데 한계가 있음
  
  
• 쉽고 자유롭게 커스터마이징 가능
  : 다른 프레임워크들보다 디테일한 부분까지 쉽게 커스터마이징 가능
  
  
• 다크 모드 지원
  : 스타일 지정 시 dark:라는 prefix를 적고 지정하는 스타일은 다크 모드 일 때 자동으로 적용됨
  
  
• 안전한 수정
  : 만약 기존처럼 CSS를 변경하면 앱 전체에 문제가 발생할 경우가 있음 (CSS는 전역적이므로!)
  : 하지만 Tailwind CSS를 사용하면 인라인으로 지정한 해당 요소의 스타일만 수정하는 것이므로 다른 곳에 영향을 끼칠 걱정이 없음

3. 단점

• 배우고 익숙해 지는 데 시간이 걸림
  : 정해진 클래스명들을 공부하고 익숙해져야 하므로 학습하는 데 시간이 소요됨
  
  
• 낮은 가독성
  : 인라인으로 클래스명들을 쭉 나열해야 하기 때문에 코드의 가시성이 떨어짐
  ➡️ ❗️Headwind와 같은 플러그인(정렬 기능)을 활용해 가독성을 높일 수 있긴 함
  
  
• 미리 정의된 스타일 시트(CSS 파일)의 용량이 큼
  : 파일이 사전에 구축된 CSS 클래스들을 모두 포함하기 때문
  cf) 빌드된 CSS는 실제로 코드에 사용한 클래스들만 포함
  
  
• CSS 속성들의 우선순위 문제
  - Tailwind CSS는 정의한 순서에 따라 스타일을 구성함
  - 아래 코드처럼 작성하면 보통은 blue보다 red가 뒤에 있으므로 red가 적용되지만 Tailwind CSS에서는 제일 앞의 blue가 적용됨
  - 따라서 JS를 이용해 조건을 달아 스타일을 지정해야 할 때 제대로 적용이 안 될 수 있음

여기서 의문이 들었다.
🤔 인라인으로 작성하는 CSS와 Tailwind CSS는 큰 차이가 없는 것 같은데?
그래서 찾아보았다!

4. CSS 인라인 스타일과의 차이점

① 인라인 스타일에서 :hover, :focus와 같은 pseudo class(의사 클래스)의 사용가능 유무

• Tailwind CSS : 사용 ⭕️

• CSS 인라인 스타일 : 사용 ❌

② 인라인 스타일에서 ::before, ::after와 같은 pseudo element(의사 요소)의 사용가능 유무

• Tailwind CSS : 사용 ⭕️

• CSS 인라인 스타일 : 사용 ❌

③ 인라인 스타일에서 반응형 디자인 구현가능 유무

• Tailwind CSS : 구현 ⭕️

• CSS 인라인 스타일 : 구현 ❌

이렇게 찾아보고 정리해보니 확실히 CSS 인라인 스타일보다 Tailwind CSS가 구현할 수 있는 범위가 넓군 👍

❗️ 만약 Tailwind를 맛보기로만 잠깐 써보고 싶은데 설치하긴 번거롭다?!
그럴 땐 Tailwind Play!

5. Tailwind Play로 맛보기

• Tailwind CSS 공식 사이트에서 제공하는 자체 온라인 코드 편집기

• Tailwind Play에서 바로 Tailwind CSS를 사용해 웹페이지를 만들어 볼 수 있음

• HTML 탭 : HTML 코드 작성

• CSS 탭 : 추가적인 CSS 작성

• Config 탭 : Tailwind CSS 설정

• Share 버튼 : 버튼 클릭 시 나오는 URL로 다른 사람에게 내가 만든 Tailwind 코드와 웹페이지를 공유할 수 있음

• 우측 상단
  - Tailwind CSS의 버전을 변경할 수 있는 버튼
  - 화면 배치를 변경할 수 있는 옵션 버튼
  - 다크 모드 / 라이트 모드 전환 버튼

나도 잠깐 실제로 사용해보니 손쉽게 Tailwind를 사용해 볼 수 있어 너무 좋은 것 같다!
설치하는 게 부담스럽게 느껴지는 사람에게 잠깐 맛보기로 딱인 듯 😀

6. 느낀점

처음에 Tailwind CSS를 들었을 땐 '이게 뭐지?' 싶었다. 이전에 다뤘던 Bootstrap은 사용해 본 적은 없었지만 들어는 봤었기 때문에 큰 부담감이 없었다.

반면에 Tailwind CSS는 정말 처음 들어본 프레임워크라 서치하기 전에 조금 부담이 되고 겁도 조금 났다.

하지만 찾아보다보니 Tailwind CSS도 Bootstrap와 비슷하게 프론트엔드 개발자들에게 디자인에 대한 부담을 덜어주고자 만들어진 프레임워크이며 사용 매커니즘이 비슷한 것 같아 부담감은 사라졌다! (물론 두 프레임워크의 차이는 당연히 존재한다!)

음.. 아직까지 Tailwind CSS를 본격적으로 사용해 보진 않았지만 지금까지 알아본 바로는 개인적으로 Bootstrap보다 나에게 잘 맞을 것 같다는 생각이 든다.

왜냐면 저번 시간까지 Bootstrap을 실습하면서 커스터마이징하기 쉬운 편이 아닌 게 불편함으로 크게 다가왔기 때문이다.

물론! 개인 작업 환경에 따라 선호하는 프레임워크가 갈리겠지만 나는 디자이너가 있는 환경이라 Bootstrap은 실제로 내가 작업할 때 적용하기 힘들 것 같았다.

반면 Tailwind CSS는 디자이너의 디자인도 충분히 구현할 수 있으면서 동시에 클래스명을 정하지 않아도 되는 세상 너무나 큰 이점이 있어서 벌써 너무 마음에 드는 것 같다 😀

다음 시간부터 직접 사용해보면 또 어떨지 모르겠지만 우선은 굉장히 끌리는 프레임워크인 것 같다 :)