diff --git a/packages/transformer-attributify/src/index.ts b/packages/transformer-attributify/src/index.ts
index 4997c5b..9e053c1 100644
--- a/packages/transformer-attributify/src/index.ts
+++ b/packages/transformer-attributify/src/index.ts
@@ -66,7 +66,16 @@ export default function transformerAttributify(options: TransformerAttributifyOp
               else {
                 const attrs = await Promise.all(content.split(splitterRE).filter(Boolean)
                   .map(async (v) => {
-                    const token = v === '~' ? _name : v.startsWith('!') ? `!${_name}-${v.slice(1)}` : `${_name}-${v}`
+                    let token = v
+                    // b="~ green dark:(red 2)"
+                    if (v === '~') { token = _name }
+                    else if (v.includes(':')) {
+                      const splitV = v.split(':')
+                      token = `${splitV[0]}:${splitV[1]}`
+                    }
+                    else if (v.startsWith('!')) { token = `!${_name}-${v.slice(1)}` }
+                    else { token = `${_name}-${v}` }
+
                     return [token, !!await uno.parseToken(token)] as const
                   }))
                 const result = attrs.filter(([, v]) => v).map(([v]) => v)
diff --git a/playground/src/pages/index/index.vue b/playground/src/pages/index/index.vue
index 5c6a345..09de390 100644
--- a/playground/src/pages/index/index.vue
+++ b/playground/src/pages/index/index.vue
@@ -19,16 +19,20 @@ const bool = ref<boolean>()
       class="hover:bg-green"
     </div>
     <div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 px-2.5' : ''">
-      <div i-carbon-campsite inline-block text="xl !red" />
-      <div color="blue">
-        {{ `index${index + 1}` }}
+      <div i-carbon-campsite inline-block color="blue" text="xl !red" />
+      <div bg="green-(!200 800)">
+        {{ `index${index + 1}` }}{{ `index` }}
       </div>
     </div>
-    <div flex="~ col" border="2 blue">
+    <div flex="~ col" b="~ green dark:(red 2)">
       <div text-right h-10 flex="1" text="red" :class="{ 'text-sm': index > 0 }">
         0123456789
       </div>
-      <div h-10 flex="1" text-blue :class="[index > 1 ? 'text' : '']" :style="[index > 1 ? '' : '']" :type="index > 1">
+      <div
+        h-10 flex="1" :class="[index > 1 ? 'text' : '']"
+        text="blue dark:(red !bold)" :style="[index > 1 ? '' : '']"
+        :type="index > 1"
+      >
         {{ bgIgnore }}
       </div>
     </div>
diff --git a/test/fixtures/rules.vue b/test/fixtures/rules.vue
index a7a38f8..f1c9832 100644
--- a/test/fixtures/rules.vue
+++ b/test/fixtures/rules.vue
@@ -20,13 +20,19 @@ const bool = ref<boolean>()
     </div>
     <div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 px-2.5' : ''">
       <div i-carbon-campsite inline-block color="blue" text="xl !red" />
-      {{ `index${index + 1}` }}{{ `index` }}
+      <div bg="green-(!200 800)">
+        {{ `index${index + 1}` }}{{ `index` }}
+      </div>
     </div>
-    <div flex="~ col" border="2 blue">
+    <div flex="~ col" b="~ green dark:(red 2)">
       <div text-right h-10 flex="1" text="red" :class="{ 'text-sm': index > 0 }">
         0123456789
       </div>
-      <div h-10 flex="1" text-blue :class="[index > 1 ? 'text' : '']" :style="[index > 1 ? '' : '']" :type="index > 1">
+      <div
+        h-10 flex="1" :class="[index > 1 ? 'text' : '']"
+        text="blue dark:(red !bold)" :style="[index > 1 ? '' : '']"
+        :type="index > 1"
+      >
         {{ bgIgnore }}
       </div>
     </div>
diff --git a/test/transformer-applet.test.ts b/test/transformer-applet.test.ts
index 183ca3a..9da80aa 100644
--- a/test/transformer-applet.test.ts
+++ b/test/transformer-applet.test.ts
@@ -6,12 +6,17 @@ import { createGenerator } from '@unocss/core'
 import MagicString from 'magic-string'
 import transformerApplet from '@unocss-applet/transformer-applet'
 import presetUno from '@unocss/preset-uno'
+import { transformerDirectives, transformerVariantGroup } from 'unocss'
 
 describe('transformer-applet', () => {
   const uno = createGenerator({
     presets: [
       presetUno(),
     ],
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup(),
+    ],
   })
   const transformer = transformerApplet()
 
@@ -55,13 +60,19 @@ describe('transformer-applet', () => {
           </div>
           <div flex=\\"~ col gap-1\\" class=\\"p-1\\" items-center :class=\\"bool ? 'uno-2z589z' : ''\\">
             <div i-carbon-campsite inline-block color=\\"blue\\" text=\\"xl !red\\" />
-            {{ \`index\${index + 1}\` }}{{ \`index\` }}
+            <div bg=\\"green-(!200 800)\\">
+              {{ \`index\${index + 1}\` }}{{ \`index\` }}
+            </div>
           </div>
-          <div flex=\\"~ col\\" border=\\"2 blue\\">
+          <div flex=\\"~ col\\" b=\\"~ green dark:(red 2)\\">
             <div text-right h-10 flex=\\"1\\" text=\\"red\\" :class=\\"{ 'text-sm': index > 0 }\\">
               0123456789
             </div>
-            <div h-10 flex=\\"1\\" text-blue :class=\\"[index > 1 ? 'text' : '']\\" :style=\\"[index > 1 ? '' : '']\\" :type=\\"index > 1\\">
+            <div
+              h-10 flex=\\"1\\" :class=\\"[index > 1 ? 'text' : '']\\"
+              text=\\"blue dark:(red !bold)\\" :style=\\"[index > 1 ? '' : '']\\"
+              :type=\\"index > 1\\"
+            >
               {{ bgIgnore }}
             </div>
           </div>
@@ -95,7 +106,7 @@ describe('transformer-applet', () => {
       .rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
       .items-center{align-items:center;}
       .gap-1{grid-gap:0.25rem;gap:0.25rem;}
-      .border{border-width:1px;border-style:solid;}
+      .b{border-width:1px;border-style:solid;}
       .bg-\\\\[hsl\\\\(2\\\\.7\\\\,81\\\\.9\\\\%\\\\,69\\\\.6\\\\%\\\\)\\\\]{--un-bg-opacity:1;background-color:hsla(2.7,81.9%,69.6%,var(--un-bg-opacity));}
       .hover\\\\:bg-green:hover{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));}
       .bg-\\\\[url\\\\(https\\\\:\\\\/\\\\/static\\\\.runoob\\\\.com\\\\/images\\\\/demo\\\\/demo2\\\\.jpg\\\\)\\\\]{--un-url:url(https://static.runoob.com/images/demo/demo2.jpg);background-image:var(--un-url);}
@@ -104,7 +115,6 @@ describe('transformer-applet', () => {
       .text-center{text-align:center;}
       .text-right{text-align:right;}
       .text-sm{font-size:0.875rem;line-height:1.25rem;}
-      .text-blue{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));}
       .text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}",
       }
     `)
diff --git a/test/transformer-attributify.test.ts b/test/transformer-attributify.test.ts
index 4e8bae8..805d021 100644
--- a/test/transformer-attributify.test.ts
+++ b/test/transformer-attributify.test.ts
@@ -6,6 +6,7 @@ import { createGenerator } from '@unocss/core'
 import MagicString from 'magic-string'
 import transformerAttributify from '@unocss-applet/transformer-attributify'
 import presetUno from '@unocss/preset-uno'
+import { transformerDirectives, transformerVariantGroup } from 'unocss'
 
 describe('transformer-attributify', () => {
   const uno = createGenerator({
@@ -26,6 +27,10 @@ describe('transformer-attributify', () => {
     rules: [
       [/^m-(\d)$/, ([, d]) => ({ margin: `${+d / 4}rem` })],
     ],
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup(),
+    ],
   })
   const transformer = transformerAttributify()
 
@@ -69,13 +74,19 @@ describe('transformer-attributify', () => {
           </div>
           <div flex=\\"~ col gap-1\\" class=\\"p-1 flex flex-col flex-gap-1 items-center\\" items-center :class=\\"bool ? 'text-yellow-500 px-2.5' : ''\\">
             <div i-carbon-campsite inline-block color=\\"blue\\" text=\\"xl !red\\"  class=\\"inline-block color-blue text-xl !text-red\\"/>
-            {{ \`index\${index + 1}\` }}{{ \`index\` }}
+            <div bg=\\"green-(!200 800)\\">
+              {{ \`index\${index + 1}\` }}{{ \`index\` }}
+            </div>
           </div>
-          <div flex=\\"~ col\\" border=\\"2 blue\\" class=\\"flex flex-col border-2 border-blue\\">
+          <div flex=\\"~ col\\" b=\\"~ green dark:(red 2)\\" class=\\"flex flex-col b b-green\\">
             <div text-right h-10 flex=\\"1\\" text=\\"red\\" :class=\\"{ 'text-sm': index > 0 }\\" class=\\"text-right h-10 flex-1 text-red\\">
               0123456789
             </div>
-            <div h-10 flex=\\"1\\" text-blue :class=\\"[index > 1 ? 'text' : '']\\" :style=\\"[index > 1 ? '' : '']\\" :type=\\"index > 1\\" class=\\"h-10 flex-1 text-blue\\">
+            <div
+              h-10 flex=\\"1\\" :class=\\"[index > 1 ? 'text' : '']\\"
+              text=\\"blue dark:(red !bold)\\" :style=\\"[index > 1 ? '' : '']\\"
+              :type=\\"index > 1\\"
+             class=\\"h-10 flex-1 text-blue\\">
               {{ bgIgnore }}
             </div>
           </div>
@@ -102,9 +113,9 @@ describe('transformer-attributify', () => {
       .items-center{align-items:center;}
       .flex-gap-1,
       .gap-1{grid-gap:0.25rem;gap:0.25rem;}
+      .b,
       .border{border-width:1px;border-style:solid;}
-      .border-2{border-width:2px;border-style:solid;}
-      .border-blue{--un-border-opacity:1;border-color:rgba(96,165,250,var(--un-border-opacity));}
+      .b-green{--un-border-opacity:1;border-color:rgba(74,222,128,var(--un-border-opacity));}
       .\\\\!bg-green{--un-bg-opacity:1 !important;background-color:rgba(74,222,128,var(--un-bg-opacity)) !important;}
       .bg-\\\\[hsl\\\\(2\\\\.7\\\\,81\\\\.9\\\\%\\\\,69\\\\.6\\\\%\\\\)\\\\]{--un-bg-opacity:1;background-color:hsla(2.7,81.9%,69.6%,var(--un-bg-opacity));}
       .bg-blue-200{--un-bg-opacity:1;background-color:rgba(191,219,254,var(--un-bg-opacity));}