[Tailwindcss] 1. tailwind CSS란?

tailwind CSS 로고

요약
  1. Tailwind CSS란?

  2. Tailwind CSS 장점

---

상세
  1. Tailwind CSS란?

정의 : Utility-First CSS Framework로, HTML을 벗어나지 않고 모던 웹사이트를 빠르게 구축하는 CSS
- CSS 파일을 별도 작성할 필요 없이(별도 작성도 됨) HTML 안에서 Utility Class를 사용한다.
- 'Utility-First CSS Framwork' : 미리 정의된 작은 여러 스타일 클래스들을 조합하여 원하는 디자인 방식을 만드는 것 

  2. Tailwind CSS 장점
[1]. 일관된 스타일 제공
- 따라서, 프로젝트 전반에 동일한 스타일 규칙을 재사용할 수 있음!
- 코드가 분산되어 있음에도 동일한 클래스를 사용하기 때문에 모든 요소가 통일된 디자인을 유지할 수 있음
→ 유지보수와 협업간의 용이성 ↑

 

[2]. 성능 최적화 (Optimizing for Production)

- 프로젝트에 실제로 사용한 CSS만 포함하도록 최적화를 한다.

- 사용되지 않은 CSS는 미포함하기 때문에 최종 CSS 크기가 매우 작아진다.

(실제로, Neflix Top10 페이지는 tailwind CSS를 사용했기에 6.5kB 크기로 줄일 수 있었다고 한다.)

→ code splitting (코드 분할)에서 자유로워질 수 있다. (필요없는 CSS도 페이지마다 다운로드해서 초기 로딩속도 ↓)