Tailwind CSS와 PurgeCSS 사용하여 스타일시트 크기 줄이기

Programming/Front-end
enerG enerG Jan, 2024
Table of Contents
  1. Tailwind CSS의 크기가 커질 수 있다
  2. PurgeCSS란?
  3. 바로 실행하기
  4. 명령어를 자세히 알아보자
  5. 여기서 "src/**/*.js" 부분만 큰따옴표로 묶은 이유
  6. 빌드 스크립트 구성 및 실행
  7. build, -i의 차이와 --watch

CSS 프레임워크인 Tailwind CSS와 PurgeCSS를 함께 사용하여 프로젝트의 스타일 시트 크기를 줄이는 방법

Tailwind CSS의 크기가 커질 수 있다

Tailwind CSS는 유틸리티-퍼스트(Utility-first) 방식의 CSS 프레임워크로, 반응형 디자인, 상태 변화, 그리고 커스텀 컴포넌트를 쉽게 구현할 수 있게 해줍니다. 하지만, 많은 유틸리티 클래스로 인해 최종 CSS 파일의 크기가 커질 수 있는 단점이 있습니다. 이를 해결하기 위해 PurgeCSS를 사용할 수 있습니다.

PurgeCSS란?

PurgeCSS는 사용되지 않는 CSS를 제거해주는 툴입니다. 이를 사용하면 웹사이트의 로딩 시간을 줄이고 성능을 향상시킬 수 있습니다.

Tailwind CSS 및 purgeCSS를 공식 홈페이지를 참고하여 본인의 설정과 맞는 방법으로 설치 및 설정 완료했다는 전제 하에 진행합니다.

바로 실행하기

npx tailwindcss build input.css -o output.css

공식홈페이지를 참고하여 진행했다면 input.css에는 아래와 같은 내용이 들어있을 것입니다.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

이 import를 기반으로 output.css 파일로 만들어주는 명령어입니다.

그 다음 아래 명령어로 purgecss를 사용하여 최적화된 CSS 파일을 생성합니다.

npx purgecss --css output.css --content src/index.html "src/**/*.js" --output build/css/

명령어를 자세히 알아보자

  • npx purgecss: purgecss 명령어를 실행합니다.
  • --css output.css: 최적화할 대상 CSS 파일을 지정합니다. 여기서는 tailwind.css 파일을 대상으로 합니다.
  • --content src/index.html "src/**/*.js": PurgeCSS가 CSS 파일에서 사용되는 클래스를 식별하기 위한 파일(HTML,JS)을 지정합니다. 예시의 명령어대로 진행하면 src/index.html 파일과 src/**/*.js 패턴에 해당하는 모든 JavaScript 파일을 포함하여 이 파일들을 분석하여 사용되는 클래스를 찾습니다.
  • --output build/css/: PurgeCSS가 사용되지 않는 클래스를 제거한 CSS 코드를 이 디렉토리에 저장합니다.

즉, tailwind.css 파일을 기반으로 HTML 파일과 JavaScript 파일을 분석하여 실제로 사용되는 클래스를 추출하고, 이를 기반으로 최적화된 CSS 파일을 build/css/ 디렉토리에 저장한다는 뜻입니다.

여기서 "src/**/*.js" 부분만 큰따옴표로 묶은 이유

확장자가 .js인 모든 JavaScript 파일을 대상으로 하기 위한 파일 경로 또는 패턴을 나타내는 부분입니다.

셀 환경에서 사용되는 파일 경로나 패턴에 공백이나 특수 문자가 포함되어 있을 때, 이를 하나의 인수로 인식하기 위해서 큰 따옴표를 써줘야 합니다.

빌드 스크립트 구성 및 실행

매번 직접 실행하면 번거로우니 package.json 파일에 아래와 같은 스크립트를 추가합니다.

