Vite+React项目添加shadcn UI（含tailwindcss不生效的解决方案）

skyer19
1,296 阅读2分钟

Shadcn UI 是一个现代化的用户界面（UI）组件库，通常用于构建 Web 应用程序和网站。它的设计注重美观、响应式和易用性，旨在帮助开发者快速构建漂亮且功能齐全的界面。以下是 Shadcn UI 的一些主要特点：

  1. 响应式设计：Shadcn UI 提供了一系列响应式组件，确保在各种设备和屏幕尺寸上都有良好的显示效果。
  2. 易于使用：该库的 API 设计简单明了，开发者可以轻松上手并快速实现复杂的 UI。
  3. 高度可定制化：Shadcn UI 提供了丰富的配置选项和主题设置，开发者可以根据需求定制组件的外观和行为。
  4. 组件丰富：包括按钮、表单、导航栏、模态框、卡片等多种常用组件，覆盖了大多数常见的 UI 需求。
  5. 性能优化：Shadcn UI 注重性能，所有组件都经过优化，确保应用程序的高效运行。
  6. 良好的文档：提供详细的文档和示例代码，帮助开发者更快地理解和使用库中的功能。
  7. 社区支持：Shadcn UI 拥有活跃的开发者社区，可以提供帮助和分享经验。

Shadcn UI 是一个非常适合现代 Web 开发的 UI 库，可以帮助开发者节省大量的时间和精力，同时构建出专业且美观的用户界面。

开始操作：

1.安装 shadcn UI 所依赖的 tailwindcss

pnpm install tailwindcss@latest postcss@latest autoprefixer@latest -D

2.初始化tailwindcss

npx tailwindcss init

注意配置时的路径（无法加载tailwindcss很有可能就是路劲各处不一致）

3.初始化 shadcn-ui

npx shadcn-ui@latest init

4.添加按钮

npx shadcn-ui@latest add button

5.页面中引用并使用

import { Button } from "@/components/ui/button"

<Button variant="outline">Button</Button>
<Button>Button</Button>
<Button variant="destructive">Destructive</Button>

6.运行结果

image.png

tailwindcss未能正常加载

建议排查

  1. 各处引用的路径是否一致？

  2. 引用时如果用了 别名 alias 排查一下 tsconfig.json vite.config.ts

    tsconfig.json

    {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

    vite.config.ts

    import path from 'path';
export default defineConfig({
  resolve: {
    alias: [{ find: /^@\//, replacement: path.join(__dirname, './src/') }],
  }
});

  3. vite.config.ts 是否配置正确

    import path from 'path';
export default defineConfig({
 css: {
   postcss: {
     plugins: [tailwindcss, autoprefixer],
   },
 },
});

  4. 页面里是否有引用globals.css

import './globals.css'; //App.tsx

更多代码
stackblitz.com/~/github.co…

avatar
文章
阅读
粉丝