如何設定獨立 CLI：在 Shopify 中使用 Tailwind CSS，而不使用 Node.js。
瀏覽：381
依賴關係
- Shopify CLI：一種命令列介面工具，可協助您開發和管理 Shopify 主題。
- TailwindCSS：實用程式優先的 CSS 框架，用於快速建立自訂設計。
設定
我們使用 Tailwind 作為獨立的 CLI 工具。更多資訊可以參考官方指南。
注意： 如果您在配備 Intel 處理器的 Mac 上進行設置，請在下面的命令中將 macos-arm64 替換為 macos-x64。
-
下載 ARM64 架構 macOS 的最新 TailwindCSS 二進位檔案：
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
-
讓下載的檔案可執行：
chmod x tailwindcss-macos-arm64
-
將執行檔移至更方便的名稱：
mv tailwindcss-macos-arm64 tailwindcss
-
運行 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 主題。
-
如何使用Java.net.urlConnection和Multipart/form-data編碼使用其他參數上傳文件？使用http request 上傳文件上傳到http server，同時也提交其他參數，java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...程式設計 發佈於2025-04-16 -
在PHP中，如何在回調函數中使用外部計算的變量？使用變量計算出的外部回調函數在PHP中，可以在回調函數之外計算變量並在這些函數中使用它們。讓我們考慮以下方案：您有一個數組$ arr，想要使用array_filter創建一個新的數組，該數組僅包含小於$ arr中元素的平均值的新數組。 使用回調函數實現此功能，您可能會遇到函數的挑戰，即在函數內部和...程式設計 發佈於2025-04-16
-
為什麼PYTZ最初顯示出意外的時區偏移？與pytz 最初從pytz獲得特定的偏移。例如，亞洲/hong_kong最初顯示一個七個小時37分鐘的偏移： 差異源利用本地化將時區分配給日期，使用了適當的時區名稱和偏移量。但是，直接使用DateTime構造器分配時區不允許進行正確的調整。 example pytz.timezone（&#...程式設計 發佈於2025-04-16
-
如何修復\“常規錯誤：2006 MySQL Server在插入數據時已經消失\”？How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction:Inserting data into a MySQL database can...程式設計 發佈於2025-04-16
-
如何正確使用與PDO參數的查詢一樣？在pdo 中使用類似QUERIES在PDO中的Queries時，您可能會遇到類似疑問中描述的問題：此查詢也可能不會返回結果，即使$ var1和$ var2包含有效的搜索詞。錯誤在於不正確包含％符號。 通過將變量包含在$ params數組中的％符號中，您確保將％字符正確替換到查詢中。沒有此修改，PD...程式設計 發佈於2025-04-16
-
Java開發者如何保護數據庫憑證免受反編譯？在java 在單獨的配置文件保護數據庫憑證的最有效方法中存儲憑據是將它們存儲在單獨的配置文件中。該文件可以在運行時加載，從而使登錄數據從編譯的二進製文件中遠離。 使用prevereness class import java.util.prefs.preferences; 公共類示例{ 首選...程式設計 發佈於2025-04-16
-
FastAPI自定義404頁面創建指南response = await call_next(request) if response.status_code == 404: return RedirectResponse("https://fastapi.tiangolo.com") else: ...程式設計 發佈於2025-04-16
-
如何在其容器中為DIV創建平滑的左右CSS動畫？通用CSS動畫，用於左右運動 ，我們將探索創建一個通用的CSS動畫，以向左和右移動DIV，從而到達其容器的邊緣。該動畫可以應用於具有絕對定位的任何div，無論其未知長度如何。 問題：使用左直接導致瞬時消失 更加流暢的解決方案：混合轉換和左 [並實現平穩的，線性的運動，我們介紹了線性的轉換。...程式設計 發佈於2025-04-16
-
Android如何向PHP服務器發送POST數據？在android apache httpclient（已棄用） httpclient httpclient = new defaulthttpclient（）; httppost httppost = new httppost（“ http://www.yoursite.com/script.p...程式設計 發佈於2025-04-16
-
.NET中如何獲取AssemblyVersion和AssemblyFileVersion？從assemblyInfo To retrieve the AssemblyVersion, you can use the code snippet:Version version = assembly.getEntryAssembly（）。 getName（）。版本; 此代碼獲取活動彙編，檢索...程式設計 發佈於2025-04-16
-
`console.log`顯示修改後對象值異常的原因foo = [{id：1}，{id：2}，{id：3}，{id：4}，{id：id：5}，]，]; console.log（'foo1'，foo，foo.length）; foo.splice（2，1）; console.log('foo2', foo, foo....程式設計 發佈於2025-04-16
-
Django CSRF驗證為何在Ajax POST請求中失敗？Django CSRF Check Failing with Ajax Post RequestAs outlined in Django's documentation, enabling CSRF protection helps prevent malicious cross-site...程式設計 發佈於2025-04-16
-
如何在GO編譯器中自定義編譯優化？在GO編譯器中自定義編譯優化 GO中的默認編譯過程遵循特定的優化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...程式設計 發佈於2025-04-16
-
在細胞編輯後，如何維護自定義的JTable細胞渲染？在JTable中維護jtable單元格渲染後，在JTable中，在JTable中實現自定義單元格渲染和編輯功能可以增強用戶體驗。但是，至關重要的是要確保即使在編輯操作後也保留所需的格式。 在設置用於格式化“價格”列的“價格”列，用戶遇到的數字格式丟失的“價格”列的“價格”之後，問題在設置自定義單元...程式設計 發佈於2025-04-16
-
切換到MySQLi後CodeIgniter連接MySQL數據庫失敗原因Unable to Connect to MySQL Database: Troubleshooting Error MessageWhen attempting to switch from the MySQL driver to the MySQLi driver in CodeIgniter,...程式設計 發佈於2025-04-16
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
