diff --git a/docs/base/4-style2.md b/docs/base/4-style2.md new file mode 100644 index 0000000..99ea1a5 --- /dev/null +++ b/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的开发体验。