依賴關係

• 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 在開發過程中自動編譯，而縮小步驟則為生產做好準備，優化其效能。這個簡化的流程有助於維護乾淨且可維護的程式碼庫，使您能夠專注於輕鬆建立和自訂 Shopify 主題。