uniapp taro 如何使用 UnoCSS 原子化css

UnoCSS 是一个面向未来的现代化 CSS 框架，它提供了原子化 CSS 的概念。在 Taro 和 Uniapp 中使用 UnoCSS，你需要先安装 UnoCSS 及其相关的依赖。

1. 安装 UnoCSS 及其 CLI 工具：

npm install @unocss/core @unocss/preset-uno unocss

2. 在项目中创建一个 unocss.config.ts 文件，并配置你的原子样式规则：

// unocss.config.ts
import { defineConfig } from 'unocss'
 
export default defineConfig({
  rules: [
    // 这里定义你的原子样式规则
    ['m-10', { 'margin': '10px' }],
    ['p-10', { 'padding': '10px' }],
    // 更多规则...
  ],
})

3. 在 Taro 或 Uniapp 项目中使用 UnoCSS：

// 在组件或页面中
import { generateUtilityClasses } from 'unocss/vite'
 
const classes = generateUtilityClasses('m-10 p-10')
 
export default {
  // 在页面或组件的样式中使用生成的类名
  style: `
    .${classes.m10} {
      margin: 10px;
    }
    .${classes.p10} {
      padding: 10px;
    }
  `
}

请注意，上述代码是一个简化示例，实际使用时你需要配置 Vite 插件以及正确地集成到你的构建系统中。UnoCSS 官方文档提供了详细的集成指南和更多高级功能。