[CSS] 테일윈드 CSS(Tailwind CSS)

// 테일윈드 CSS, Tailwind CSS

- 유틸리티 우선 방식의 CSS 프레임워크

- html 요소에 클래스를 추가함으로써 스타일을 단계적으로 적용하여 전체 컴포넌트를 스타일링한다.

- 컴포넌트 기반의 접근 방식을 취하지 않고, 빌딩 블록(building block) 스타일의 클래스를 제공한다.

- pt-2 와 같은 사전에 정의된 css 규칙을 사용할 수 있다.

- 공식 문서: https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

---

// 장점

- 다양한 화면 크기에 대응하는 클래스가 포함되어 있어서 반응형 디자인을 쉽게 구현할 수 있다.

- tailwind.config.js을 통해 커스텀하기 용이하다.

- 프로젝트 전반에 걸쳐 일관된 스타일을 유지할 수 있다.

- 사용법이 어렵지 않다.

---

// 단점

- 많은 유틸리티 클래스를 사용하기 때문에 코드가 복잡해지고 가독성이 떨어질 수 있다.

- 유틸리티 클래스로 해결할 수 없는 디자인의 경우 전통적인 css를 사용해야 한다.