Skip to content

关于使用 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的开发体验。

Released under the MIT License.