feat: 添加关于使用 TailwindCSS 的评估文档
This commit is contained in:
parent
16e49551ce
commit
1ecb54583c
41
docs/base/4-style2.md
Normal file
41
docs/base/4-style2.md
Normal 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的开发体验。
|
Loading…
x
Reference in New Issue
Block a user