如何设置独立 CLI：在 Shopify 中使用 Tailwind CSS，而不使用 Nodejs

依赖关系

设置

我们使用 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 观察器：

发布

当您准备好编译 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 主题。