1. Tailwind CSS
이성수

2. 목차
01. 주제선정 이유
02. 소개
03. 특징 - 장단점
04. 관련 라이브러리들
05. QnA

3. 주제 선정 이유
• 2023 현재 가장 트렌디한
CSS 프레임워크라고 생각이 들어서
• 대부분의 강의들이 TailwindCSS를 이용해서

4. 소개
- HTML을 벗어나지 않고도 최신 웹사이트를 빠르게 구축할 수
있다
- 유틸리티 우선 프레임워크

5. 특징 - 장점
• css 클래스명에 대한 고민 x
• 인라인에서 빠르게 작업
• 다양한 modifier(ex: hover, 미디어쿼리 등)
• 캐시
• 빠른 빌드시간 및 CSS 파일 크기

6. 특징 - 단점
• 가독성
• 유지보수
• 러닝커브

7. 관련 라이브러리
컴포넌트 라이브러리
• chakra-ui
• daisyUI
• shadcn/ui - (라이브러리는 아님)
유용한 라이브러리
- clsx
- tailwind-merge

8. Chakra UI
흔한 컴포넌트 라이브러리
• TailwindCSS를 같이 사용할 수 있다.

9. Daisy UI
TailwindCSS 기반 컴포넌트 라이브러리
• 컴포넌트 형태가 아닌 class name을 사용
(tailwind와 사용법 동일)
• 다양한 디자인이 있다.
• TailwindCSS의 확장판 느낌

10. RedixUI, TailwindCSS를 사용하여 빌드 된 재사용 가능한
컴포넌트
• 재사용 가능한 컴포넌트들의 모음집
• 라이브러리 x
• npm으로부터 자유롭다.
• 복사 -> 붙여넣기 -> 사용
• Typescript로 작성
• React를 지원하는 모든 프레임워크에서 사용 가능

11. clsx
className을 조건부로 렌더링할 때 유용한 라이브러리
• string, objects, array 등으로 조건 사용 가능

12. tailwind-merge
ClassName을 충돌없이 merge 해주는 라이브러리
• 특정 tailwind style만 변경하고 싶을 때 사용.

13. clsx + tailwind-merge
트렌디한 유틸 함수 만들기.
• 최근 shadcn/ui로부터 유명해진 유틸 함수.

14. QnA
• https://tailwindcss.com/
• https://chakra-ui.com/
• https://daisyui.com/
• https://ui.shadcn.com/
• https://github.com/lukeed/clsx
• https://github.com/dcastil/tailwind-merge