依赖关系
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 主题。
以上就是如何设置独立 CLI：在 Shopify 中使用 Tailwind CSS，而不使用 Nodejs的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629755.html
微信扫一扫 
支付宝扫一扫 
