当前位置：首页 > news >正文

react tailwindcss最简单的开始

news 来源：原创 2025/4/20 5:42:22

参考教程：

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-tailwindcss
  npm install
  npm run dev


D:\gitee\tailwindCSS\20250409>cd react-tailwindcss

D:\gitee\tailwindCSS\20250409\react-tailwindcss>npm install

added 150 packages in 25s

30 packages are looking for funding
  run `npm fund` for details

D:\gitee\tailwindCSS\20250409\react-tailwindcss>npm install -D tailwindcss@3.4.17 postcss autoprefixer

added 93 packages in 8s

58 packages are looking for funding
  run `npm fund` for details

D:\gitee\tailwindCSS\20250409\react-tailwindcss>npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

D:\gitee\tailwindCSS\20250409\react-tailwindcss>code

D:\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. 重启开发服务器尝试刷新