Logo

菜单

发布于 2025-12-10 2 阅读
0

使用 Tailwind CSS 构建 Shopify 主题 主题套件入门 安装 Tailwind 编辑输出 CSS 开发中的 TailwindCSS 生产中的 TailwindCSS 结论

使用 Tailwind CSS 构建 Shopify 主题

主题套件入门

安装 Tailwind

编辑输出 CSS

TailwindCSS 正在开发中

TailwindCSS 在生产环境中

结论

Shopify 是全球最大的电商平台之一，在全球使用电商技术的前 100 万个网站中占据了 20% 的市场份额（根据Built with - 截至撰写本文时准确）。这使得 Shopify 对开发者来说非常有利可图，无论是为客户构建定制主题、为主题商店构建可重复使用的主题，还是为 Shopify 应用商店开发应用程序。

话虽如此，内置的基于浏览器的主题编辑体验有限，远谈不上令人愉悦。幸好 Shopify 还提供了 Shopify 主题套件，Shopify 主题套件允许我们使用自己喜欢的文本编辑器在本地编辑主题，并监控自动推送到 Shopify 商店的更改。本地编辑文件的优势不仅仅在于能够使用我们喜欢的文本编辑器，还允许我们利用 Webpack、Gulp 等构建工具。

主题套件入门

安装

如果您之前没有使用过主题套件，则需要安装它；如果您已经安装了主题套件，则可以直接跳到获取 API 访问权限

macOS 安装

使用Homebrew通过运行以下命令来安装主题套件：

brew tap shopify/shopify
brew install themekit
Enter fullscreen mode Exit fullscreen mode

如果brew install theme kit对你不起作用，请尝试@dnirns在评论中brew install shopify/shopify/themekit指出的方法

Windows Chocolatey 安装

如果您已经安装了 Chocolatey，请通过运行以下命令安装主题套件：

choco install themekit
Enter fullscreen mode Exit fullscreen mode

Linux 安装

如果您使用的是基于 Linux 的系统，则可以使用以下安装脚本自动下载并安装最新的主题套件：

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python
Enter fullscreen mode Exit fullscreen mode

获取 API 访问权限

要将主题套件连接到我们的商店，我们需要在商店的 Shopify 后台创建一个私人应用。如果您已经创建了私人应用，可以直接跳到创建主题套件主题

  • 从 Shopify 管理区域，我们将从Apps左侧面板打开。
  • 我们需要点击页面底部Manage private apps
  • 然后我们点击Create new private app（如果出现“私人应用开发已禁用”的提示，则需要先点击“启用私人应用开发”。注意：只有店主才能启用私人应用开发）
  • 在应用程序详细信息部分，我们必须填写应用程序名称和联系电子邮件地址。
  • 我们需要向下滚动到管理 API 部分并单击显示非活动的管理 API 权限。
  • 滚动到该Themes部分并从下拉菜单中选择“读取和写入”。
  • 点击Save。
  • 阅读私人应用程序确认对话框，然后单击Create app。

创建应用后，我们将返回到应用详情页面，在 Admin API 部分可以看到唯一的访问凭证。我们需要复制密码，下一步会用到它。

创建主题套件主题

现在我们已经安装了 Theme Kit，并创建了我们的私有应用，接下来可以创建我们新的 Theme Kit 主题了。首先，打开我们选定的主题目录，并创建一个与我们主题同名的新文件夹，在本例中，我们将其命名为tailwind-shopify-theme。创建tailwind-shopify-theme文件夹后，我们需要使用终端导航到该文件夹​​，并运行以下命令创建 Theme Kit 主题：

theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
Enter fullscreen mode Exit fullscreen mode

其中[your-password]等于我们私人应用程序的 API 密码，[your-store.myshopify.com]等于我们的商店myshopify.com域，并且 [主题名称] 等于我们的主题名称（如果我们的主题名称有空格，我们需要将其用引号引起来）。

如果我们成功按照步骤创建了 Shopify 主题套件主题，它现在就会出现在 Shopify 后台中。我们可以从Online store左侧面板打开并点击Themes下方来查看。在主题页面，向下滚动到Theme library主题列表，就会看到我们新创建的主题。

关注 Shopify 主题的变化

现在我们已经在本地连接到在线 Shopify 主题，可以开始监视本地文件的变化了。要开始监视主题，我们需要从终端导航到主题文件夹，以我们之前使用的示例为例tailwind-shopify-theme。进入主题文件夹后，我们可以运行以下命令来开始监视文件的变化：

theme watch
Enter fullscreen mode Exit fullscreen mode

