[React] Tailwind CSS

강의에서 배운 css 관련 툴 3가지를 npm trend를 통해 비교해보았다.

국내에서는 Tailwind CSS보다 Styled components를 더 많이 쓰는 것 같긴 한데, 일단 npm trend에서는 Tailwind CSS는 상향세인 반면 Styled components는 최근의 추이가 하향세로 보인다.

내가 궁금해서 알아본 트렌드는 여기까지 하고, 이제 Tailwind CSS에 대해 알아보자.

Tailwind CSS의 정의
Tailwind CSS 는 오픈소스 CSS 프레임워크이다. 이 라이브러리의 주요 특징은 Bootstrap 과 같은 다른 CSS 프레임워크와 달리 버튼이나 테이블과 같은 요소에 대한 일련의 미리 정의된 클래스를 제공하지 않는다는 점이다. 대신, 혼합 및 일치를 통해 각 요소에 스타일을 지정하는 데 사용할 수 있는 "Utility" CSS 클래스 목록을 만든다.

출처: https://en.wikipedia.org/wiki/Tailwind_CSS

그렇다면 Utility-First는 무엇일까?

Utility-First 개념은 Tailwind의 주요 차별화 기능이다. 제한된 세트의 원시적인 유틸리티들로부터 복잡한 컴포넌트들을 구축하는 것이다. (나는 미리 정해진 유틸리티 클래스로 html 안에서 CSS를 작성하는 것이라는 의미로 받아들임.)

Tailwind CSS 설치과정

https://tailwindcss.com/docs/installation

여기로 들어가면 상황과 경우에 따라 어떤 코드로 어떻게 설치해야 하는지 아주 상세히 보여주고 있으니 내가 구구절절 설명하는 것보다 여기 들어가서 본인이 사용하는 세팅에 따라 설치하는 게 더 편할 것 같다.

Tailwind CSS의 장점

• CSS를 내가 직접 작성하지 않아도 된다.(편의성) ➡️ 개발 속도의 향상
• 체계적이고 일관적인 디자인의 사용 가능

Tailwind CSS의 단점

• tailwind CSS를 능숙하게 사용하기까지 적응기간 필요
• 코드가 길어지고 보기에 깔끔하지 않음
• CSS의 파일 크기가 커질 수 있음.

VSCode 추천 익스텐션

Tailwind CSS IntelliSense 까시면 자동완성이 됩니다.
깔았는데도 뭔가 잘 안된다?

VS Code Settings

"files.associations": {
  "*.css": "tailwindcss"
},

"editor.quickSuggestions": {
  "strings": "on"
}

setting.json 들어가셔서 이거 복붙해보세요 👍

---

여기까지 제가 알아본 tailwind CSS에 대한 내용입니다.

혹시 잘못된 부분이 있다면 언제든 저에게 알려주세요.
감사합니다~!