diff --git a/docs-vuepress/guide/platform/index.md b/docs-vuepress/guide/platform/platform.md
similarity index 100%
rename from docs-vuepress/guide/platform/index.md
rename to docs-vuepress/guide/platform/platform.md
diff --git a/docs-vuepress/guide/platform/rn-unocss.md b/docs-vuepress/guide/platform/rn-unocss.md
new file mode 100644
index 000000000..0213182c2
--- /dev/null
+++ b/docs-vuepress/guide/platform/rn-unocss.md
@@ -0,0 +1,407 @@
+## 使用原子类
+
+Mpx 使用 unocss 作为原子类引擎，使得在使用 mpx 开发跨端项目也可以使用原子类。如果要在你的项目当中集成原子类的能力，具体操作请参照接入文档。
+
+受限于 RN 平台的样式规则能力限制，绝大部分的 unocss 提供的原子类并不能在跨 RN 项目当中使用，以下是目前所支持的原子类：
+
+> 对于不支持的原子类，在项目编译构建阶段会将不支持的原子类以 error 形式提示，且最终的编译产物当中不会产出对应的原子类结果
+
+
+#### [Typography](https://windicss.org/utilities/general/typography.html#typography)
+
+| 规则                      | 是否支持 |                         备注                          |
+| :------------------------ | :------: | :---------------------------------------------------: |
+| Font family               |    是    |                                                       |
+| Font size                 |    是    |                                                       |
+| Font style                |    是    |                                                       |
+| Font weight               |    是    |                                                       |
+| Font Variant Numberic     |    否    |                                                       |
+| Hyphens                   |    否    |                                                       |
+| Letter spacing            |    是    |                                                       |
+| Line height               |    是    |                                                       |
+| Tab size                  |    否    |                                                       |
+| Text alignment            |    是    |                                                       |
+| Text color                |    是    |                                                       |
+| Text decoration           |    是    |                                                       |
+| Text decoration style     |    是    |                 ios 支持，安卓不支持                  |
+| Text decoration thickness |    否    |                                                       |
+| Text underline offset     |    否    |                                                       |
+| Text decoration opacity   |    是    |                                                       |
+| Text indent               |    否    |                                                       |
+| Text opacity              |    是    |                                                       |
+| Text shadow               |    是    |                                                       |
+| Text stroke               |    否    |                                                       |
+| Text stroke color         |    否    |                                                       |
+| Text transform            |    是    |                                                       |
+| Vertical alignment        |    是    | 安卓支持，ios 不支持，且只支持 auto/top/bottom/center |
+| White space               |    否    |                                                       |
+| Word break                |    否    |                                                       |
+| Write mode                |    否    |                                                       |
+| Writing orientation       |    否    |                                                       |
+
+#### Svg
+
+不支持
+
+#### [Variants](https://windicss.org/utilities/general/variants.html)
+
+* Screen Variants
+
+Mobile First
+
+| Varaint          | 规则 | 备注 |
+| :------------- | :------: | :---: |
+| sm   |    @media (min-width: 640px)    |      |
+| md   |    @media (min-width: 768px)    |      |
+| lg   |    @media (min-width: 1024px)    |      |
+| xl   |    @media (min-width: 1280px)    |      |
+| 2xl  |    @media (min-width: 1536px)    |      |
+
+Desktop First
+
+| Varaint          | 规则 | 备注 |
+| :------------- | :------: | :---: |
+| <sm   |    @media (max-width: 640px)    |      |
+| <md   |    @media (max-width: 768px)    |      |
+| <lg   |    @media (max-width: 1024px)    |      |
+| <xl   |    @media (max-width: 1280px)    |      |
+| <2xl  |    @media (max-width: 1536px)    |      |
+
+Only Screen
+
+| Varaint          | 规则 | 备注 |
+| :------------- | :------: | :---: |
+| @sm   |   @media (min-width: 640px) and (max-width: 768px)    |      |
+| @md   |   @media (min-width: 768px) and (max-width: 1024px)    |      |
+| @lg   |   @media (min-width: 1024px) and (max-width: 1280px)    |      |
+| @xl   |   @media (min-width: 1280px) and (max-width: 1536px)    |      |
+| @2xl  |   @media (min-width: 1536px)    |      |
+
+* Pseudo Elements
+
+目前仅支持 `hover`
+
+* Theme Variants
+
+| Varaint          | 规则 | 备注 |
+| :------------- | :------: | :---: |
+| dark   |   暗色模式    |      |
+| light   |   亮色模式    |      |
+
+* Orientation Variants
+
+| Varaint          | 规则 | 备注 |
+| :------------- | :------: | :---: |
+| portrait   |   竖屏    |      |
+| landscape   |   横屏    |      |
+
+#### [Screen Readers](https://windicss.org/utilities/accessibility/screen-readers.html)
+
+不支持
+
+#### [Animation](https://windicss.org/utilities/animations/animation.html)
+
+不支持
+
+#### [Transforms](https://windicss.org/utilities/animations/transforms.html)
+
+| 规则                | 是否支持 | 备注 |
+| :------------------ | :------: | :--: |
+| Transform Type      |    是    |      |
+| Transform Origin    |    是    |      |
+| Transform Rotate    |    是    |      |
+| Transform Scale     |    是    |      |
+| Transform Skew      |    是    |      |
+| Transform Translate |    是    |      |
+| Perspective         |    是    |      |
+| Perspective Origin  |    是    |      |
+
+#### [Transitions](https://windicss.org/utilities/animations/transitions.html)
+
+不支持
+
+#### [Background](https://windicss.org/utilities/backgrounds/background.html)
+
+| 规则                  | 是否支持 |                  备注                  |
+| :-------------------- | :------: | :------------------------------------: |
+| Background attachment |    否    |                                        |
+| Background clip       |    否    |                                        |
+| Background color      |    是    |                                        |
+| Background opacity    |    是    |                                        |
+| Background position   |    是    | 支持 left/right/top/bottom/center/数值 |
+| Background repeat     |    是    |            仅支持 no-repeat            |
+| Background size       |    是    |                                        |
+| Background origin     |    否    |                                        |
+
+#### [Gradients](https://windicss.org/utilities/backgrounds/gradients.html)
+
+| 规则               | 是否支持 | 备注 |
+| :----------------- | :------: | :--: |
+| Gradient Direction |    是    |      |
+| Gradient From      |    是    |      |
+| Gradient Via       |    是    |      |
+| Gradient To        |    是    |      |
+
+#### [Background Blend Mode](https://windicss.org/utilities/backgrounds/background-blend-mode.html)
+
+不支持
+
+
+不支持
+
+#### [Box Decoration Break](https://windicss.org/utilities/behaviors/box-decoration-break.html)
+
+不支持
+
+#### [Image Rendering](https://windicss.org/utilities/behaviors/image-rendering.html)
+
+不支持
+
+#### [Listing](https://windicss.org/utilities/behaviors/listings.html)
+
+| 规则          | 是否支持 | 备注 |
+| :------------- | :------: | :---: |
+| List style type   |    否    |      |
+| List style position    |    否    |      |
+| List style image    |    否    |      |
+
+#### [Overflow](https://windicss.org/utilities/behaviors/overflow.html)
+
+仅支持 `hidden`、`scroll`、`visible` 属性值
+
+#### [Overflow Behavior](https://windicss.org/utilities/behaviors/overscroll-behavior.html)
+
+不支持
+
+#### [Placeholder](https://windicss.org/utilities/behaviors/placeholder.html)
+
+不支持
+
+#### [Border](https://windicss.org/utilities/borders/border.html)
+
+| 规则          | 是否支持 | 备注 |
+| :------------- | :------: | :---: |
+| Border radius   |    是    |  不支持 border-inline-start、border-inline-end、border-block-start、border-block-end 属性，其他都支持    |
+| Border width    |    是    |      |
+| Border color     |    是    |      |
+| Border opacity     |    是    |      |
+| Border style     |    是    |  不支持 double 样式，其他都支持   |
+
+#### [Divider](https://windicss.org/utilities/borders/divider.html)
+
+| 规则          | 是否支持 | 备注 |
+| :------------- | :------: | :---: |
+| Divider width   |    否    |     |
+| Divider color    |    否    |      |
+| Divider opacity    |    否    |      |
+| Divider style   |    否    |      |
+
+#### [Outline](https://windicss.org/utilities/borders/outline.html)
+
+| 规则          | 是否支持 | 备注 |
+| :------------- | :------: | :---: |
+| Outline solid   |    否    |     |
+| Outline dotted    |    否    |      |
+
+#### [Ring](https://windicss.org/utilities/borders/ring.html)
+
+| 规则          | 是否支持 | 备注 |
+| :------------- | :------: | :---: |
+| Ring width   |    否    |     |
+| Ring color    |    否    |      |
+| Ring opacity    |    否    |      |
+| Ring offset width    |    否    |      |
+| Ring offset color    |    否    |      |
+
+
+#### [Box Shadow](https://windicss.org/utilities/effects/box-shadow.html)
+
+| 规则          | 是否支持 | 备注 |
+| :------------- | :------: | :---: |
+| Box shadow size   |    是    |     |
+| Box shadow color    |    是    |      |
+
+#### [Opacity](https://windicss.org/utilities/effects/opacity.html)
+
+支持
+
+#### [Mix Blend Mode](https://windicss.org/utilities/effects/mix-blend-mode.html)
+
+不支持
+
+
+#### [Filter](https://windicss.org/utilities/filters/filter.html)
+
+RN 0.76 支持，且存在机型的兼容性问题，具体参见 [RN 官方文档](https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#box-shadow-and-filter-style-props)
+
+| 规则          | 是否支持 | 备注 |
+| :------------- | :------: | :---: |
+| Filter blur   |    是    |      |
+| Filter brightness     |    是    |      |
+| Filter contrast     |    是    |      |
+| Filter drop shadow     |    是    |      |
+| Filter grayscale     |    是    |     |
+| Filter hue rotate    |    是    |      |
+| Filter invert     |    是    |      |
+| Filter saturate     |    是    |      |
+| Filter Sepia     |    是    |      |
+
+#### [Backdrop Filter](https://windicss.org/utilities/filters/backdrop-filter.html)
+
+不支持
+
+| 规则          | 是否支持 | 备注 |
+| :------------- | :------: | :---: |
+| Backdrop blur   |    否   |      |
+| Backdrop brightness     |    否    |      |
+| Backdrop contrast     |    否    |      |
+| Backdrop drop shadow     |    否    |      |
+| Backdrop grayscale     |    否    |     |
+| Backdrop hue rotate    |    否    |      |
+| Backdrop invert     |    否    |      |
+| Backdrop saturate     |    否    |      |
+| Backdrop Sepia     |    否    |      |
+
+
+#### [Accent Color](https://windicss.org/utilities/interactivity/accent-color.html)
+
+不支持
+
+#### [Appearance](https://windicss.org/utilities/interactivity/appearance.html)
+
+部分支持(backface-visible,backface-hidden)
+
+#### [Cursor](https://windicss.org/utilities/interactivity/cursor.html)
+
+不支持，TextInput 有属性控制
+
+#### [Caret](https://windicss.org/utilities/interactivity/caret.html)
+
+| 规则          | 是否支持 | 备注 |
+| :------------ | :------: | :--: |
+| Caret Color   |    否    |      |
+| Caret Opacity |    否    |      |
+
+#### [Pointer Events](https://windicss.org/utilities/interactivity/pointer-events.html)
+
+部分支持(auto,none)
+
+#### [Resize](https://windicss.org/utilities/interactivity/resize.html)
+
+不支持
+
+#### [Scroll Behavior](https://windicss.org/utilities/interactivity/scroll-behavior.html)
+
+不支持
+
+#### [Touch Action](https://windicss.org/utilities/interactivity/touch-action.html)
+
+不支持
+
+#### [User Select](https://windicss.org/utilities/interactivity/user-select.html)
+
+支持(none,auto,all,text)
+
+#### [Will Change](https://windicss.org/utilities/interactivity/will-change.html)
+
+不支持
+
+#### [Columns](https://windicss.org/utilities/layout/columns.html)
+
+不支持
+
+#### [Container](https://windicss.org/utilities/layout/container.html)
+
+不支持
+
+#### [Display](https://windicss.org/utilities/layout/display.html)
+
+| 规则                | 是否支持 | 备注 |
+| :------------------ | :------: | :--: |
+| Block               |    否    |      |
+| Inline Block        |    否    |      |
+| Inline              |    否    |      |
+| Flow Root           |    否    |      |
+| Contents            |    否    |      |
+| Hidden              |    是    |      |
+| Visibility          |    否    |      |
+| Visibility          |    否    |      |
+| Backface Visibility |    否    |      |
+| List Item           |    否    |      |
+
+#### [Flexbox](https://windicss.org/utilities/layout/flexbox.html)
+
+| 规则                | 是否支持 | 备注 |
+| :------------------ | :------: | :--: |
+| Flex | 是 | |
+| Flex Basis | 是 | |
+| Inline Flex | 是 | |
+| Flex Direction | 是 | |
+| Flex Wrap | 是 | |
+| Flex Stretch | 是 | |
+| Flex Grow | 是 | |
+| Flex Shrink | 是 | |
+
+#### [Grid](https://windicss.org/utilities/layout/grid.html)
+
+不支持
+
+#### [Positioning](https://windicss.org/utilities/layout/positioning.html)
+
+| 规则 | 是否支持 | 备注 |
+| :------------------ | :------: | :--: |
+| Justify Content | 是 | 只支持(justify-around,justify-between,justify-center,justify-end,justify-evenly,justify-start) |
+| Justify Items | 否 | |
+| Justify Self | 否 | |
+| Align Content | 是 | |
+| Align Items | 是 | |
+| Align Self | 是 | |
+| Place Content | 否 | |
+| Place Items | 否 | |
+| Place Self | 否 | |
+| Position | 是 | 只支持(absolute,relative) |
+| Top / Right / Bottom / Left | 是 | |
+| Floats | 否 | |
+| Clear | 否 | |
+| Isolation | 否 | |
+| Object Fit | 否 | |
+| Object Position | 否 | |
+| Z-Index | 是 | |
+
+#### [Sizing](https://windicss.org/utilities/layout/sizing.html)
+
+| 规则 | 是否支持 | 备注 |
+| :------------------ | :------: | :--: |
+| Width | 是 | |
+| Min-Width | 是 | |
+| Max-Width | 是 | |
+| Min-Height | 是 | |
+| Max-Height | 是 | |
+| Box Sizing | 否 | |
+
+#### [Spacing](https://windicss.org/utilities/layout/spacing.html)
+
+| 规则 | 是否支持 | 备注 |
+| :------------------ | :------: | :--: |
+| Padding | 是 | |
+| Padding Y | 是 | |
+| Padding X | 是 | |
+| Padding Top | 是 | |
+| Padding Left | 是 | |
+| Padding Bottom | 是 | |
+| Padding Right | 是 | |
+| Margin | 是 | |
+| Margin Y | 是 | |
+| Margin X | 是 | |
+| Margin Top | 是 | |
+| Margin Left | 是 | |
+| Margin Bottom | 是 | |
+| Margin Right | 是 | |
+| Space Between Y | 否 | |
+| Space Between Y Reverse | 否 | |
+| Space Between X | 否 | |
+| Space Between X Reverse | 否 | |
+
+#### [Tables](https://windicss.org/utilities/layout/tables.html)
+
+不支持
diff --git a/docs-vuepress/guide/platform/web.md b/docs-vuepress/guide/platform/web.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/legacy/windicss-plugin/lib/index.js b/legacy/windicss-plugin/lib/index.js
index df2410a8c..3de75d356 100644
--- a/legacy/windicss-plugin/lib/index.js
+++ b/legacy/windicss-plugin/lib/index.js
@@ -165,7 +165,7 @@ class MpxWindicssPlugin {
     if (filepath) {
       compilation.fileDependencies.add(filepath)
       // fix jiti require cache for watch
-      delete require.cache[filepath]
+      // delete require.cache[filepath]
     }
 
     if (!config) {
diff --git a/package.json b/package.json
index 323995991..903e0a3db 100644
--- a/package.json
+++ b/package.json
@@ -32,11 +32,14 @@
     "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.2.0",
     "lerna": "^8.1.8",
     "typescript": "^4.1.3",
-    "vuepress": "^1.9.7"
+    "vuepress": "^1.9.7",
+    "vue-template-compiler": "^2.7.16",
+    "webpack": "^4.47.0"
   },
   "workspaces": [
     "packages/*"
diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js
index 3566007f7..fe1a30217 100644
--- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js
+++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js
@@ -1,5 +1,5 @@
 import { isObject, isArray, dash2hump, cached, isEmptyObject } from '@mpxjs/utils'
-import { Dimensions, StyleSheet } from 'react-native'
+import { Dimensions, StyleSheet, Appearance } from 'react-native'
 
 let { width, height } = Dimensions.get('screen')
 
@@ -43,35 +43,6 @@ function formatValue (value) {
 
 global.__formatValue = formatValue
 
-const escapeReg = /[()[\]{}#!.:,%'"+$]/g
-const escapeMap = {
-  '(': '_pl_',
-  ')': '_pr_',
-  '[': '_bl_',
-  ']': '_br_',
-  '{': '_cl_',
-  '}': '_cr_',
-  '#': '_h_',
-  '!': '_i_',
-  '/': '_s_',
-  '.': '_d_',
-  ':': '_c_',
-  ',': '_2c_',
-  '%': '_p_',
-  '\'': '_q_',
-  '"': '_dq_',
-  '+': '_a_',
-  $: '_si_'
-}
-
-const mpEscape = cached((str) => {
-  return str.replace(escapeReg, function (match) {
-    if (escapeMap[match]) return escapeMap[match]
-    // unknown escaped
-    return '_u_'
-  })
-})
-
 function concat (a = '', b = '') {
   return a ? b ? (a + ' ' + b) : a : b
 }
@@ -168,24 +139,39 @@ export default function styleHelperMixin () {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
-        const result = {}
+        let result = {}
+        let unoResult = {}
+        const unoVarResult = {}
         const classMap = this.__getClassMap?.() || {}
+        const { unoClassMap = {}, unoVarClassMap = {}, unoPreflightsClassMap = {} } = global.__getUnoClass?.() || {}
+        let hasUnoClass = false
         const appClassMap = global.__getAppClassMap?.() || {}
-
         if (staticClass || dynamicClass) {
-          // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
-          const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
+          const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
           classString.split(/\s+/).forEach((className) => {
             if (classMap[className]) {
               Object.assign(result, classMap[className])
             } else if (appClassMap[className]) {
               // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
               Object.assign(result, appClassMap[className])
+            } else if (unoClassMap[className]) {
+              hasUnoClass = true
+              Object.assign(unoResult, unoClassMap[className])
+            } else if (unoVarClassMap[className]) {
+              Object.assign(unoVarResult, unoVarClassMap[className])
             } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
               Object.assign(result, this.__props[className])
             }
           })
+          if (hasUnoClass) {
+            // 两个类需要前置默认css变量
+            if (unoResult.transform || unoResult.filter) {
+              unoResult = Object.assign({}, unoPreflightsClassMap, unoResult)
+            }
+            // 合并uno工具变量
+            result = Object.assign({}, unoResult, unoVarResult, result)
+          }
         }
 
         if (staticStyle || dynamicStyle) {
@@ -198,8 +184,38 @@ export default function styleHelperMixin () {
             display: 'none'
           })
         }
-
         return isEmptyObject(result) ? empty : result
+      },
+      __getDynamicClass (dynamicClass, mediaQueryClass) {
+        return [dynamicClass, this.__getMediaQueryClass(mediaQueryClass)]
+      },
+      __getMediaQueryClass (mediaQueryClass = []) {
+        if (!mediaQueryClass.length) return ''
+        const { width, height } = Dimensions.get('screen')
+        const colorScheme = Appearance.getColorScheme()
+        const { unoBreakpoints } = global.__getUnoClass?.() || {}
+        const { entries = [], entriesMap = {} } = unoBreakpoints
+        return mediaQueryClass.map(([className, querypoints = []]) => {
+          const res = querypoints.every(([prefix = '', point = 0]) => {
+            if (prefix === 'landscape') return width > height
+            if (prefix === 'portrait') return width <= height
+            if (prefix === 'dark') return colorScheme === 'dark'
+            if (prefix === 'light') return colorScheme === 'light'
+            const size = formatValue(entriesMap[point] || point)
+            const index = entries.findIndex(item => item[0] === point)
+            const isGtPrefix = prefix.startsWith('min-')
+            const isLtPrefix = prefix.startsWith('lt-') || prefix.startsWith('<') || prefix.startsWith('max-')
+            const isAtPrefix = prefix.startsWith('at-') || prefix.startsWith('~')
+            if (isGtPrefix) return width > size
+            if (isLtPrefix) return width < size
+            if (isAtPrefix && (index && index < entries.length - 1)) {
+              return width >= size && width < formatValue(entries[index + 1][1])
+            }
+            return width > size
+          })
+
+          return res ? className : ''
+        })
       }
     }
   }
diff --git a/packages/unocss-base/lib/index.js b/packages/unocss-base/lib/index.js
index 670dbd383..8edaf24de 100644
--- a/packages/unocss-base/lib/index.js
+++ b/packages/unocss-base/lib/index.js
@@ -1,11 +1,24 @@
-const { presetUno } = require('@unocss/preset-uno')
+import { presetUno } from '@unocss/preset-uno'
+import presetLegacyCompat from '@unocss/preset-legacy-compat'
+import presetRn from '../preset-rn/index.js'
 
 // eslint-disable-next-line
 const remRE = /(-?[\.\d]+)rem/g
 
-module.exports = function presetMpx (options = {}) {
+export default function presetMpx (options = {}) {
+  const mpxCurrentTargetMode = process.env.MPX_CURRENT_TARGET_MODE
+  const isReact = mpxCurrentTargetMode === 'ios' || mpxCurrentTargetMode === 'android'
+  const extraPresets = []
+  if (isReact) {
+    extraPresets.push(presetRn())
+    extraPresets.push(presetLegacyCompat({
+      commaStyleColorFunction: true
+    }))
+    options.dark = 'media'
+  }
   const uno = presetUno(options)
   const { baseFontSize = 37.5 } = options
+
   return {
     ...uno,
     name: '@mpxjs/unocss-base',
@@ -17,11 +30,12 @@ module.exports = function presetMpx (options = {}) {
       util.entries.forEach((i) => {
         const value = i[1]
         if (typeof value === 'string' && remRE.test(value)) {
-          i[1] = value.replace(remRE, (_, p1) => process.env.MPX_CURRENT_TARGET_MODE === 'web'
+          i[1] = value.replace(remRE, (_, p1) => mpxCurrentTargetMode === 'web'
             ? `${p1 * baseFontSize * (100 / 750).toFixed(8)}vw`
             : `${p1 * baseFontSize}rpx`)
         }
       })
-    }
+    },
+    presets: extraPresets
   }
 }
diff --git a/packages/unocss-base/package.json b/packages/unocss-base/package.json
index 68b8ec19d..938f91e63 100644
--- a/packages/unocss-base/package.json
+++ b/packages/unocss-base/package.json
@@ -6,6 +6,7 @@
   "directories": {
     "lib": "lib"
   },
+  "type": "module",
   "scripts": {},
   "author": "",
   "license": "Apache-2.0",
@@ -14,6 +15,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@unocss/preset-uno": "^0.52.7"
+    "@unocss/preset-uno": "^0.65.1",
+    "@unocss/preset-legacy-compat": "^0.65.1"
   }
 }
