UnoCSS 预设 Shadcn 使用指南

UnoCSS 预设 Shadcn 使用指南

unocss-preset-shadcn Use shadcn ui with UnoCSS 项目地址: https://gitcode.com/gh_mirrors/uno/unocss-preset-shadcn

本指南旨在帮助您快速上手并有效利用 unocss-preset-shadcn，这是一个让 UnoCSS 能够集成 shadcn/ui，shadcn-vue 或 shadcn-svelte 的预设插件。通过本指南，您将学习到如何安装、配置以及在实际项目中应用此预设，以享受高效且主题可定制的前端开发体验。

安装指南

步骤一：准备环境

首先确保您的项目已经集成了 UnoCSS，并准备好相应框架（Vite, Vue, Svelte等）的开发环境。接下来，通过 npm 安装 unocss-preset-shadcn 和 unocss-preset-animations：

npm install unocss-preset-animations unocss-preset-shadcn --save-dev

步骤二：配置 UnoCSS

在您的 unocss.config.ts 文件中，引入这些预设并进行配置，例如：

import { defineConfig, presetUno } from 'unocss'
import presetAnimations from 'unocss-preset-animations'
import { presetShadcn } from 'unocss-preset-shadcn'

export default defineConfig({
  presets: [
    presetUno(),
    presetAnimations(),
    presetShadcn({ color: 'red' }), // 自定义颜色主题
  ],
  
  content: {
    pipeline: {
      include: ['/**/*.vue', '/**/*.svelte', '/**/*.jsx', '/**/*.tsx', '/**/*.mdx', '/**/*.astro', '/**/*.html'],
    },
  },
})

项目的使用说明

1. 替换 Tailwind CSS 设置：如果您之前依赖于 Tailwind CSS，现在需要将其替换成 UnoCSS 的配置。

2. 避免初始化命令：切勿使用 shadcn-ui@latest init 等命令来初始化项目，而是手动集成。

3. 添加组件：对于 shadcn 提供的组件，如按钮，应分别按如下命令执行：

   • 对于 shadcn/ui: npx shadcn-ui@latest add button
   • 对于 shadcn-vue: npx shadcn-vue@latest add button
   • 对于 shadcn-svelte: npx shadcn-svelte@latest add button

4. 代码整合：创建一个 utils.ts 文件，包含必要的类合并工具函数，如示例中提供的 cn 函数。

5. 配置文件调整：依据所选框架，调整对应的配置文件（如 package.json 或特定框架配置），设置风格、Tailwind CSS 配置路径等。

项目API使用文档

动态主题支持

要启用动态主题切换，您可以配置预设接收多个主题对象数组，并在客户端逻辑中处理主题切换。比如：

import { presetShadcn } from 'unocss-preset-shadcn'

// ...其他配置...
presetShadcn(builtinColors.map((c) => ({ color: c })),
// ...更多配置...

接着，在前端应用中实现相应的逻辑，比如点击事件驱动主题变化。

结论

通过以上步骤，您已成功设置好 UnoCSS 预设 Shadcn，可以享受它带来的快速响应式样式和灵活的主题定制能力。记得调整和测试以适应具体项目需求，这将极大提升前端开发效率与用户体验。在开发过程中，参考官方文档和社区资源，以获取更深入的知识和支持。

unocss-preset-shadcn Use shadcn ui with UnoCSS 项目地址: https://gitcode.com/gh_mirrors/uno/unocss-preset-shadcn