依赖关系

• 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 主题。