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 buildcsswatch 스크립트를 실행하면 변경 사항을 실시간으로 감지하면서 해당 파일에 즉시 반영해줍니다. ctrl+c로 종료하기 전까지 계속 실시간으로 감지됩니다.
npm run csswatchbuild, -i의 차이와 --watch
`npx tailwindcss build input.css -o output.css` ,
`npx tailwindcss -i input.css -o output.css --watch` 위의 스크립트 코드를 살펴보면 위와 같이 비슷하지만 다른 코드가 존재합니다.
build, -i의 차이
-i(또는--input): 이 옵션은 입력 파일 또는 CSS 파일을 지정하는 데 사용됩니다.-i뒤에 따라오는 경로는 Tailwind CSS가 처리할 CSS 파일의 경로입니다.build:build다음에 오는 파일들은 Tailwind CSS가 CSS 클래스를 생성하고 최적화한 뒤에 저장할 위치를 지정합니다. 이 명령어는 한 번 실행하고 CSS 파일을 생성한 다음 종료됩니다.
즉, -i 옵션은 --watch와 함께 쓰여 입력 파일 또는 작업 중인 CSS 파일을 지정하는 데 사용되고(유지됨), build 명령어는 Tailwind CSS를 사용하여 CSS를 빌드하고 최적화하는 데 사용됩니다(유지되지 않음).
--watch란?
--watch 플래그가 있는 경우 파일이 변경될 때마다 자동으로 다시 컴파일합니다. 따라서 변경 사항을 실시간으로 추적하고 새로운 결과를 생성합니다.
일반적으로 개발 중에는 --watch 플래그를 사용하여 변경 사항을 실시간으로 반영하는 것이 편리합니다.
