From e7ad8276aae674db4a71a00ca7a3820adbd6bd22 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 13 Jun 2022 11:28:45 +0800
Subject: [PATCH] docs(attributify): self-referencing

---
 packages/preset-attributify/README.md | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/preset-attributify/README.md b/packages/preset-attributify/README.md
index 317edff930..5b16c341a5 100644
--- a/packages/preset-attributify/README.md
+++ b/packages/preset-attributify/README.md
@@ -47,7 +47,27 @@ With attributify mode, you can separate utilities into attributes:
 
 For example, `text-sm text-white` could be grouped into `text="sm white"` without duplicating the same prefix.
 
-###### Valueless Attributify
+### Prefix Self-referencing
+
+For utilities like `flex`, `grid`, `border`, that have the utilities same as the prefix, a special `~` value is provided.
+
+For example:
+
+```html
+<button class="border border-red">
+  Button
+</button>
+```
+
+Can be written as
+
+```html
+<button border="~ red">
+  Button
+</button>
+```
+
+### Valueless Attributify
 
 In addition to Windi CSS's Attributify Mode, this presets also supports valueless attributes.