TailwindCSS란

// class 안에 들어가 있는 속성들이 유틸리티 클래스
<div class="flex w-1/2 justify-center rounded-lg border-2 border-red-500">안녕하세요</div>

Tailwind의 이점

1. 맞춤 CSS를 덜 작성한다. HTML에 직접 클래스에 적용하여 요소의 스타일을 지정할 수 있다. 이런 방식으로 유틸리티 클래스를 사용하면 CSS를 작성하지 않고도 사용자 정의 디자인을 작성할 수 있다.
2. CSS파일을 작게 유지한다. 만약 styled-componets와 같이 js 파일 안에서 CSS를 작성하지 않는 경우(CSS-in-JS) 프로젝트에 컴포넌트를 하나 생성할때 마다 같이 CSS 파일을 생성해야하지만 HTML의 클래스에서 스타일을 지정할 수 있기 때문에 프로젝트에 CSS파일이 적게 할 수 있다.
3. 빠른 빌드 시간 및 CSS 파일 크기 PurgeCSS 최적화와 관련있다. 이것을 사용하여 HTML을 스캔하고 사용하지 않는 클래스를 제거하여 파일 크기를 상당히 줄일 수 있다.
4. 클래스 이름을 만들 필요가 없다. styled-components나 sass를 사용할때 이름을 정하는 것은 꽤 어려운 일이었다. Tailwind를 사용한다면 이름을 붙여줄 필요가 없이 스타일 지정이 가능하다. 따라서 특정 스타일 및 구성 요소에 대해 완벽한 클래스 이름을 선택하기 위해 고민할 필요가 없다.
5. 안전한 수정 기존 접근 방식을 사용해 CSS를 변경하면 앱 전체에 문제가 발생할 경우가 있다. 하지만 HTML의 유틸리티 클래스는 로컬이기 때문에 자기 의외에 다른 곳에 영향을 끼칠 걱정 없이 수정이 가능하다.
6. 반응형 Tailwind는 기본적으로 모바일 우선 접근 방식을 사용한다. 유틸리티 클래스를 사용할 수 있어 복잡한 반응형 레이아웃을 더 쉽게 자유롭게 구축할 수 있다.
7. 캐시 CSS 파일을 변경하지 않고 마크업에서 동일한 클래스를 계속 사용하기 때문에 디자인을 변경하기 위해 CSS 캐시를 파괴할 필요가 없다. -> 유저가 CSS파일을 자주 다시 다운로드할 필요가 없다.
8. 커스터마이징 플러그인을 사용해서 CSS 대신 JS를 사용해 사용자의 스타일 시트에 삽입할 새 스타일 등록이 가능하다. 다크 모드도 간단하게 구현이 가능하다. 브라우저의 session 공간에 들어가서 dark인지 아닌지 상태를 확인하며 class에 dark: 를 붙이면 dark 모드일 때의 스타일 정의가 가능하다.

단점

2. 러닝커브 및 적응 CSS를 베이스로 만들어졌지만 사용하기 위해선 tailwind의 방식을 따라야 하기 때문에 적응하기 힘들 수 도 있다.
3. 스타일 동적 적용 styled-components와 비교해서 상태에 따라 style을 지정하는 것이 어렵다. 필요한 경우 util 함수를 만들어서 사용했다.

javascript
1export function cls(...classNames: string[]) {
2  return classNames.join(" ");
3}