依赖关系
- 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 主题。
