React 项目中使用shadcn/ui

1、这个是由 React 构建的 UI 组件集合，凭借 TailwindCSS 的强大定制能力，所以首先需要安装TailwindCSS相关的依赖

yarn add tailwindcss postcss autoprefixer -D

安装完成后需要初始化Tailwind CSS 配置文件

npx tailwindcss init

会在该项目的根目录下创建一个 tailwind.config.js and postcss.config.js配置文件(当前没有的情况下),可以自定义 Tailwind 的配置，并为 PostCSS 提供必要的配置。 具体配置及使用请查看文档

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

使用CLI将组件添加到项目中,初始化components.json配置

npx shadcn-ui@latest init

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/assets/styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": "jg-"
  },
  "aliases": {
    "components": "@/uiComponents",//添加组件到的位置
    "utils": "@/lib/schemaUtils"//cn函数的位置
  }
}

入口文件处引入globals.css

import "@/assets/styles/globals.css";
import "@/assets/styles/styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
// import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

添加组件

npx shadcn-ui@latest add [component]