作为开发人员，我们希望使用能够帮助我们的代码变得更好、更易于维护并让我们最高效地工作的工具。 对我来说，这些工具包括 Tailwind CSS 和 Typescript。 我越来越喜欢在使用 Nextjs 构建的项目中使用这些工具，并且发现自己在开发 Shopify 主题时会用到它们。 这篇文章是在 Shopify 主题中使用 Typescript 和 Tailwind 的指南。

开发依赖项

首先，我们需要在项目中安装一些开发依赖项。 在本教程中，我们将使用“yarn”，但“npm”或“pnpm”也可以。

在主题的根目录中创建“package.json”。

    yarn init

在根目录中创建或更新 package.json 文件。 初始化并按照终端中的步骤操作。

Vite

我们的开发环境将由 Vite 提供支持。 Vite 会将我们的 Typescript 转译为 Javascript。 它还将使用 JIT 构建 Tailwind，它仅使用项目中使用的类构建样式表。 我们还将使用 Postcss 添加特定的样式类以实现跨浏览器支持。

    yarn add vite fast-glob -D

安装 Vite 和 fast-glob。 fast-glob 是一个插件，用于遍历我们的目录并查找与我们提供的模式匹配的文件。

Typescript

TypeScript 帮助我在开发早期发现小错误。 它还与 VS Code 等编辑器集成，以提供有用的自动完成功能。

    yarn add typescript ts-node -D

Tailwind CSS

Tailwind 如今风靡一时，这是有充分理由的。 我能够更快地迭代，而不必考虑创建类名和担心样式的继承。

    yarn add tailwind postcss autoprefixer -D

.shopifyignore

如果您使用的是 Shopify Cli，您可以将 .shopifyignore 文件添加到主题目录的根目录中，以告诉 CLI 不要推送 某些文件到 Shopify 的服务器。

    *.cjs
    src
    vite.config.ts
    tsconfig.json
    package.json
    yarn.lock

我们创建的 .shopifyignore文件声明要忽略的 src 目录和其他配置文件。

Vite配置

在我们的配置文件中，我们将设置告诉 Vite 做什么的构建选项。

    import fg from 'fast-glob'
    import { defineConfig } from 'vite'
     
    export default defineConfig({
      build: {
        outDir: 'assets',
        emptyOutDir: false,
        rollupOptions: {
          input: 'src/**/*.{ts,js,css}',
          output: {
            dir: 'assets',
            entryFileNames: '[name].js',
            assetFileNames: '[name].[ext]',
          },
          plugins: [
            {
              name: 'glob-input',
              options(options) {
                const inputs = typeof options.input === 'string' ? [options.input] : options.input
     
                return Array.isArray(inputs)
                  ? { ...options, input: inputs.flatMap((input) => fg.sync(input)) }
                  : null
              },
            },
          ],
        },
      },
      plugins: [],
    })

vite.config.cjs

发生了什么？

• outDir ：相对于根目录的目录，构建输出将被放置在该目录中。
• emptyOutDir：我们将其设置为false，这样我们的outDir就不会在每次Vite构建时被清空和替换。 这是一个很好的功能，但我们的“outDir”是Assets文件夹，您可能会在其中包含除 Vite 构建的文件之外的其他文件。
• rollupOptions：直接自定义底层 Rollup 包（参见文档）。
• rollupOptions.input：匹配此模式的文件将使用 Vite 构建。
• glob-input：我们添加了一个插件来将我们的 input 传递给 fast-glob 以实现更快的文件遍历。

Tailwind 配置

接下来添加一个Tailwind 配置文件并且加入以下配置。

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ['./**/*.liquid', './src/**/*.{ts,js}'],
      theme: {
        extend: {
          fontFamily: {
            body: 'var(--font-body-family)',
            heading: 'var(--font-heading-family)',
          },
          colors: {
            text: 'rgba(var(--color-base-text), <alpha-value>)',
            accent1: 'rgba(var(--color-base-accent-1), <alpha-value>)',
            accent2: 'rgba(var(--color-base-accent-2), <alpha-value>)',
            background1: 'rgba(var(--color-base-background-1), <alpha-value>)',
            background2: 'rgba(var(--color-base-background-2), <alpha-value>)',
          },
        },
      },
      plugins: [],
    }

tailwind.config.cjs

发生了什么？

• /** @type {import('tailwindcss').Config} */：添加 Typescript 类型以获得更好的智能感知。
• content：告诉 Tailwind 在哪里查找类名。 这为 Just In Time 引擎提供了动力，该引擎可以使用您所需的最少 CSS 构建样式表。
• theme.extend：我们可以扩展默认的 Tailwind 主题以使用您在 theme.liquid 或主题中其他位置添加的 CSS 变量。 这对于允许通过 Shopify 后台中的主题设置控制 Tailwind 主题非常有用。

基本样式

使用 Tailwind，您不必编写样式表，只需在标记中使用类名即可。 您将创建一个全局样式表，用于导入重置样式和一些基本样式。 该文件将位于您的“src”文件夹中，因此它是使用 Vite 构建的。

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

src/base.css

Postcss 配置

确保Tailwind添加了Postcss配置。

    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    }

postcss.config.cjs

开发流程

现在我们已经安装和配置了所有内容，我们准备开始构建我们的主题。 我使用 2 个命令行窗口来运行添加到 package.json 中的yarn脚本。

    {
      "name": "tailwind-typescript-theme",
      "version": "0.0.1",
      "scripts": {
        "dev": "vite build --watch",
        "shopify": "shopify theme dev --store=REPLACE_WITH_YOUR_STORE",
        "build": "tsc && vite build"
      },
      "devDependencies": {
        "autoprefixer": "^10.4.13",
        "fast-glob": "^3.2.12",
        "postcss": "^8.4.21",
        "tailwindcss": "^3.2.4",
        "ts-node": "^10.9.1",
        "typescript": "^4.9.5",
        "vite": "^4.1.1"
      }
    }

package.json

Yarn Scripts

1. yarn dev：它运行我们的 Vite 配置并监视更改。
2. yarn shopify：这会为您的 Shopify 主题启动您的开发服务器。 请务必将“—store”标志替换为您的 Shopify 商店。

启动并运行后，您可以编辑主题文件并使用 Tailwind 类，Vite 将构建必要的样式表。 Shopify CLI 将看到 Vite 更改了文件并热重新加载您的主题并使所有内容保持同步。 您可以在“src”文件夹中添加 Typescript 文件，以实现主题所需的任何功能或用户交互。

我发现这个设置很简单，但非常强大。 我希望本指南可以帮助您开始使用 Tailwind CSS 和 Typescript 编写 Shopify 主题。