unocss-preset-taro

面向 Taro 项目的 UnoCSS 预设与 PostCSS 辅助工具，重点解决小程序平台的选择器兼容问题。

项目来源与参考

本项目设计与实现主要参考以下开源项目：

• uni-helper/unocss-preset-uni
• pcdotfan/taro-plugin-tailwind

AI 参与说明

本仓库代码与文档包含 AI 辅助生成/改写内容（含方案整理、代码初稿与文档草拟），已由维护者进行人工审阅、调试与落地。

开源声明

本项目在设计和实现过程中参考了以下开源项目：

• https://github.com/uni-helper/unocss-preset-uni
• https://github.com/pcdotfan/taro-plugin-tailwind

本项目包含 AI 辅助生成与改写内容（包括代码初稿、文档草稿和重构建议），最终结果由维护者人工审阅、调试并负责发布。
如有与预期不符的行为，欢迎提交 Issue 或 PR 讨论。

功能特性

• 内置 presetUno，可选启用 presetAttributify
• 默认关闭 preflight（更贴近小程序约束）
• 平台变体：taro-h5: / taro-jd: / taro-mini:
• PostCSS 插件：小程序端将 * 选择器替换为 :root
• 兼容旧导出名 TarovPostcssPlugin

安装

pnpm add unocss unocss-preset-taro @unocss/postcss -D

使用方式

1. 配置 uno.config.ts

import { defineConfig } from 'unocss'
import presetTaro from 'unocss-preset-taro'

export default defineConfig({
  presets: [
    presetTaro({
      platform: process.env.TARO_ENV,
    }),
  ],
})

2. 配置 Taro 编译器（Vite）

import { defineConfig } from '@tarojs/cli'
import UnoCSS from 'unocss/vite'

export default defineConfig<'vite'>({
  compiler: {
    type: 'vite',
    vitePlugins: [UnoCSS()],
  },
})

3. 配置 postcss.config.js

const unoPostcss = require('@unocss/postcss')
const autoprefixer = require('autoprefixer')
const { createTaroPostcssPlugin } = require('unocss-preset-taro')

module.exports = {
  plugins: [
    unoPostcss(),
    createTaroPostcssPlugin({
      currentPlatform: process.env.TARO_ENV,
    }),
    autoprefixer(),
  ],
}

4. 在入口引入 Uno 样式

import 'uno.css'

平台变体示例

• taro-h5:bg-red-500：仅 H5 生效
• taro-jd:bg-red-500：仅京东小程序生效
• taro-mini:bg-red-500：所有小程序平台生效
• taro-[my-platform]:text-sm：自定义平台名（中括号语法）

选项说明

presetTaro(options)

• uno: boolean | object，默认 true
• attributify: boolean | object，默认 true
• platform: 当前平台，默认 process.env.TARO_ENV
• platforms: 平台别名映射
• miniPlatforms: 小程序平台列表
• variantPrefix: 变体前缀，默认 taro-

createTaroPostcssPlugin(options)

• targetSelector: 目标选择器，默认 *
• replaceSelector: 替换选择器，默认 :root
• currentPlatform: 当前平台，默认 process.env.TARO_ENV
• miniPlatforms: 小程序平台列表

License

MIT