feat: 添加关于使用 TailwindCSS 的评估文档

This commit is contained in:
feige996 2025-05-19 17:26:51 +08:00
parent 16e49551ce
commit 1ecb54583c

41
docs/base/4-style2.md Normal file
View File

@ -0,0 +1,41 @@
# 关于使用 TailwindCSS
对于 unibest 项目使用 TailwindCSS 的评估如下:
1. **直接使用TailwindCSS的限制**
- 原生TailwindCSS是为Web设计的在小程序环境下会有兼容性问题
- 不支持rpx单位在小程序适配上有困难
- 需要额外配置postcss和purgeCSS才能在小程序工作
2. **当前UnoCSS的优势**
- 您的项目已经配置了`unocss-applet`,专门为小程序优化
- 支持rpx单位转换通过presetRemRpx
- 支持小程序属性化写法transformerAttributify
- 体积更小,按需生成样式
3. **替代方案建议**
- 保持使用UnoCSS它已经实现了Tailwind的大部分功能
- 可以通过安装`@unocss/preset-wind`来获得Tailwind风格的类名
```bash
pnpm add -D @unocss/preset-wind
```
然后在uno.config.ts中添加
```typescript
import { presetWind } from '@unocss/preset-wind'
export default defineConfig({
presets: [
presetWind(),
// 其他presets...
],
})
```
4. **结论**
在uni-app项目中UnoCSS是比原生TailwindCSS更合适的选择特别是针对小程序开发。通过`preset-wind`可以获得类似Tailwind的开发体验。