diff --git a/packages/unocss-base/preset-rn/index.js b/packages/unocss-base/preset-rn/index.js
new file mode 100644
index 000000000..5cfdda7cc
--- /dev/null
+++ b/packages/unocss-base/preset-rn/index.js
@@ -0,0 +1,49 @@
+import rules, { blocklistRules } from './rules/index.js'
+import { normalizeTransfromVar } from './rules/transforms.js'
+import theme from './theme.js'
+import blocklistVariants from './variants/index.js'
+import { transformBase } from '@unocss/preset-mini/rules'
+import { filterBase } from '@unocss/preset-wind/rules'
+
+function normalizePreflightBase (preflightBase) {
+  normalizeTransfromVar(preflightBase)
+  return preflightBase
+}
+
+function preflights () {
+  return [
+    {
+      layer: 'preflights',
+      getCSS ({ theme, generator }) {
+        generator._mpx2rnUnoPreflightBase = {
+          ...normalizePreflightBase(transformBase),
+          ...filterBase
+        }
+      }
+    }
+  ]
+}
+
+function postprocess (utilsObject) {
+  const everyIsVar = utilsObject.entries.every(v => {
+    return v[0].startsWith('--un')
+  })
+  if (everyIsVar) {
+    utilsObject.layer = 'varUtilities'
+  }
+  return utilsObject
+}
+
+export default function presetRnMpx () {
+  return {
+    name: '@mpxjs/unocss-preset-rn',
+    rules,
+    theme,
+    preflights: preflights(),
+    postprocess: [postprocess],
+    blocklist: [
+      ...blocklistRules,
+      ...blocklistVariants
+    ]
+  }
+}
diff --git a/packages/unocss-base/preset-rn/rules/align.js b/packages/unocss-base/preset-rn/rules/align.js
new file mode 100644
index 000000000..8a91f7880
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/align.js
@@ -0,0 +1,31 @@
+import { verticalAligns } from '@unocss/preset-mini/rules'
+
+const support = [
+  'mid',
+  'start',
+  'btm',
+  'end',
+  'auto',
+  'top',
+  'bottom',
+  'middle'
+]
+
+const verticalAlignsRules = verticalAligns.map(([rule]) => (raw) => {
+  const result = raw.match(rule)
+  if (result && !support.includes(result[1])) {
+    return true
+  }
+})
+
+const textAligns = [
+  'text-start',
+  'text-end',
+  'text-align-start',
+  'text-align-end'
+]
+
+export {
+  verticalAlignsRules as verticalAligns,
+  textAligns
+}
diff --git a/packages/unocss-base/preset-rn/rules/animation.js b/packages/unocss-base/preset-rn/rules/animation.js
new file mode 100644
index 000000000..21f4d829c
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/animation.js
@@ -0,0 +1 @@
+export { animations } from '@unocss/preset-wind/rules'
diff --git a/packages/unocss-base/preset-rn/rules/background.js b/packages/unocss-base/preset-rn/rules/background.js
new file mode 100644
index 000000000..68d68b1a8
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/background.js
@@ -0,0 +1,23 @@
+const backgroundStyles = [
+  // attachments
+  'bg-fixed',
+  'bg-locale',
+  'bg-scroll',
+  // repeat
+  'bg-repeat',
+  'bg-repeat-x',
+  'bg-repeat-y',
+  'bg-repeat-round',
+  'bg-repeat-space',
+  // origins
+  'bg-origin-border',
+  'bg-origin-padding',
+  'bg-origin-content',
+  // clips
+  'bg-clip-border',
+  'bg-clip-content',
+  'bg-clip-padding',
+  'bg-clip-text'
+]
+
+export { backgroundStyles }
diff --git a/packages/unocss-base/preset-rn/rules/behaviors.js b/packages/unocss-base/preset-rn/rules/behaviors.js
new file mode 100644
index 000000000..7350e2beb
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/behaviors.js
@@ -0,0 +1,13 @@
+import { imageRenderings, overscrolls, listStyle, accents, carets } from '@unocss/preset-wind/rules'
+import { appearance, outline, willChange } from '@unocss/preset-mini/rules'
+
+export default [
+  ...overscrolls,
+  ...imageRenderings,
+  ...listStyle,
+  ...outline,
+  ...willChange,
+  ...appearance,
+  ...accents,
+  ...carets
+]
diff --git a/packages/unocss-base/preset-rn/rules/border.js b/packages/unocss-base/preset-rn/rules/border.js
new file mode 100644
index 000000000..9512db8c4
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/border.js
@@ -0,0 +1,23 @@
+import { borders } from '@unocss/preset-mini/rules'
+
+const unSupport = [
+  's',
+  'e',
+  'bs',
+  'be',
+  'is',
+  'ie',
+  'block',
+  'inline'
+]
+
+const bordersRules = borders.map(([rule]) => (raw) => {
+  const result = raw.match(rule)
+  if (raw === 'border-double') {
+    return true
+  } else if (result && unSupport.includes(result[1])) {
+    return true
+  }
+})
+
+export default bordersRules
diff --git a/packages/unocss-base/preset-rn/rules/color.js b/packages/unocss-base/preset-rn/rules/color.js
new file mode 100644
index 000000000..57935e132
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/color.js
@@ -0,0 +1 @@
+export { colorScheme } from '@unocss/preset-mini/rules'
diff --git a/packages/unocss-base/preset-rn/rules/columns.js b/packages/unocss-base/preset-rn/rules/columns.js
new file mode 100644
index 000000000..d5f256d25
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/columns.js
@@ -0,0 +1 @@
+export { columns } from '@unocss/preset-wind/rules'
diff --git a/packages/unocss-base/preset-rn/rules/container.js b/packages/unocss-base/preset-rn/rules/container.js
new file mode 100644
index 000000000..8e79d4f6f
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/container.js
@@ -0,0 +1,7 @@
+import { containerParent } from '@unocss/preset-mini/rules'
+import { container } from '@unocss/preset-wind/rules'
+
+export {
+  containerParent,
+  container
+}
diff --git a/packages/unocss-base/preset-rn/rules/decoration.js b/packages/unocss-base/preset-rn/rules/decoration.js
new file mode 100644
index 000000000..cf22dd165
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/decoration.js
@@ -0,0 +1,32 @@
+import { textDecorations } from '@unocss/preset-mini/rules'
+import { isReg } from '../../utils/index.js'
+
+const unSupport = [
+  'auto',
+  'from-font',
+  'overline'
+]
+
+const textDecorationsRules = textDecorations.map(([rule]) => (raw) => {
+  if (isReg(rule)) {
+    const result = raw.match(rule)
+    if (result && unSupport.includes(result[1])) {
+      return true
+    }
+  }
+})
+
+const rules = [
+  // size
+  /^(?:underline|decoration)-(auto|from-font)$/,
+  // offset
+  /^(?:underline|decoration)-offset-(.+)$/,
+  // wavy style
+  'underline-wavy',
+  'decoration-wavy'
+]
+
+export default [
+  ...textDecorationsRules,
+  ...rules
+]
diff --git a/packages/unocss-base/preset-rn/rules/divide.js b/packages/unocss-base/preset-rn/rules/divide.js
new file mode 100644
index 000000000..8df08ef47
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/divide.js
@@ -0,0 +1 @@
+export { divides } from '@unocss/preset-wind/rules'
diff --git a/packages/unocss-base/preset-rn/rules/filters.js b/packages/unocss-base/preset-rn/rules/filters.js
new file mode 100644
index 000000000..70b95b2d6
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/filters.js
@@ -0,0 +1,23 @@
+import { filters } from '@unocss/preset-wind/rules'
+import { isReg, isString } from '../../utils/index.js'
+
+const unSupport = [
+  'backdrop-filter',
+  'backdrop-filter-none'
+]
+
+const filterRules = filters.map(([rule]) => (raw) => {
+  const reg = /^backdrop-/
+  let result = ''
+  if (isString(rule) && unSupport.includes(raw)) {
+    return true
+  } else if (isReg(rule)) {
+    const matcher = raw.match(rule)
+    if (matcher) {
+      result = matcher[0]
+      return reg.test(result)
+    }
+  }
+})
+
+export default filterRules
diff --git a/packages/unocss-base/preset-rn/rules/flex.js b/packages/unocss-base/preset-rn/rules/flex.js
new file mode 100644
index 000000000..469f60ef6
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/flex.js
@@ -0,0 +1,9 @@
+
+const flex = [
+  'flex-inline',
+  'inline-flex'
+]
+
+export {
+  flex
+}
diff --git a/packages/unocss-base/preset-rn/rules/gap.js b/packages/unocss-base/preset-rn/rules/gap.js
new file mode 100644
index 000000000..c1107ab69
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/gap.js
@@ -0,0 +1,12 @@
+import { gaps } from '@unocss/preset-mini/rules'
+
+const gapsRules = gaps.map(([rule]) => (raw) => {
+  const result = raw.match(rule)
+  if (result && result[0].startsWith('grid')) {
+    return true
+  }
+})
+
+export {
+  gapsRules as gaps
+}
diff --git a/packages/unocss-base/preset-rn/rules/global.js b/packages/unocss-base/preset-rn/rules/global.js
new file mode 100644
index 000000000..4c5cd1f09
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/global.js
@@ -0,0 +1,3 @@
+import { globalKeywords } from '../../utils/index.js'
+
+export const globalRules = globalKeywords.map((v) => [new RegExp(`.*-${v}$`)])
diff --git a/packages/unocss-base/preset-rn/rules/grid.js b/packages/unocss-base/preset-rn/rules/grid.js
new file mode 100644
index 000000000..769b179b0
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/grid.js
@@ -0,0 +1 @@
+export { grids } from '@unocss/preset-mini/rules'
diff --git a/packages/unocss-base/preset-rn/rules/index.js b/packages/unocss-base/preset-rn/rules/index.js
new file mode 100644
index 000000000..61c9d1e2d
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/index.js
@@ -0,0 +1,88 @@
+import { colorScheme } from './color.js'
+import { backgroundStyles } from './background.js'
+import { paddingAndMargins, spaces } from './spacing.js'
+import typography from './typography.js'
+import shadow from './shadow.js'
+import behaviors from './behaviors.js'
+import { overflows } from './layout.js'
+import filters from './filters.js'
+import staticRules from './static.js'
+import {
+  flexGridJustifiesAlignments,
+  justifies,
+  orders,
+  placements,
+  positions,
+  floats,
+  boxSizing
+} from './positions.js'
+import { flex } from './flex.js'
+import { globalRules } from './global.js'
+import { textAligns, verticalAligns } from './align.js'
+import { container, containerParent } from './container.js'
+import { animations } from './animation.js'
+import { columns } from './columns.js'
+import { divides } from './divide.js'
+import { placeholders } from './placeholder.js'
+import { scrolls } from './scrolls.js'
+import { tables } from './table.js'
+import { touchActions } from './touch-actions.js'
+import { viewTransition } from './view-transition.js'
+import { gaps } from './gap.js'
+import { transitions } from './transition.js'
+import { svgUtilities } from './svg.js'
+import { rings } from './ring.js'
+import border from './border.js'
+import { transforms } from './transforms.js'
+import { lineClamps } from './line-clamp.js'
+import { grids } from './grid.js'
+import textDecorations from './decoration.js'
+
+export const blocklistRules = [
+  ...textDecorations,
+  ...backgroundStyles,
+  ...border,
+  ...overflows,
+  // space
+  ...paddingAndMargins,
+  ...spaces,
+  // position
+  ...positions,
+  ...flexGridJustifiesAlignments,
+  ...justifies,
+  ...orders,
+  ...placements,
+  ...floats,
+  ...boxSizing,
+  // static
+  ...staticRules,
+  ...verticalAligns,
+  ...textAligns,
+  ...flex,
+  ...gaps,
+  ...typography,
+  ...behaviors,
+  ...containerParent,
+  ...container,
+  ...colorScheme,
+  ...columns,
+  ...grids,
+  ...placeholders,
+  ...tables,
+  ...scrolls,
+  ...divides,
+  ...touchActions,
+  ...rings,
+  ...lineClamps,
+  ...svgUtilities,
+  ...viewTransition,
+  ...transitions,
+  ...animations,
+  ...filters,
+  ...globalRules
+]
+
+export default [
+  ...shadow,
+  ...transforms
+]
diff --git a/packages/unocss-base/preset-rn/rules/layout.js b/packages/unocss-base/preset-rn/rules/layout.js
new file mode 100644
index 000000000..325df879e
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/layout.js
@@ -0,0 +1,12 @@
+const overflows = [
+  (raw) => {
+    const reg = /^(?:overflow|of)-(.+)$/
+    const match = raw.match(reg)
+    if (match && !['hidden', 'visible', 'scroll'].includes(match[1])) {
+      return true
+    }
+  },
+  /^(?:overflow|of)-([xy])-(.+)$/
+]
+
+export { overflows }
diff --git a/packages/unocss-base/preset-rn/rules/line-clamp.js b/packages/unocss-base/preset-rn/rules/line-clamp.js
new file mode 100644
index 000000000..1d0e02241
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/line-clamp.js
@@ -0,0 +1 @@
+export { lineClamps } from '@unocss/preset-wind/rules'
diff --git a/packages/unocss-base/preset-rn/rules/placeholder.js b/packages/unocss-base/preset-rn/rules/placeholder.js
new file mode 100644
index 000000000..52442f7c8
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/placeholder.js
@@ -0,0 +1 @@
+export { placeholders } from '@unocss/preset-wind/rules'
diff --git a/packages/unocss-base/preset-rn/rules/positions.js b/packages/unocss-base/preset-rn/rules/positions.js
new file mode 100644
index 000000000..992463c11
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/positions.js
@@ -0,0 +1,54 @@
+import {
+  positions,
+  justifies,
+  orders,
+  alignments,
+  placements,
+  floats
+} from '@unocss/preset-mini/rules'
+
+const unSupport = ['sticky', 'fixed']
+
+const positionsRules = positions.map(([rule]) => (raw) => {
+  const result = raw.match(rule)
+  if (result && unSupport.includes(result[1])) {
+    return true
+  }
+})
+
+// 不支持的规则过滤覆盖
+const justifiesRules = [
+  'justify-left',
+  'justify-right',
+  'justify-stretch',
+  'justify-items-center',
+  'justify-items-end',
+  'justify-items-start',
+  'justify-items-stretch',
+  'justify-self-auto',
+  'justify-self-center',
+  'justify-self-end',
+  'justify-self-stretch',
+  'justify-self-start'
+]
+
+const flexGridJustifiesAlignments = [
+  // flex部分不支持
+  ...[...justifiesRules, ...placements].map((k) => `flex-${k}`),
+  // grid全部不支持
+  ...[...justifies, ...alignments, ...placements].map((k) => `grid-${k}`)
+]
+
+const boxSizing = [
+  'box-content'
+]
+
+export {
+  positionsRules as positions,
+  justifiesRules as justifies,
+  orders,
+  placements,
+  flexGridJustifiesAlignments,
+  floats,
+  boxSizing
+}
diff --git a/packages/unocss-base/preset-rn/rules/ring.js b/packages/unocss-base/preset-rn/rules/ring.js
new file mode 100644
index 000000000..ba307e3f8
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/ring.js
@@ -0,0 +1 @@
+export { rings } from '@unocss/preset-mini/rules'
diff --git a/packages/unocss-base/preset-rn/rules/scrolls.js b/packages/unocss-base/preset-rn/rules/scrolls.js
new file mode 100644
index 000000000..14d412008
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/scrolls.js
@@ -0,0 +1 @@
+export { scrolls } from '@unocss/preset-wind/rules'
diff --git a/packages/unocss-base/preset-rn/rules/shadow.js b/packages/unocss-base/preset-rn/rules/shadow.js
new file mode 100644
index 000000000..533bce0a8
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/shadow.js
@@ -0,0 +1,19 @@
+import { colorableShadows, colorResolver, h, hasParseableColor } from '@unocss/preset-mini/utils'
+
+const boxShadows = [
+  [/^shadow(?:-(.+))?$/, (match, context) => {
+    const [, d] = match
+    const { theme } = context
+    const v = theme.boxShadow?.[d || 'DEFAULT']
+    const c = d ? h.bracket.cssvar(d) : undefined
+
+    if ((v != null || c != null) && !hasParseableColor(c, theme, 'shadowColor')) {
+      return {
+        'box-shadow': colorableShadows(v || c, '--un-shadow-color').join(',')
+      }
+    }
+    return colorResolver('--un-shadow-color', 'shadow', 'shadowColor')(match, context)
+  }]
+]
+
+export default boxShadows
diff --git a/packages/unocss-base/preset-rn/rules/spacing.js b/packages/unocss-base/preset-rn/rules/spacing.js
new file mode 100644
index 000000000..57911d064
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/spacing.js
@@ -0,0 +1,25 @@
+import { margins, paddings } from '@unocss/preset-mini/rules'
+import { spaces } from '@unocss/preset-wind/rules'
+
+const unSupport = [
+  's',
+  'e',
+  'bs',
+  'be',
+  'is',
+  'ie',
+  'block',
+  'inline'
+]
+
+const paddingAndMargins = [...paddings, ...margins].map(([rule]) => (raw) => {
+  const result = raw.match(rule)
+  if (result && unSupport.includes(result[1])) {
+    return true
+  }
+})
+
+export {
+  paddingAndMargins,
+  spaces
+}
diff --git a/packages/unocss-base/preset-rn/rules/static.js b/packages/unocss-base/preset-rn/rules/static.js
new file mode 100644
index 000000000..e37d8d168
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/static.js
@@ -0,0 +1,48 @@
+import {
+  breaks,
+  contains,
+  contents,
+  contentVisibility,
+  cursors,
+  fontSmoothings,
+  resizes,
+  textWraps,
+  whitespaces
+} from '@unocss/preset-mini/rules'
+import { backgroundBlendModes, mixBlendModes, hyphens, isolations, objectPositions } from '@unocss/preset-wind/rules'
+
+const displays = [
+  'inline',
+  'block',
+  'inline-block',
+  'contents',
+  'flow-root',
+  'list-item'
+]
+
+const appearances = ['visible', 'invisible']
+
+const textOverflows = ['text-ellipsis', 'text-clip']
+
+const fontStyles = ['oblique', 'font-oblique']
+
+export default [
+  ...appearances,
+  ...breaks,
+  ...contains,
+  ...contents,
+  ...contentVisibility,
+  ...cursors,
+  ...displays,
+  ...fontSmoothings,
+  ...fontStyles,
+  ...resizes,
+  ...textOverflows,
+  ...textWraps,
+  ...whitespaces,
+  ...backgroundBlendModes,
+  ...mixBlendModes,
+  ...hyphens,
+  ...isolations,
+  ...objectPositions
+]
diff --git a/packages/unocss-base/preset-rn/rules/svg.js b/packages/unocss-base/preset-rn/rules/svg.js
new file mode 100644
index 000000000..50bc32713
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/svg.js
@@ -0,0 +1 @@
+export { svgUtilities } from '@unocss/preset-mini/rules'
diff --git a/packages/unocss-base/preset-rn/rules/table.js b/packages/unocss-base/preset-rn/rules/table.js
new file mode 100644
index 000000000..58568834e
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/table.js
@@ -0,0 +1 @@
+export { tables } from '@unocss/preset-wind/rules'
diff --git a/packages/unocss-base/preset-rn/rules/touch-actions.js b/packages/unocss-base/preset-rn/rules/touch-actions.js
new file mode 100644
index 000000000..737e28420
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/touch-actions.js
@@ -0,0 +1 @@
+export { touchActions } from '@unocss/preset-wind/rules'
diff --git a/packages/unocss-base/preset-rn/rules/transforms.js b/packages/unocss-base/preset-rn/rules/transforms.js
new file mode 100644
index 000000000..5036e7e31
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/transforms.js
@@ -0,0 +1,68 @@
+import { transforms } from '@unocss/preset-mini/rules'
+
+const transformBase = {
+  '--un-rotate': '0deg',
+  '--un-rotate-x': '0deg',
+  '--un-rotate-y': '0deg',
+  '--un-rotate-z': '0deg',
+  '--un-scale-x': 1,
+  '--un-scale-y': 1,
+  '--un-scale-z': 1,
+  '--un-skew-x': '0deg',
+  '--un-skew-y': '0deg',
+  '--un-translate-x': 0,
+  '--un-translate-y': 0,
+  '--un-translate-z': 0
+}
+
+const checkVars = [
+  '--un-rotate',
+  '--un-rotate-x',
+  '--un-rotate-y',
+  '--un-rotate-z',
+  '--un-skew-x',
+  '--un-skew-y'
+]
+
+function normalizeTransfromVar (res) {
+  checkVars.forEach(key => {
+    if (res[key] !== undefined && res[key] === 0) {
+      res[key] = '0deg'
+    }
+  })
+  return res
+}
+
+function getPreflight (preflightKeys) {
+  return Object.fromEntries(preflightKeys.map(key => [key, transformBase[key]]))
+}
+
+const transformRules = transforms.map(v => {
+  const [regex, matcher, ...another] = v
+  const options = another[0]
+  if (options && options.custom && options.custom.preflightKeys) {
+    if (typeof matcher === 'function') {
+      return [
+        regex,
+        (...args) => {
+          let res = matcher(...args)
+          if (res) {
+            if (Array.isArray(res)) {
+              res = Object.fromEntries(res)
+            }
+            normalizeTransfromVar(res)
+          }
+          return res
+        },
+        ...another
+      ]
+    }
+    if (typeof matcher === 'object') {
+      const preflight = getPreflight(options.custom.preflightKeys)
+      Object.assign(matcher, preflight)
+    }
+  }
+  return v
+})
+
+export { transformRules as transforms, normalizeTransfromVar }
diff --git a/packages/unocss-base/preset-rn/rules/transition.js b/packages/unocss-base/preset-rn/rules/transition.js
new file mode 100644
index 000000000..7a052475f
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/transition.js
@@ -0,0 +1 @@
+export { transitions } from '@unocss/preset-mini/rules'
diff --git a/packages/unocss-base/preset-rn/rules/typography.js b/packages/unocss-base/preset-rn/rules/typography.js
new file mode 100644
index 000000000..fbc8c24a8
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/typography.js
@@ -0,0 +1,31 @@
+import {
+  writingModes,
+  writingOrientations,
+  hyphens,
+  fontVariantNumeric
+} from '@unocss/preset-wind/rules'
+import {
+  textStrokes,
+  textIndents,
+  tabSizes,
+  whitespaces,
+  breaks,
+  textOverflows,
+  textWraps,
+  fontSmoothings
+} from '@unocss/preset-mini/rules'
+
+export default [
+  ...textIndents,
+  ...textStrokes,
+  ...tabSizes,
+  ...whitespaces,
+  ...breaks,
+  ...textOverflows,
+  ...hyphens,
+  ...writingModes,
+  ...writingOrientations,
+  ...textWraps,
+  ...fontSmoothings,
+  ...fontVariantNumeric
+]
diff --git a/packages/unocss-base/preset-rn/rules/view-transition.js b/packages/unocss-base/preset-rn/rules/view-transition.js
new file mode 100644
index 000000000..d2b49ec49
--- /dev/null
+++ b/packages/unocss-base/preset-rn/rules/view-transition.js
@@ -0,0 +1 @@
+export { viewTransition } from '@unocss/preset-wind/rules'
diff --git a/packages/unocss-base/preset-rn/theme.js b/packages/unocss-base/preset-rn/theme.js
new file mode 100644
index 000000000..eabbbd401
--- /dev/null
+++ b/packages/unocss-base/preset-rn/theme.js
@@ -0,0 +1,28 @@
+import { platformSelect } from '../utils/index.js'
+
+export default {
+  preflightRoot: [],
+  letterSpacing: {
+    tighter: '-0.5px',
+    tight: '-0.25px',
+    normal: '0px',
+    wide: '0.25px',
+    wider: '0.5px',
+    widest: '1px'
+  },
+  boxShadow: {
+    DEFAULT: '0 1px 3px rgba(0 0 0 / 0.1)',
+    none: '0 0 rgba(0 0 0 / 0)',
+    sm: '0 1px 2px rgba(0 0 0 / 0.05)',
+    md: '0 4px 6px rgba(0 0 0 / 0.1)',
+    lg: '0 10px 15px rgba(0 0 0 / 0.1)',
+    xl: '0 20px 25px rgba(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px rgba(0 0 0 / 0.25)',
+    inner: 'inset 0 2px 4px 0 rgba(0 0 0 / 0.05)'
+  },
+  fontFamily: {
+    sans: platformSelect({ android: 'san-serif', ios: "'system font'" }),
+    serif: platformSelect({ android: 'serif', ios: 'Georgia' }),
+    mono: platformSelect({ android: 'mono', ios: "'Courier New'" })
+  }
+}
diff --git a/packages/unocss-base/preset-rn/variants/index.js b/packages/unocss-base/preset-rn/variants/index.js
new file mode 100644
index 000000000..11c8dd58e
--- /dev/null
+++ b/packages/unocss-base/preset-rn/variants/index.js
@@ -0,0 +1,80 @@
+import {
+  variantAria,
+  variantTaggedAriaAttributes,
+  variantChildren,
+  variantCombinators,
+  variantContainerQuery,
+  variantTaggedDataAttributes,
+  variantLanguageDirections,
+  variantStartingStyle,
+  variantSupports,
+  variantSelector,
+  variantCssLayer,
+  variantScope
+} from '@unocss/preset-mini/variants'
+import {
+  variantCombinators as windVariantCombinator,
+  variantContrasts,
+  variantMotions,
+  variantSpaceAndDivide,
+  variantStickyHover,
+  placeholderModifier
+} from '@unocss/preset-wind/variants'
+
+const wrapVariant = function (variant = {}) {
+  return function (raw) {
+    const ctx = {
+      rawSelector: raw,
+      theme: this.config,
+      generator: this
+    }
+    let match
+    if (typeof variant === 'function') {
+      match = variant
+    } else if (variant.match) {
+      match = variant.match
+    } else {
+      return
+    }
+    if (match(raw, ctx)) {
+      return true
+    }
+  }
+}
+
+const transformVariants = function (variantsArr) {
+  return variantsArr.map(variants => {
+    if (Array.isArray(variants)) {
+      return variants.map(variant => wrapVariant(variant))
+    } else {
+      return wrapVariant(variants)
+    }
+  }).reduce((preV, curV) => {
+    if (Array.isArray(curV)) {
+      return preV.concat(...curV)
+    } else {
+      return preV.concat(curV)
+    }
+  }, [])
+}
+
+export default transformVariants([
+  variantAria,
+  variantTaggedAriaAttributes,
+  variantChildren,
+  variantCombinators,
+  variantContainerQuery,
+  variantTaggedDataAttributes,
+  variantLanguageDirections,
+  variantStartingStyle,
+  variantSupports,
+  variantSelector,
+  variantCssLayer,
+  variantScope,
+  windVariantCombinator,
+  variantContrasts,
+  variantMotions,
+  variantSpaceAndDivide,
+  variantStickyHover,
+  placeholderModifier
+])
diff --git a/packages/unocss-base/utils/index.js b/packages/unocss-base/utils/index.js
new file mode 100644
index 000000000..73b9cd7cc
--- /dev/null
+++ b/packages/unocss-base/utils/index.js
@@ -0,0 +1,91 @@
+const EMPTY = ' '
+
+const isReg = (reg) => {
+  return reg instanceof RegExp
+}
+
+const isString = (str) => {
+  return typeof str === 'string'
+}
+
+const isFunction = (fn) => {
+  return typeof fn === 'function'
+}
+
+const ruleCallback = ([match], { generator }) => {
+  return ruleFallback(match, generator)
+}
+
+const ruleFallback = (match, generator) => {
+  generator.blocked.add(match)
+  return EMPTY
+}
+
+const genEmptyRule = (...rules) => {
+  return rules.map(rule => [rule, ruleCallback])
+}
+
+const transformEmptyRule = (...rulesArr) => {
+  return rulesArr.map(rules => rules.map(rule => {
+    if (isString(rule[0])) { // staticRule
+      return [
+        [rule[0], null],
+        [new RegExp(`^${rule[0]}$`), ruleCallback]
+      ]
+    }
+    return [[rule[0], ruleCallback]]
+  })).reduce((preV, curV) => preV.concat(...curV), [])
+}
+
+const findRawRules = (matcher, rawRules, byReg = false) => {
+  if (!Array.isArray(matcher)) {
+    matcher = [matcher]
+  }
+
+  return matcher.map(m => {
+    const result = []
+    rawRules.forEach(r => {
+      const tester = r[0]
+      if (isString(m)) {
+        if (byReg) {
+          if (isReg(tester) && tester.test(m)) {
+            result.push(r)
+          }
+        } else {
+          if (isString(tester) && m === tester) {
+            result.push(r)
+          }
+        }
+      } else if (isReg(m)) {
+        if (isString(tester) && m.test(tester)) {
+          result.push(r)
+        }
+      }
+    })
+    return result
+  })
+  .filter(item => !!item.length)
+  .reduce((preV, curV) => preV.concat(curV), [])
+}
+
+export const globalKeywords = ['inherit', 'initial', 'revert', 'revert-layer', 'unset']
+
+export const makeGlobalStaticRules = prefix => {
+  return globalKeywords.map(v => `${prefix}-${v}`)
+}
+
+export const platformSelect = (options = {}) => {
+  const platform = process.env.MPX_CURRENT_TARGET_MODE
+  return options[platform] || ''
+}
+
+export {
+  genEmptyRule,
+  transformEmptyRule,
+  findRawRules,
+  ruleFallback,
+  isFunction,
+  isReg,
+  isString,
+  ruleCallback
+}
diff --git a/packages/unocss-plugin/lib/index.js b/packages/unocss-plugin/lib/index.js
index ef5ef6441..1135d61ab 100644
--- a/packages/unocss-plugin/lib/index.js
+++ b/packages/unocss-plugin/lib/index.js
@@ -1,33 +1,43 @@
-const path = require('path')
-const { minimatch } = require('minimatch')
-const unoConfig = require('@unocss/config')
-const core = require('@unocss/core')
-const mpxConfig = require('@mpxjs/webpack-plugin/lib/config')
-const toPosix = require('@mpxjs/webpack-plugin/lib/utils/to-posix')
-const fixRelative = require('@mpxjs/webpack-plugin/lib/utils/fix-relative')
-const parseRequest = require('@mpxjs/webpack-plugin/lib/utils/parse-request')
-const { has } = require('@mpxjs/webpack-plugin/lib/utils/set')
-const MpxWebpackPlugin = require('@mpxjs/webpack-plugin')
-const UnoCSSWebpackPlugin = require('./web-plugin')
-const transformerDirectives = require('@unocss/transformer-directives').default
-const transformerVariantGroup = require('@unocss/transformer-variant-group')
-const {
+import * as path from 'path'
+import { minimatch } from 'minimatch'
+import * as unoConfig from '@unocss/config'
+import * as core from '@unocss/core'
+import mpxConfig from '@mpxjs/webpack-plugin/lib/config.js'
+import toPosix from '@mpxjs/webpack-plugin/lib/utils/to-posix.js'
+import fixRelative from '@mpxjs/webpack-plugin/lib/utils/fix-relative.js'
+import parseRequest from '@mpxjs/webpack-plugin/lib/utils/parse-request.js'
+import set from '@mpxjs/webpack-plugin/lib/utils/set.js'
+import env from '@mpxjs/webpack-plugin/lib/utils/env.js'
+import MpxWebpackPlugin from '@mpxjs/webpack-plugin'
+import { UnoCSSWebpackPlugin } from './web-plugin/index.js'
+import { UnoCSSRNWebpackPlugin } from './rn-plugin/index.js'
+import transformerDirectives from '@unocss/transformer-directives'
+import transformerVariantGroup from '@unocss/transformer-variant-group'
+import {
   parseClasses,
   parseStrings,
   parseMustache,
   stringifyAttr,
   parseComments,
   parseCommentConfig
-} = require('./parser')
-const { getReplaceSource, getConcatSource, getRawSource } = require('./source')
-const {
+} from './parser.js'
+import {
+  getReplaceSource,
+  getConcatSource,
+  getRawSource
+} from './source.js'
+import {
   transformStyle,
   buildAliasTransformer,
   transformGroups,
   mpEscape,
   cssRequiresTransform
-} = require('./transform')
-const platformPreflightsMap = require('./platform')
+} from './transform.js'
+import platformPreflightsMap from './platform.js'
+
+const { has } = set
+const { isWeb, isReact } = env
+
 const PLUGIN_NAME = 'MpxUnocssPlugin'
 
 function filterFile (file, scan) {
@@ -210,7 +220,7 @@ class MpxUnocssPlugin {
     sources.forEach((item) => {
       compilation.fileDependencies.add(item)
       // fix jiti require cache for watch
-      delete require.cache[item]
+      // delete require.cache[item]
     })
 
     const platformPreflights = platformPreflightsMap[mode] || []
@@ -234,11 +244,12 @@ class MpxUnocssPlugin {
       return
     }
     const mode = this.mode = mpxPluginInstance.options.mode
-    if (mode === 'web') {
+    if (isWeb(mode) || isReact(mode)) {
       const { webOptions } = this.options
-      if (!getPlugin(compiler, UnoCSSWebpackPlugin)) {
+      const WebpackPlugin = isReact(mode) ? UnoCSSRNWebpackPlugin : UnoCSSWebpackPlugin
+      if (!getPlugin(compiler, WebpackPlugin)) {
         // todo 考虑使用options.config/configFiles读取配置对象后再与webOptions合并后传递给UnoCSSWebpackPlugin，保障读取的config对象与mp保持一致
-        compiler.options.plugins.push(new UnoCSSWebpackPlugin(webOptions))
+        compiler.options.plugins.push(new WebpackPlugin(webOptions))
       }
       compiler.hooks.done.tap(PLUGIN_NAME, ({ compilation }) => {
         for (const dep of compilation.fileDependencies) {
@@ -256,7 +267,7 @@ class MpxUnocssPlugin {
     }, (compilation) => {
       const { __mpx__: mpx } = compilation
       mpx.hasUnoCSS = true
-      if (mode === 'web') return
+      if (isWeb(mode) || isReact(mode)) return
       compilation.hooks.processAssets.tapPromise({
         name: PLUGIN_NAME,
         stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS
@@ -524,4 +535,4 @@ class MpxUnocssPlugin {
   }
 }
 
-module.exports = MpxUnocssPlugin
+export default MpxUnocssPlugin
diff --git a/packages/unocss-plugin/lib/parser.js b/packages/unocss-plugin/lib/parser.js
index 1ce02abc7..3966a9ce9 100644
--- a/packages/unocss-plugin/lib/parser.js
+++ b/packages/unocss-plugin/lib/parser.js
@@ -1,4 +1,4 @@
-const { parseMustache, stringifyAttr } = require('@mpxjs/webpack-plugin/lib/template-compiler/compiler')
+import { parseMustache, stringifyAttr } from '@mpxjs/webpack-plugin/lib/template-compiler/compiler.js'
 
 function parseClasses (content) {
   const output = []
@@ -78,7 +78,7 @@ function parseStrings (content) {
   return output
 }
 
-module.exports = {
+export {
   parseClasses,
   parseStrings,
   parseComments,
diff --git a/packages/unocss-plugin/lib/platform.js b/packages/unocss-plugin/lib/platform.js
index 08ba96519..793a88a20 100644
--- a/packages/unocss-plugin/lib/platform.js
+++ b/packages/unocss-plugin/lib/platform.js
@@ -1,6 +1,6 @@
 // todo 此处进行跨端preflights定义，保障跨端样式表现一致，待补充完善
 // todo 目前不支持声明web preflight，待完善
-module.exports = {
+export default {
   ali: [
     {
       getCSS: () => `
diff --git a/packages/unocss-plugin/lib/rn-plugin/index.js b/packages/unocss-plugin/lib/rn-plugin/index.js
new file mode 100644
index 000000000..d8f1087b0
--- /dev/null
+++ b/packages/unocss-plugin/lib/rn-plugin/index.js
@@ -0,0 +1,130 @@
+import WebpackSources from 'webpack-sources'
+import nodePath from 'path'
+import { createContext, normalizeAbsolutePath } from '../web-plugin/utils.js'
+import { RESOLVED_ID_RE } from '../web-plugin/consts.js'
+import { getClassMap } from '@mpxjs/webpack-plugin/lib/react/style-helper.js'
+import shallowStringify from '@mpxjs/webpack-plugin/lib/utils/shallow-stringify.js'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url) // 当前文件的绝对路径
+const __dirname = nodePath.dirname(__filename) // 当前文件的目录路径
+
+const PLUGIN_NAME = 'unocss:webpack'
+
+const reLetters = /[a-z]+/gi
+
+function WebpackPlugin (configOrPath, defaults) {
+  return {
+    apply (compiler) {
+      // transform 提取tokens
+      compiler.options.module.rules.unshift({
+        enforce: 'pre',
+        use: (data) => {
+          if (data.resource == null) { return [] }
+
+          const id = normalizeAbsolutePath(data.resource + (data.resourceQuery || ''))
+          if (compiler.__unoCtx.filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) {
+            return [{
+              loader: nodePath.resolve(__dirname, '../web-plugin/transform-loader')
+            }]
+          }
+
+          return []
+        }
+      })
+
+      compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+        compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => {
+          const mpx = compilation.__mpx__
+          const { mode, srcMode } = mpx
+          const ctx = compiler.__unoCtx
+          const uno = ctx.uno
+          // 清空transformCache避免watch修改不生效
+          ctx.transformCache.clear()
+          const tokens = new Set()
+          for (const module of compilation.modules) {
+            const assetsInfo = module.buildInfo.assetsInfo || new Map()
+            for (const [, { unocssTokens } = {}] of assetsInfo) {
+              if (unocssTokens) {
+                for (const token of unocssTokens) {
+                  tokens.add(token)
+                }
+              }
+            }
+          }
+          const result = await uno.generate(tokens, { minify: true })
+          if (uno.blocked.size) {
+            compilation.errors.push(`[Mpx Unocss]: all those '${[...uno.blocked].join(', ')}' class utilities is not supported in react native mode`)
+          }
+          const getLayersClassMap = (layers) => {
+            return getClassMap({
+              content: result.getLayers(layers),
+              filename: 'mpx2rn-unocss',
+              mode,
+              srcMode,
+              warn: msg => {
+                compilation.warnings.push(msg)
+              },
+              error: msg => {
+                compilation.errors.push(msg)
+              },
+              formatValueFn: 'formatValue'
+            })
+          }
+          const classMap = getLayersClassMap(result.layers.filter(v => v !== 'varUtilities'))
+          const utilitiesClassMap = getLayersClassMap(['varUtilities'])
+          const preflightsClassMap = uno._mpx2rnUnoPreflightBase
+
+          const files = Object.keys(compilation.assets)
+          for (const file of files) {
+            if (file === '*') { return }
+            let code = compilation.assets[file].source().toString()
+            let replaced = false
+            code = code
+              .replace('__unoCssMapPlaceholder__', () => {
+                replaced = true
+                return shallowStringify(classMap)
+              })
+              .replace('__unoVarUtilitiesCssMap__', () => {
+                return shallowStringify(utilitiesClassMap)
+              })
+              .replace('__unoCssMapPreflights__', () => {
+                return JSON.stringify(preflightsClassMap)
+              })
+              .replace('__unoCssBreakpointsPlaceholder__', () => {
+                const breakpoints = uno.config.theme.breakpoints || {}
+                const entries = Object.entries(breakpoints)
+                  .sort((a, b) => Number.parseInt(a[1].replace(reLetters, '')) - Number.parseInt(b[1].replace(reLetters, '')))
+                return JSON.stringify({
+                  entries,
+                  entriesMap: breakpoints
+                })
+              })
+            if (replaced) { compilation.assets[file] = new WebpackSources.RawSource(code) }
+          }
+        })
+      })
+
+      compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+        const mpx = compilation.__mpx__
+        mpx.unoCtx = compiler.__unoCtx.uno
+      })
+
+      compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, async (compilation) => {
+        const ctx = await createContext(configOrPath, defaults)
+        ctx.uno.config.blocklist = ctx.uno.config.blocklist.map((item) => {
+          if (typeof item === 'function') {
+            return item.bind(ctx.uno)
+          }
+          return item
+        })
+        compiler.__unoCtx = ctx
+        return ctx
+      })
+    }
+  }
+}
+
+export {
+  WebpackPlugin as UnoCSSRNWebpackPlugin
+}
diff --git a/packages/unocss-plugin/lib/source.js b/packages/unocss-plugin/lib/source.js
index 2c29592bf..124e22b1c 100644
--- a/packages/unocss-plugin/lib/source.js
+++ b/packages/unocss-plugin/lib/source.js
@@ -1,4 +1,5 @@
-const { ReplaceSource, RawSource, ConcatSource, Source } = require('webpack').sources
+import webpack from 'webpack'
+const { ReplaceSource, RawSource, ConcatSource, Source } = webpack.sources
 
 function getRawSource (s) {
   if (s instanceof RawSource) { return s }
@@ -17,7 +18,7 @@ function getConcatSource (s) {
   return new ConcatSource(s)
 }
 
-module.exports = {
+export {
   getRawSource,
   getReplaceSource,
   getConcatSource
diff --git a/packages/unocss-plugin/lib/transform.js b/packages/unocss-plugin/lib/transform.js
index bf0daffc9..0e2b46f61 100644
--- a/packages/unocss-plugin/lib/transform.js
+++ b/packages/unocss-plugin/lib/transform.js
@@ -1,6 +1,7 @@
-const MagicString = require('magic-string')
-const transformerDirectives = require('@unocss/transformer-directives').default
-const { getReplaceSource } = require('./source')
+import MagicString from 'magic-string'
+import transformerDirectives from '@unocss/transformer-directives'
+import { getReplaceSource } from './source.js'
+
 const escapedReg = /\\(.)/g
 
 function mpEscape (str, escapeMap = {}) {
@@ -81,7 +82,7 @@ async function transformStyle (
   return code
 }
 
-module.exports = {
+export {
   cssRequiresTransform,
   transformGroups,
   mpEscape,
diff --git a/packages/unocss-plugin/lib/web-plugin/consts.js b/packages/unocss-plugin/lib/web-plugin/consts.js
index e56289c26..6d91c5460 100644
--- a/packages/unocss-plugin/lib/web-plugin/consts.js
+++ b/packages/unocss-plugin/lib/web-plugin/consts.js
@@ -29,7 +29,7 @@ function getLayerPlaceholder (layer) {
   return `#--unocss--{layer:${layer}}`
 }
 
-module.exports = {
+export {
   LAYER_MARK_ALL,
   LAYER_PLACEHOLDER_RE,
   RESOLVED_ID_RE,
diff --git a/packages/unocss-plugin/lib/web-plugin/index.js b/packages/unocss-plugin/lib/web-plugin/index.js
index 860e398b3..34bf44486 100644
--- a/packages/unocss-plugin/lib/web-plugin/index.js
+++ b/packages/unocss-plugin/lib/web-plugin/index.js
@@ -1,19 +1,31 @@
-const WebpackSources = require('webpack-sources')
-const VirtualModulesPlugin = require('webpack-virtual-modules')
-const node_path = require('node:path')
-const process = require('process')
-const fs = require('fs')
-const { createContext, getPath, normalizeAbsolutePath } = require('./utils')
-const { LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE, RESOLVED_ID_RE, getLayerPlaceholder, resolveId, resolveLayer } = require('./consts')
+import WebpackSources from 'webpack-sources'
+import VirtualModulesPlugin from 'webpack-virtual-modules'
+import nodePath, { dirname } from 'path'
+import process from 'process'
+import fs from 'fs'
+import {
+  createContext,
+  getPath,
+  normalizeAbsolutePath
+} from './utils.js'
+import {
+  LAYER_MARK_ALL,
+  LAYER_PLACEHOLDER_RE,
+  RESOLVED_ID_RE,
+  getLayerPlaceholder,
+  resolveId,
+  resolveLayer
+} from './consts.js'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
 
 const PLUGIN_NAME = 'unocss:webpack'
-const VIRTUAL_MODULE_PREFIX = node_path.resolve(process.cwd(), '_virtual_')
+const VIRTUAL_MODULE_PREFIX = nodePath.resolve(process.cwd(), '_virtual_')
 
 function WebpackPlugin (configOrPath, defaults) {
   return {
     apply (compiler) {
-      const ctx = createContext(configOrPath, defaults)
-      const { uno, filter, transformCache } = ctx
       const entries = new Set()
       const __vfsModules = new Set()
       let __vfs = null
@@ -27,7 +39,7 @@ function WebpackPlugin (configOrPath, defaults) {
         __vfs = new VirtualModulesPlugin()
         compiler.options.plugins.push(__vfs)
       }
-      compiler.__unoCtx = ctx
+
       // 添加解析虚拟模块插件 import 'uno.css' 并且注入layer代码
       const resolverPlugin = {
         apply (resolver) {
@@ -79,9 +91,9 @@ function WebpackPlugin (configOrPath, defaults) {
           if (data.resource == null) { return [] }
 
           const id = normalizeAbsolutePath(data.resource + (data.resourceQuery || ''))
-          if (filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) {
+          if (compiler.__unoCtx.filter('', id) && !id.match(/\.html$/) && !RESOLVED_ID_RE.test(id)) {
             return [{
-              loader: node_path.resolve(__dirname, './transform-loader')
+              loader: nodePath.resolve(__dirname, './transform-loader')
             }]
           }
 
@@ -91,8 +103,10 @@ function WebpackPlugin (configOrPath, defaults) {
 
       compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
         compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => {
+          const ctx = compiler.__unoCtx
+          const uno = ctx.uno
           // 清空transformCache避免watch修改不生效
-          transformCache.clear()
+          ctx.transformCache.clear()
           const tokens = new Set()
           for (const module of compilation.modules) {
             const assetsInfo = module.buildInfo.assetsInfo || new Map()
@@ -122,9 +136,21 @@ function WebpackPlugin (configOrPath, defaults) {
           }
         })
       })
+
+      compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+        const mpx = compilation.__mpx__
+        mpx.unoCtx = compiler.__unoCtx.uno
+      })
+
+      compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, async (compilation) => {
+        const ctx = await createContext(configOrPath, defaults)
+        compiler.__unoCtx = ctx
+        return ctx
+      })
     }
   }
 }
+
 function getLayer (id) {
   let layer = resolveLayer(getPath(id))
   if (!layer) {
@@ -133,4 +159,7 @@ function getLayer (id) {
   }
   return layer
 }
-module.exports = WebpackPlugin
+
+export {
+  WebpackPlugin as UnoCSSWebpackPlugin
+}
diff --git a/packages/unocss-plugin/lib/web-plugin/transform-loader.js b/packages/unocss-plugin/lib/web-plugin/transform-loader.js
index fd151e6bf..366aa43ee 100644
--- a/packages/unocss-plugin/lib/web-plugin/transform-loader.js
+++ b/packages/unocss-plugin/lib/web-plugin/transform-loader.js
@@ -1,14 +1,13 @@
-const { applyTransformers, isCssId } = require('./utils')
-const parseComponent = require('@mpxjs/webpack-plugin/lib/parser')
-const genComponentTag = require('@mpxjs/webpack-plugin/lib/utils/gen-component-tag')
-const path = require('path')
+import { applyTransformers, isCssId } from './utils.js'
+import parseComponent from '@mpxjs/webpack-plugin/lib/parser.js'
+import genComponentTag from '@mpxjs/webpack-plugin/lib/utils/gen-component-tag.js'
+import * as path from 'path'
 
 async function transform (code, map) {
   const callback = this.async()
   const ctx = this._compiler.__unoCtx
   const mpx = this.getMpx()
   if (!ctx || !mpx) return callback(null, code, map)
-  await ctx.ready
   // 使用resourcePath而不是resource作为id，规避query的影响
   const id = this.resourcePath
   const { extract, transformCache } = ctx
@@ -78,4 +77,4 @@ async function transform (code, map) {
   }
 }
 
-module.exports = transform
+export default transform
diff --git a/packages/unocss-plugin/lib/web-plugin/utils.js b/packages/unocss-plugin/lib/web-plugin/utils.js
index dfdabcc51..b3fef9b89 100644
--- a/packages/unocss-plugin/lib/web-plugin/utils.js
+++ b/packages/unocss-plugin/lib/web-plugin/utils.js
@@ -1,9 +1,9 @@
-const pluginutils = require('@rollup/pluginutils')
-const config = require('@unocss/config')
-const core = require('@unocss/core')
-const node_path = require('node:path')
-const MagicString = require('magic-string')
-const remapping = require('@ampproject/remapping')
+import * as pluginutils from '@rollup/pluginutils'
+import * as config from '@unocss/config'
+import * as core from '@unocss/core'
+import nodePath from 'path'
+import MagicString from 'magic-string'
+import remapping from '@ampproject/remapping'
 
 const INCLUDE_COMMENT = '@unocss-include'
 const IGNORE_COMMENT = '@unocss-ignore'
@@ -15,52 +15,48 @@ const sfcIdRE = /\.(vue|mpx)($|\?)/
 const templateIdRE = /\.(wxml|axml|swan|qml|ttml|qxml|jxml|ddml|html)($|\?)/
 const cssIdRE = /\.(wxss|acss|css|qss|ttss|jxss|ddss)($|\?)/
 
-function createContext (configOrPath, defaults = {}, extraConfigSources = []) {
+async function createContext (configOrPath, defaults = {}, extraConfigSources = []) {
   const root = process.cwd()
   let rawConfig = {}
-  const uno = core.createGenerator(rawConfig, defaults)
+
+  const uno = await core.createGenerator(rawConfig, defaults)
   let rollupFilter = pluginutils.createFilter(defaultInclude, defaultExclude)
   const idFilter = pluginutils.createFilter([sfcIdRE, templateIdRE, cssIdRE, core.cssIdRE])
-  const ready = reloadConfig()
-
-  async function reloadConfig () {
-    const result = await config.loadConfig(root, configOrPath, extraConfigSources, defaults)
-    rawConfig = result.config
-    uno.setConfig(rawConfig)
-    rollupFilter = pluginutils.createFilter(
-      rawConfig.include || defaultInclude,
-      rawConfig.exclude || defaultExclude
-    )
-    const presets = /* @__PURE__ */ new Set()
-    uno.config.presets.forEach((i) => {
-      if (!i.name) {
-        return
-      }
-      if (presets.has(i.name)) {
-        console.warn(`[unocss] duplication of preset ${i.name} found, there might be something wrong with your config.`)
-      } else {
-        presets.add(i.name)
-      }
-    })
 
-    const transformers = uno.config.transformers
-    if (transformers) {
-      const pre = []
-      const normal = []
-      const post = []
-      transformers.forEach(i => {
-        if (i.enforce === 'pre') pre.push(i)
-        else if (i.enforce === 'post') post.push(i)
-        else normal.push(i)
-      })
-      uno.config.transformers = [
-        ...pre,
-        ...normal,
-        ...post
-      ]
+  const result = await config.loadConfig(root, configOrPath, extraConfigSources, defaults)
+  rawConfig = result.config
+  await uno.setConfig(rawConfig)
+  rollupFilter = pluginutils.createFilter(
+    rawConfig.include || defaultInclude,
+    rawConfig.exclude || defaultExclude
+  )
+  const presets = /* @__PURE__ */ new Set()
+  uno.config.presets.forEach((i) => {
+    if (!i.name) {
+      return
     }
+    if (presets.has(i.name)) {
+      console.warn(`[unocss] duplication of preset ${i.name} found, there might be something wrong with your config.`)
+    } else {
+      presets.add(i.name)
+    }
+  })
 
-    return result
+  const transformers = uno.config.transformers
+  if (transformers) {
+    const pre = []
+    const normal = []
+    const post = []
+    transformers.forEach(i => {
+      if (i.enforce === 'pre') pre.push(i)
+      else if (i.enforce === 'post') post.push(i)
+      else normal.push(i)
+    })
+    uno.config.transformers = [
+      ...pre,
+      ...normal,
+      ...post
+    ]
   }
 
   async function extract (code, id) {
@@ -85,9 +81,6 @@ function createContext (configOrPath, defaults = {}, extraConfigSources = []) {
   }
 
   return {
-    get ready () {
-      return ready
-    },
     filter,
     uno,
     extract,
@@ -128,8 +121,8 @@ async function applyTransformers (ctx, original, id) {
 }
 
 function normalizeAbsolutePath (path) {
-  if (node_path.isAbsolute(path)) {
-    return node_path.normalize(path)
+  if (nodePath.isAbsolute(path)) {
+    return nodePath.normalize(path)
   } else {
     return path
   }
@@ -143,7 +136,7 @@ function isCssId (id) {
   return core.cssIdRE.test(id) || cssIdRE.test(id)
 }
 
-module.exports = {
+export {
   createContext,
   applyTransformers,
   getPath,
diff --git a/packages/unocss-plugin/package.json b/packages/unocss-plugin/package.json
index 18dd7e550..8ab2d3b2c 100644
--- a/packages/unocss-plugin/package.json
+++ b/packages/unocss-plugin/package.json
@@ -3,6 +3,7 @@
   "version": "2.9.69",
   "description": "mpx unocss webpack plugin",
   "main": "lib/index.js",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -19,13 +20,13 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.1",
     "@rollup/pluginutils": "^5.0.2",
-    "@unocss/config": "0.52.7",
-    "@unocss/core": "0.52.7",
-    "@unocss/transformer-directives": "^0.52.1",
-    "@unocss/transformer-variant-group": "^0.52.1",
+    "@unocss/config": "^0.65.1",
+    "@unocss/core": "^0.65.1",
+    "@unocss/transformer-directives": "^0.65.1",
+    "@unocss/transformer-variant-group": "^0.65.1",
     "magic-string": "^0.30.3",
     "minimatch": "^9.0.1",
-    "unocss": "^0.52.7",
+    "unocss": "^0.65.1",
     "webpack-sources": "^3.2.3",
     "webpack-virtual-modules": "^0.6.0"
   }
diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js
index 8a8cc97e3..cf51bc33f 100644
--- a/packages/webpack-plugin/lib/platform/style/wx/index.js
+++ b/packages/webpack-plugin/lib/platform/style/wx/index.js
@@ -163,6 +163,7 @@ module.exports = function getSpec ({ warn, error }) {
     }
     return true
   }
+
   // prop & value 校验：过滤的不合法的属性和属性值
   const verification = ({ prop, value, selector }, { mode }) => {
     return verifyProps({ prop, value, selector }, { mode }) && verifyValues({ prop, value, selector }) && ({ prop, value })
@@ -378,7 +379,7 @@ module.exports = function getSpec ({ warn, error }) {
     const values = parseValues(value)
     const transform = []
     values.forEach(item => {
-      const match = item.match(/([/\w]+)\(([^)]+)\)/)
+      const match = item.match(/(\w+)\(([^()]+|\s*var\([^)]+\))\)/)
       if (match && match.length >= 3) {
         let key = match[1]
         const val = match[2]
diff --git a/packages/webpack-plugin/lib/react/processStyles.js b/packages/webpack-plugin/lib/react/processStyles.js
index da9634580..c1777c571 100644
--- a/packages/webpack-plugin/lib/react/processStyles.js
+++ b/packages/webpack-plugin/lib/react/processStyles.js
@@ -23,7 +23,7 @@ module.exports = function (styles, {
         new Error('[style compiler][' + loaderContext.resource + ']: ' + msg)
       )
     }
-    const { mode, srcMode } = loaderContext.getMpx()
+    const { mode, srcMode, hasUnoCSS } = loaderContext.getMpx()
     async.eachOfSeries(styles, (style, i, callback) => {
       const scoped = style.scoped || autoScope
       const extraOptions = {
@@ -56,6 +56,23 @@ module.exports = function (styles, {
           error
         })
         if (ctorType === 'app') {
+          if (hasUnoCSS) {
+            output += `
+            let __unoClass
+            global.__getUnoClass = function () {
+              const formatValue = global.__formatValue
+              if (!__unoClass) {
+                __unoClass = {
+                  unoClassMap: __unoCssMapPlaceholder__,
+                  unoVarClassMap: __unoVarUtilitiesCssMap__,
+                  unoPreflightsClassMap: __unoCssMapPreflights__,
+                  unoBreakpoints:__unoCssBreakpointsPlaceholder__
+                }
+              }
+              return __unoClass
+            };\n
+            `
+          }
           output += `
           let __appClassMap
           global.__getAppClassMap = function() {
diff --git a/packages/webpack-plugin/lib/react/processTemplate.js b/packages/webpack-plugin/lib/react/processTemplate.js
index 2a4f7648c..a50c888c5 100644
--- a/packages/webpack-plugin/lib/react/processTemplate.js
+++ b/packages/webpack-plugin/lib/react/processTemplate.js
@@ -28,7 +28,9 @@ module.exports = function (template, {
     externalClasses,
     checkUsingComponents,
     autoVirtualHostRules,
-    customTextRules
+    customTextRules,
+    hasUnoCSS,
+    unoCtx
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
@@ -86,7 +88,9 @@ module.exports = function (template, {
         // web模式下实现抽象组件
         componentGenerics,
         hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
-        isCustomText: matchCondition(resourcePath, customTextRules)
+        isCustomText: matchCondition(resourcePath, customTextRules),
+        hasUnoCSS,
+        unoCtx
       })
 
       if (meta.wxsContentMap) {
diff --git a/packages/webpack-plugin/lib/react/style-helper.js b/packages/webpack-plugin/lib/react/style-helper.js
index c4bbe4687..44a5c6ac0 100644
--- a/packages/webpack-plugin/lib/react/style-helper.js
+++ b/packages/webpack-plugin/lib/react/style-helper.js
@@ -7,26 +7,29 @@ const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
-  const classMap = {}
-
-  const root = postcss.parse(content, {
-    from: filename
-  })
 
-  function formatValue (value) {
+function createFormatValue (formatValueFn) {
+  formatValueFn = formatValueFn || 'global.__formatValue'
+  return function (value) {
     let matched
     let needStringify = true
     if ((matched = numberRegExp.exec(value))) {
       value = matched[1]
       needStringify = false
     } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) {
-      value = `global.__formatValue(${JSON.stringify(value)})`
+      value = `${formatValueFn}(${JSON.stringify(value)})`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value
   }
+}
 
+function getClassMap ({ content, filename, mode, srcMode, warn, error, formatValueFn }) {
+  const classMap = {}
+  const formatValue = createFormatValue(formatValueFn)
+  const root = postcss.parse(content, {
+    from: filename
+  })
   const rulesRunner = getRulesRunner({
     mode,
     srcMode,
@@ -76,6 +79,8 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
       selectors.each(selector => {
         if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
           classMapKeys.push(selector.nodes[0].value)
+        } else if (selector.nodes.length === 2 && selector.nodes[0].type === 'class' && selector.nodes[1].type === 'pseudo') {
+          classMapKeys.push(selector.nodes[0].value + selector.nodes[1].value)
         } else {
           error('Only single class selector is supported in react native mode temporarily.')
         }
@@ -94,5 +99,7 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
 }
 
 module.exports = {
-  getClassMap
+  getClassMap,
+  unitRegExp,
+  numberRegExp
 }
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index dbe300bf0..10c0354f2 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -1065,6 +1065,107 @@ function stringifyWithResolveComputed (modelValue) {
   return result.join('+')
 }
 
+let unoVariantCached = null
+const initVariants = (unoCtx) => {
+  if (unoVariantCached) return unoVariantCached
+  const { config } = unoCtx
+  const separators = config.separators.join('|')
+  const breakpoints = Object.keys(config.theme.breakpoints || {}).join('|')
+  const sizePseudoReg = /(max-|min-)\[([^\]]*)\]:/
+  const breakPointsReg = new RegExp(`([al]t-|[<~]|max-)?(${breakpoints})(?:${separators})`)
+  const orientationReg = new RegExp(`(landscape|portrait)(?:${separators})`)
+  const pseudoClassReg = new RegExp(`(hover)(?:${separators})`) // 目前仅处理了 hover 状态
+  const colorSchemeReg = new RegExp(`(dark|light)(?:${separators})`)
+  unoVariantCached = {
+    sizePseudo: {
+      rule: sizePseudoReg,
+      matcher (input) {
+        return {
+          prefix: input[1],
+          point: input[2]
+        }
+      }
+    },
+    breakPoints: {
+      rule: breakPointsReg,
+      matcher (input) {
+        return {
+          prefix: input[1],
+          point: input[2]
+        }
+      }
+    },
+    orientation: {
+      rule: orientationReg,
+      matcher (input) {
+        return {
+          prefix: input[1],
+          point: ''
+        }
+      }
+    },
+    colorScheme: {
+      rule: colorSchemeReg,
+      matcher (input) {
+        return {
+          prefix: input[1],
+          point: ''
+        }
+      }
+    },
+    pseudoClassReg
+  }
+  return unoVariantCached
+}
+
+function processVariants (staticClass = '', variants) {
+  const pseudoClass = {}
+  const pseudoWithMediaQueryClass = []
+  const mediaQueryClass = []
+  const bReg = [variants.sizePseudo, variants.breakPoints, variants.orientation, variants.colorScheme]
+  const newStaticClass = staticClass.split(/\s+/).map(rawClass => {
+    let applied = true
+    const className = rawClass
+    const mediaQuery = []
+    while (applied) {
+      applied = false
+      for (const v of bReg) {
+        const match = rawClass.match(v.rule)
+        if (match) {
+          const { prefix, point } = v.matcher(match)
+          mediaQuery.push([prefix || '', point])
+          rawClass = rawClass.replace(match[0], '')
+          applied = true
+          break
+        }
+      }
+      if (!applied) {
+        break
+      }
+    }
+    const pseudoMatch = rawClass.match(variants.pseudoClassReg)
+    if (pseudoMatch) {
+      const pseudo = pseudoMatch[1]
+      if (mediaQuery.length) {
+        pseudoWithMediaQueryClass.push([className + ':' + pseudo, mediaQuery])
+      } else {
+        pseudoClass[pseudo] = pseudoClass[pseudo] || []
+        pseudoClass[pseudo].push(className + ':' + pseudo)
+      }
+    } else if (!pseudoMatch && mediaQuery.length) {
+      mediaQueryClass.push([className, mediaQuery])
+    }
+
+    return (!mediaQuery.length && !pseudoMatch) ? rawClass : ''
+  }).filter(Boolean).join(' ')
+  return {
+    newStaticClass,
+    pseudoClass,
+    pseudoWithMediaQueryClass,
+    mediaQueryClass
+  }
+}
+
 function processStyleReact (el, options) {
   // process class/wx:class/style/wx:style/wx:show for react native
   const dynamicClass = getAndRemoveAttr(el, config[mode].directive.dynamicClass).val
@@ -1077,6 +1178,19 @@ function processStyleReact (el, options) {
     staticHoverClass = staticHoverClass.replace(/\s+/g, ' ')
   }
 
+  let mediaQueryClass = []
+  let pseudoWithMediaQueryClass = []
+  if (options.hasUnoCSS) {
+    const variants = initVariants(options.unoCtx)
+    const result = processVariants(staticClass, variants)
+    staticClass = result.newStaticClass
+    if (result.pseudoClass.hover) {
+      staticHoverClass = staticHoverClass + result.pseudoClass.hover.join(' ')
+    }
+    mediaQueryClass = result.mediaQueryClass
+    pseudoWithMediaQueryClass = result.pseudoWithMediaQueryClass
+  }
+
   const dynamicStyle = getAndRemoveAttr(el, config[mode].directive.dynamicStyle).val
   let staticStyle = getAndRemoveAttr(el, 'style').val || ''
   staticStyle = staticStyle.replace(/\s+/g, ' ')
@@ -1086,7 +1200,7 @@ function processStyleReact (el, options) {
     error$1(`Attrs ${config[mode].directive.show} should have a value `)
   }
 
-  if (dynamicClass || staticClass || dynamicStyle || staticStyle || show) {
+  if (dynamicClass || staticClass || dynamicStyle || staticStyle || show || mediaQueryClass.length) {
     const staticClassExp = parseMustacheWithContext(staticClass).result
     const dynamicClassExp = parseMustacheWithContext(dynamicClass).result
     const staticStyleExp = parseMustacheWithContext(staticStyle).result
@@ -1096,15 +1210,16 @@ function processStyleReact (el, options) {
     addAttrs(el, [{
       name: 'style',
       // runtime helper
-      value: `{{this.__getStyle(${staticClassExp}, ${dynamicClassExp}, ${staticStyleExp}, ${dynamicStyleExp}${show === undefined ? '' : `, !(${showExp})`})}}`
+      value: `{{this.__getStyle(${staticClassExp}, ${mediaQueryClass.length ? `this.__getDynamicClass(${dynamicClassExp}, ${stringify(mediaQueryClass)})` : dynamicClassExp} , ${staticStyleExp}, ${dynamicStyleExp}${show === undefined ? '' : `, !(${showExp})`})}}`
     }])
   }
 
-  if (staticHoverClass && staticHoverClass !== 'none') {
+  // todo pseudo element 的动态计算
+  if ((staticHoverClass && staticHoverClass !== 'none') || pseudoWithMediaQueryClass.length) {
     const staticClassExp = parseMustacheWithContext(staticHoverClass).result
     addAttrs(el, [{
       name: 'hover-style',
-      value: `{{this.__getStyle(${staticClassExp})}}`
+      value: `{{this.__getStyle(${staticClassExp}, ${pseudoWithMediaQueryClass.length ? `this.__getMediaQueryClass(${stringify(pseudoWithMediaQueryClass)})` : ''})}}`
     }])
   }