react tailwindcss最简单的开始

参考教程：

Install Tailwind CSS with Vite - TailwindCSS中文文档 | TailwindCSS中文网https://www.tailwindcss.cn/docs/guides/vite操作过程：

Microsoft Windows [版本 10.0.26100.3476]
(c) Microsoft Corporation。保留所有权利。D:\gitee\tailwindCSS\20250409>npm create vite@latest react-tailwindcss -- --template react> npx
> create-vite react-tailwindcss --template react|
o  Scaffolding project in D:\gitee\tailwindCSS\20250409\react-tailwindcss...
|
—  Done. Now run:cd react-tailwindcssnpm installnpm run devD:\gitee\tailwindCSS\20250409>cd react-tailwindcssD:\gitee\tailwindCSS\20250409\react-tailwindcss>npm installadded 150 packages in 25s30 packages are looking for fundingrun `npm fund` for detailsD:\gitee\tailwindCSS\20250409\react-tailwindcss>npm install -D tailwindcss@3.4.17 postcss autoprefixeradded 93 packages in 8s58 packages are looking for fundingrun `npm fund` for detailsD:\gitee\tailwindCSS\20250409\react-tailwindcss>npx tailwindcss init -pCreated Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.jsD:\gitee\tailwindCSS\20250409\react-tailwindcss>codeD:\gitee\tailwindCSS\20250409\react-tailwindcss>

 形成的结构如图：

 

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

 ./src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

执行

npm run dev

修改app.jsx

import './App.css'function App() {return (<h1 className="text-3xl font-bold underline text-red-600">Hello world!</h1>)
}export default App

效果：

 

前段时间一直卡在@版本号的问题上了。为了其他小朋友们遇到类似 问题，所以记录之。

 

接下来，你需要按照以下步骤配置 shadcn/ui 并创建一个简单示例：

1. **初始化 shadcn/ui**
```bash
npx shadcn-ui@latest init
```
按提示选择配置（推荐选择 TypeScript 否，使用默认配置）

2. **安装基础依赖**
```bash
npm install @radix-ui/react-dropdown-menu @radix-ui/react-slot class-variance-authority clsx tailwind-merge
```

3. **添加一个按钮组件**
```bash
npx shadcn-ui@latest add button
```

4. **修改 `src/App.jsx` 文件**
```jsx
import { Button } from "./components/ui/button"

function App() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">shadcn/ui Demo</h1>
      <Button 
        variant="default" 
        size="lg"
        className="hover:scale-105 transition-transform"
      >
        Hello shadcn!
      </Button>
    </div>
  )
}

export default App
```

5. **验证配置**
确保 `tailwind.config.js` 包含以下内容：
```js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  // ... 其他配置保持不变
}
```

6. **运行开发服务器**
```bash
npm run dev
```

这时访问 http://localhost:5173 应该能看到一个现代风格的按钮组件。该按钮会：
- 自动应用默认主题颜色
- 包含悬停交互效果
- 拥有内置的尺寸控制
- 支持平滑的缩放动画

如果需要自定义样式，可以通过以下方式：
1. 使用 `className` 属性添加 Tailwind 类
2. 修改 `globals.css` 中的 CSS 变量
3. 调整 `tailwind.config.js` 的主题配置

常见问题排查：
1. 如果样式未生效，检查组件是否在 `content` 配置的路径中
2. 确保所有依赖项已正确安装
3. 重启开发服务器尝试刷新