使用 Radix UI 和 Tailwind CSS 构建的精美组件

npm create vite@latest

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

{  "compilerOptions": {    // ...    "baseUrl": ".",    "paths": {      "@/*": [        "./src/*"      ]    }    // ...  }}

# (so you can import "path" without error)npm i -D @types/node

import path from "path"import react from "@vitejs/plugin-react"import { defineConfig } from "vite" export default defineConfig({  plugins: [react()],  resolve: {    alias: {      "@": path.resolve(__dirname, "./src"),    },  },})

npx shadcn-ui@latest init

Would you like to use TypeScript (recommended)? no / yesWhich style would you like to use? › DefaultWhich color would you like to use as base color? › SlateWhere is your global CSS file? › › src/index.cssDo you want to use CSS variables for colors? › no / yesWhere is your tailwind.config.js located? › tailwind.config.jsConfigure the import alias for components: › @/componentsConfigure the import alias for utils: › @/lib/utilsAre you using React Server Components? › no / yes (no)

npx shadcn-ui@latest add button

import { Button } from "@/components/ui/button" export default function Home() {  return (    <div>      <Button>Click me</Button>    </div>  )}