Kaynağa Gözat

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

feige996 11 ay önce
ebeveyn
işleme
1ecb54583c
1 değiştirilmiş dosya ile 41 ekleme ve 0 silme
  1. 41 0
      docs/base/4-style2.md

+ 41 - 0
docs/base/4-style2.md

@@ -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的开发体验。