常见问题

关于运行注册表 (registry) 的常见问题。

常见问题

复杂的组件长什么样？

这是一个复杂组件的示例，它安装了一个页面、两个组件、一个组合式函数 (composable)、一个日期格式化工具以及一个配置文件。

{
  "$schema": "https://vue.shadcn.org.cn/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "A complex hello world component",
  "files": [
    {
      "path": "registry/new-york/HelloWorld/page.vue",
      "type": "registry:page",
      "target": "pages/hello/index.vue"
    },
    {
      "path": "registry/new-york/HelloWorld/components/HelloWorld.vue",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/HelloWorld/components/FormattedMessage.vue",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/HelloWorld/composables/useHello.ts",
      "type": "registry:hook"
    },
    {
      "path": "registry/new-york/HelloWorld/lib/formatDate.ts",
      "type": "registry:utils"
    },
    {
      "path": "registry/new-york/HelloWorld/hello.config.ts",
      "type": "registry:file",
      "target": "~/hello.config.ts"
    }
  ]
}

如何添加新的 Tailwind 颜色？

要添加新颜色，你需要将其添加到 cssVars 和 tailwind.config.theme.extend.colors 中。

{
  "$schema": "https://vue.shadcn.org.cn/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "A complex hello world component",
  "files": [
    // ...
  ],
  "cssVars": {
    "light": {
      "brand-background": "20 14.3% 4.1%",
      "brand-accent": "20 14.3% 4.1%"
    },
    "dark": {
      "brand-background": "20 14.3% 4.1%",
      "brand-accent": "20 14.3% 4.1%"
    }
  },
  "tailwind": {
    "config": {
      "theme": {
        "extend": {
          "colors": {
            "brand": {
              "DEFAULT": "hsl(var(--brand-background))",
              "accent": "hsl(var(--brand-accent))"
            }
          }
        }
      }
    }
  }
}

CLI 会更新项目的 CSS 文件和 tailwind.config.js 文件。更新后，新颜色即可作为工具类使用，例如：bg-brand 和 text-brand-accent。

如何添加 Tailwind 动画？

要添加新动画，请将其添加到 tailwind.config.theme.extend.animation 和 tailwind.config.theme.extend.keyframes 中。

{
  "$schema": "https://vue.shadcn.org.cn/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "A complex hello world component",
  "files": [
    // ...
  ],
  "tailwind": {
    "config": {
      "theme": {
        "extend": {
          "keyframes": {
            "wiggle": {
              "0%, 100%": { "transform": "rotate(-3deg)" },
              "50%": { "transform": "rotate(3deg)" }
            }
          },
          "animation": {
            "wiggle": "wiggle 1s ease-in-out infinite"
          }
        }
      }
    }
  }
}

示例快速开始

本页内容

常见问题复杂的组件长什么样？如何添加新的 Tailwind 颜色？如何添加 Tailwind 动画？