"scripts": {
  "build": "npx tailwindcss build input.css -o output.css && npx purgecss --css tailwind.css --content 'src/index.html' 'src/**/*.js' --output build/css/"
  "csswatch" : "npx tailwindcss -i input.css -o output.css --watch"
}

build 스크립트 실행 시 사용하지 않는 CSS 코드를 제거하고 최적화된 스타일시트를 생성합니다.

npm run build

csswatch 스크립트를 실행하면 변경 사항을 실시간으로 감지하면서 해당 파일에 즉시 반영해줍니다. ctrl+c로 종료하기 전까지 계속 실시간으로 감지됩니다.

npm run csswatch

build, -i의 차이와 --watch

`npx tailwindcss build input.css -o output.css` , 
`npx tailwindcss -i input.css -o output.css --watch` 

위의 스크립트 코드를 살펴보면 위와 같이 비슷하지만 다른 코드가 존재합니다.

build, -i의 차이

  1. -i (또는 --input): 이 옵션은 입력 파일 또는 CSS 파일을 지정하는 데 사용됩니다. -i 뒤에 따라오는 경로는 Tailwind CSS가 처리할 CSS 파일의 경로입니다.
  2. build: build 다음에 오는 파일들은 Tailwind CSS가 CSS 클래스를 생성하고 최적화한 뒤에 저장할 위치를 지정합니다. 이 명령어는 한 번 실행하고 CSS 파일을 생성한 다음 종료됩니다.

즉, -i 옵션은 --watch와 함께 쓰여 입력 파일 또는 작업 중인 CSS 파일을 지정하는 데 사용되고(유지됨), build 명령어는 Tailwind CSS를 사용하여 CSS를 빌드하고 최적화하는 데 사용됩니다(유지되지 않음).

--watch란?

--watch 플래그가 있는 경우 파일이 변경될 때마다 자동으로 다시 컴파일합니다. 따라서 변경 사항을 실시간으로 추적하고 새로운 결과를 생성합니다.

일반적으로 개발 중에는 --watch 플래그를 사용하여 변경 사항을 실시간으로 반영하는 것이 편리합니다.

 

Reference
  • https://tailwindcss.com/
  • https://purgecss.com/
  • https://wonny.space/writing/dev/hello-tailwind-css
  • https://onlydev.tistory.com/127
  • https://wonderbout.tistory.com/204
  • Tailwind CSS의 크기가 커질 수 있다
  • PurgeCSS란?
  • 바로 실행하기
  • 명령어를 자세히 알아보자
  • 여기서 "src/**/*.js" 부분만 큰따옴표로 묶은 이유
  • 빌드 스크립트 구성 및 실행
  • build, -i의 차이와 --watch
𝒆𝒏𝒆𝒓𝗚
에너지 넘치는 엔지니어⚡ 읽고 쓰고 정리하는 것을 좋아합니다.
Programming/Front-end 카테고리의 다른 글
  • CSS / z-index 낮은 요소가 클릭 되지 않는 문제
  • JS / 문자열을 숫자 타입으로 바꾸는 두 가지 방법
  • JS / for of와 forEach
  • CSS / var와 RGB
enerG
enerGneer⚡
  • All Article 174
    • Programming 81
      • Basics 9
      • Front-end 20
      • Back-end 8
      • Git 13
      • Java 10
      • C 6
      • Python 3
      • IDE 4
      • VBA 8
    • Computer Science 22
      • Basics 4
      • Algorithm 3
      • Data Structure 2
      • Database, SQL 6
      • Operating System 3
      • Network 4
    • Software Engineering 16
      • SDLC 13
      • Study Notes 3
    • Project Record 15
      • Project 3
      • Customize Tistory 12
    • Review 27
    • Self-Growth 8
    • in JAPAN 1
    • ETC 4
hELLO · Designed By 정상우
Icon Made By Freepik · Flaticon
Redesigned By enerG
Tailwind CSS와 PurgeCSS 사용하여 스타일시트 크기 줄이기

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.