Tailwind CSS의 CDN과 CLI의 차이

Tailwind CSS의 CDN 방식과 CLI 방식으 차이를 알아보자.

CDN 방식

Tailwind CSS를 처음 학습해보는 상황이나 아주 간단한 프로젝트에 적합한 방식이다.
HTML에 <script src="https://cdn.tailwindcss.com"></script>만 넣으면 Tailwind CSS를 사용해볼 수 있다.

장점
설치 필요 없이 바로 사용이 가능하기 때문에 간단한 테스트를 진행하거나 프로토타입 작업, 개인 실습 등에 유용하다.

단점
최적화 되어있지 않은 모든 Tailwind CSS 유틸리티가 다 로드되기 때문에 CSS 파일의 크기가 크다.
taillwind.config.js와 같은 커스터마이징이 불가하며, 별도의 빌드 과정이 없어 실제 서비스로 사용하기엔 성능이 저하될 수 있다.

CLI 방식

실제 프로젝트에 많이 사용하고 배포에 용이하다.
npm install tailwindcss를 이용하여 설치 후 CLI로 빌드하면 필요한 클래스만 추출할 수 있다.

장점
tailwind.config.js를 이용하여 색상이나 폰트, breakpoints 등을 커스터마이징 할 수 있다.
사용하지 않는 CSS는 자동으로 제거되어 CSS 용량을 최소화 할 수 있다.
빌드 파이프라인에서 PostCSS, Autoprefixer 등을 연동하여 사용할 수 있다.
로딩이 빠르고 유지보수에 용이하기 때문에 실무 프로젝트에 적합하다.

단점
설치하고 빌드하는 과정이 필요하기 때문에 Node.js, npm 설치가 필수다.
처음 설정하는 방법이 CDN보다 복잡하다.

두 방식의 차이

위에 작성한 두 방식의 차이를 표로 비교해보자

구분	CDN	CLI
설정 난이도	매우 쉬움	중간(설치와 빌드 필요)
사용 목적	빠른 테스트, 실험, 초기 학습	실제 프로젝트, 배포
CSS 크기	매우 큼(Taiwind CSS 전체 유틸리티 포함)	최소화(사용한 클래스만 포함)
커스터마이징	불가능	가능(tailwind.config.js)
성능 최적화	부족	뛰어남(PostCSS, Autoprefixer 등 사용 가능)

이 외 차이

1. Tailwind 적용 시점

• CDN
  • 브라우저의 실행 시점(런타임)에 적용된다.
  • tailwind.config.js와 같은 빌드타임 설정을 쓸 수 없고, 기본 Tailwind만 제공된다.
• CLI
  • 프로젝트 빌드 시(빌드타임) Tailwind가 미리 CSS를 생성한다.
  • 런타임에 불필요한 계산이 줄고, 배포 시 더 최적화가 가능하다.

2. 플러그인

• CDN
  • 기본 tailwind만 사용이 가능하다.
    -> @tailwindcss/forms나 @tailwindcss/typography와 같은 플러그인을 사용할 수 없다.
• CLI
  • 모든 공식/서드파티 플러그인을 사용할 수 있다.

3. 버전 제어

• CDN
  • 최신 버전이 자동으로 적용되지 않기 때문에 프로젝트별로 스타일이 깨질 수 있다.
  • 특정 버전을 명시하여 가져올 수는 있지만, 팀프로젝트에서는 관리하기 어렵다.
• CLI
  • package.json에 버전을 고정할 수 있기 때문에 팀원이나 서버 환경에서도 동일하게 유지할 수 있다.

4. 개발 경험 (DX)

• CDN
  • 설치가 필요 없어 빠르지만, 에디터에서 자동 완성이 잘 안된다.
• CLI
  • VSCode와 같은 IDE에서 Tailwind 플러그인과 결합해 자동완성이나 클래스 추천 등을 지원한다.

5. 색상 스타일 적용

• CDN
  • CDN으로 가져온 Taillwind CSS의 유틸리티는 알파벳 순서로 작성되어 있기 때문에 사용자가 한 요소에 여러가지 색상을 동시에 작성한 경우 알파벳이 뒤에 나오는 색상이 적용된다.
    -> bg-red-500 이후에 bg-blue-500을 작성하더라도 bg-red-500 색상이 적용된다.
• CLI
  • CLI 방식은 사용한 클래스만 빌드하여 CSS 파일을 만들어주기 때문에, 빌드 과정에서 class에 작성한 유틸리티의 순서가 유지된다.

참고

Tailwind CSS Color 질문 관련