종속성

• Shopify CLI: Shopify 테마를 개발하고 관리하는 데 도움이 되는 명령줄 인터페이스 도구입니다.
• TailwindCSS: 맞춤형 디자인을 빠르게 구축하기 위한 유틸리티 우선 CSS 프레임워크입니다.

설정

Tailwind를 독립형 CLI 도구로 사용하고 있습니다. 자세한 내용은 공식 가이드를 참고하세요.

참고: Intel 프로세서가 탑재된 Mac에서 이 설정을 설정하는 경우 아래 명령에서 macos-arm64를 macos-x64로 바꾸세요.

1. ARM64 아키텍처를 사용하는 macOS용 최신 TailwindCSS 바이너리를 다운로드하세요.

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. 다운로드한 파일을 실행 가능하게 만듭니다.

   chmod x tailwindcss-macos-arm64

3. 실행 파일을 보다 편리한 이름으로 이동합니다:

   mv tailwindcss-macos-arm64 tailwindcss

4. TailwindCSS 감시자를 실행합니다.

   • 이 명령은 TailwindCSS 소스 파일(./assets/tailwind.css)의 변경 사항을 감시하고 출력을 원하는 CSS 파일(./assets/style.css)로 컴파일합니다.

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

게시

제작을 위해 CSS를 컴파일할 준비가 되면 다음 명령을 사용하여 CSS를 축소해야 합니다.

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

이 명령은 입력 CSS 파일(./assets/tailwind.css)을 가져와 TailwindCSS로 처리한 후 프로덕션에 최적화된 축소된 CSS 파일(./assets/style.css)을 출력합니다.

결론

이 단계에 따라 TailwindCSS를 독립형 CLI 도구로 성공적으로 설정하고 프로젝트에 통합했습니다. 이 설정을 사용하면 Tailwind의 유틸리티 우선 접근 방식을 사용하여 CSS를 효율적으로 개발하고 관리할 수 있습니다. 감시자를 실행하면 개발 중에 CSS가 자동으로 컴파일되고, 축소 단계에서는 CSS를 프로덕션용으로 준비하고 성능을 최적화합니다. 이 간소화된 프로세스는 깔끔하고 유지 관리 가능한 코드베이스를 유지하는 데 도움이 되므로 Shopify 테마를 쉽게 구축하고 사용자 지정하는 데 집중할 수 있습니다.