如果我们想实际操作一下，可以在页面中找到新主题，然后点击 > 来预览Theme library。Themes然后Actions，Preview在本地文本编辑器中，编辑目录index.liquid中的文件templates并保存。之后，我们可以刷新主题预览，并在 Shopify 中查看更改。

安装 Tailwind

现在我们可以在本地编辑 Shopify 主题了，可以开始使用 Tailwind 了。首先，我们需要package.json运行以下命令并按照步骤创建文件 - 本例使用默认设置即可：

npm init
Enter fullscreen mode Exit fullscreen mode

一旦创建了 package.json 文件，我们就可以使用以下命令安装 Tailwind：

npm install tailwindcss
Enter fullscreen mode Exit fullscreen mode

现在 tailwind 已经安装完毕，我们可以tailwind.config.js使用以下命令创建文件：

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

这将创建一个tailwind.config.js，让我们打开该tailwind.config.js文件。首先，让我们取消注释未来对象中的键值对，这将使我们以后免于收到任何弃用警告。现在，我们需要编辑purge数组并将其替换为具有两个键的对象，content并且enabled。enabled将是 ，Boolean它将告诉 Tailwind 我们是否要清除样式，我们false现在将其默认为 ，但稍后我们会回到它。content将是，它将array告诉 Tailwind 在哪里查找我们的样式，我们将它设置为在以下常见的 Shopify 文件夹中查找。

purge: {
    enabled: false,
    content: [
      './layout/*.liquid',
      './templates/*.liquid',
      './sections/*.liquid',
      './snippets/*.liquid',
    ],
  },
Enter fullscreen mode Exit fullscreen mode

现在 Tailwind 已经安装完毕，我们需要创建源样式表。在 Shopify 主题的根目录中，我们可以创建一个名为 的目录src/css，并在该文件夹中创建一个名为 的文件application.css。创建完成后，applications.css我们需要粘贴以下代码：

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

编辑输出 CSS

默认情况下，我们的新主题套件主题会附带一个名为 的文件夹，assets其中包含一个名为 的文件application.scss.liquid，我们需要编辑此文件名并将其更改为application.css.liquid。更改名称后，我们必须theme.liquid从layout文件夹中打开文件并替换以下行：

{{ 'application.scss.css' | asset_url | stylesheet_tag }}
Enter fullscreen mode Exit fullscreen mode

和：

{{ "application.css" | asset_url | stylesheet_tag }}
Enter fullscreen mode Exit fullscreen mode

TailwindCSS 正在开发中

在开发中使用 Tailwind 时，我们需要确保可以使用所有 Tailwind 的样式。之前编辑tailwind.config.js文件时，我们将对象enabled上的设置为，这意味着我们的 Tailwind 构建不会删除任何 Tailwind 的实用类。无论何时开发主题，我们都需要确保对象上的设置为。现在 PurgeCSS 已禁用，我们可以运行：purgefalseenabledpurgetailwind.config.jsfalse

npx tailwindcss build src/css/application.css -o assets/application.css.liquid
Enter fullscreen mode Exit fullscreen mode

这将构建我们的application.css.liquid文件并包含所有 Tailwind 的实用程序类。现在我们可以访问所有这些样式，我们可以使用以下命令部署样式表：

theme deploy
Enter fullscreen mode Exit fullscreen mode

现在开发样式表已经部署，我们可以观察我们的主题并开始使用以下方法构建我们的主题：

theme watch
Enter fullscreen mode Exit fullscreen mode

TailwindCSS 在生产环境中

在生产环境中使用 Tailwind 时，我们需要确保删除所有未使用的样式。与开发环境一样，PurgeCSS 会在tailwind.config.js文件中启用/禁用。每当我们完成开发并想要推送生产就绪代码时，都需要在中的对象上enabled进行设置。现在 PurgeCSS 已启用，我们可以部署样式表了：purgetailwind.config.jstrue

npx tailwindcss build src/css/application.css -o assets/application.css.liquid
Enter fullscreen mode Exit fullscreen mode

这将构建我们的application.css.liquid文件并删除任何未使用的 Tailwind 实用程序类。

您可能希望通过环境变量设置启用的布尔值

结论

现在，您应该可以开始使用 Tailwind CSS 创建 Shopify 主题了。祝您创作愉快！

如果您发现本文有用，请在Medium、Dev.to 和/或Twitter上关注我。

文章来源：https://dev.to/wearethirdbears/building-shopify-themes-with-tailwind-css-496g
探索 Tailwind 4 中的 ...
如何使用 React 构建 Ele...