tailwindCSS 설치와 실행으로 알아보는 npm, npx

npm install -D tailwindcss 에서 -D 옵션이란?

-D 옵션은 --save-dev 옵션의 축약형입니다. 이 옵션은 패키지를 프로젝트의 개발 의존성(dependency)으로 설치하도록 지시합니다.

일반적으로 프로젝트에는 런타임(runtime) 의존성과 개발(development) 의존성이 있습니다.

1. 런타임 의존성 : 애플리케이션이 실행될 때 필요한 패키지이며, 이 패키지들은 애플리케이션의 동작에 직접적으로 기여합니다.
2. 개발 의존성 : 개발 중에만 필요한 패키지로, 예를 들어 빌드 도구, 테스트 프레임워크, 코드 분석 도구 등이 여기에 속합니다.

D 또는 -save-dev 옵션을 사용하면 패키지가 개발 의존성으로 설치되며, 이 패키지들은 프로젝트를 개발하는 동안에만 필요합니다. 런타임에는 필요하지 않으므로, 프로덕션 배포할 때 이러한 개발 의존성 패키지들은 배포되지 않습니다.

따라서 tailwindcss를 -D 또는 --save-dev 옵션과 함께 설치하면 개발 중에만 Tailwind CSS를 사용할 수 있고, 프로덕션 배포 시에는 불필요한 개발 의존성 패키지로 포함되지 않습니다.

npm tailwindcss init 명령의 의미는?

Tailwind CSS 프로젝트를 초기화하는 명령입니다.

1. npx: Node.js 패키지를 실행하고 사용할 수 있는 도구입니다. npx를 사용하면 명령어를 실행하기 위해 로컬로 설치된 패키지를 사용할 수 있습니다.
2. tailwindcss: Tailwind CSS 패키지입니다. 이 명령은 Tailwind CSS를 사용하여 CSS 스타일을 만들고 관리하기 위한 초기 설정을 생성합니다.
3. init: Tailwind CSS 초기 설정을 생성하는 옵션입니다. 이 명령을 실행하면 Tailwind CSS 프로젝트의 초기 구성 파일이 생성됩니다.

npx tailwindcss init 명령을 실행하면 Tailwind CSS의 초기 구성 파일인 tailwind.config.js가 생성됩니다. 이 파일은 Tailwind CSS의 설정과 확장, 플러그인 등을 정의하는 중요한 구성 파일입니다. 이 파일을 편집하여 프로젝트에 맞게 Tailwind CSS를 사용할 수 있습니다. 초기 설정 파일을 생성하고 수정함으로써 Tailwind CSS를 프로젝트에 통합하고 사용자 정의 스타일을 추가할 수 있게 됩니다.

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch 명령어의 의미는?

Tailwind CSS를 컴파일하고 CSS 파일을 생성하는 명령어입니다. 여기에서 사용된 옵션들의 의미는 다음과 같습니다:

• i ./src/input.css: 입력 CSS 파일의 경로를 지정합니다. 이 옵션으로 ./src/input.css 파일을 입력으로 사용합니다.
• o ./src/output.css: 컴파일된 CSS 파일의 출력 경로를 지정합니다. 이 옵션으로 ./src/output.css 파일에 결과를 출력합니다.
• -watch: 이 옵션은 Tailwind CSS를 감시 모드로 실행하도록 지정합니다. 즉, 프로젝트 파일이 변경될 때마다 Tailwind CSS를 다시 컴파일하고 출력 CSS 파일을 업데이트합니다. 이렇게 함으로써 개발 중에 실시간으로 스타일을 수정하고 반영할 수 있습니다.

따라서 위의 명령어는 ./src/input.css 파일을 Tailwind CSS로 컴파일하여 ./src/output.css 파일에 저장하고, 변경 사항을 계속 감시하면서 업데이트하는 명령어입니다.

npx 가 붙은 명령어와 붙지 않은 명령어의 차이점

실행 방법에 차이가 있습니다. pergecss를 사용하여 프로젝트의 CSS 파일과 HTML 파일을 분석하여 사용되지 않는 CSS를 제거하고 결과를 지정한 경로에 저장하는 명령어의 예시입니다.

1. purgecss --css [CSS파일 경로] --content [HTML파일 경로] --output [결과물저장 경로]
   • 이 명령은 CLI(Command Line Interface)를 통해 실행됩니다.
   • 터미널에서 직접 명령어를 입력하여 PurgeCSS를 실행합니다.
   •  
2. npx purgecss --css project/test.css --content project/index.html --output project/dist
   • 이 명령은 npx를 사용하여 실행됩니다.
   • npx는 npm 패키지를 실행하는 도구로, 글로벌로 설치하지 않고도 프로젝트 내에서 패키지를 실행할 수 있게 해줍니다.

결과는 다음과 같이 동일합니다. 프로젝트의 project/test.css 파일을 분석하여 project/index.html 파일에서 사용되지 않는 CSS를 제거하고 결과를 project/dist 디렉토리에 저장합니다.

 

Reference

[최적화] PurgeCSS : 쉽고 빠르게 unused css 제거하기