diff --git a/README.md b/README.md
index f42b7dc..d8e0cc5 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@
 
 - [Tailwind CSS](https://tailwindcss.com/)
 - [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode)
-<!-- - [variantwind](https://github.com/sibbngheid/variantwind) -->
+- [variantwind](https://github.com/sibbngheid/variantwind)
 
 ### Icons
 
diff --git a/package.json b/package.json
index 2c74660..4eb4109 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@iconify/iconify": "^1.0.7",
     "@vueuse/core": "^4.0.0-beta.4",
-    "variantwind": "^0.3.4",
+    "variantwind": "^0.6.0",
     "vue": "^3.0.0-rc.5",
     "vue-i18n": "^9.0.0-alpha.13",
     "vue-router": "^4.0.0-beta.6"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 37bef95..f9462cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,7 +1,7 @@
 dependencies:
   '@iconify/iconify': 1.0.7
   '@vueuse/core': 4.0.0-beta.4_vue@3.0.0-rc.5
-  variantwind: 0.3.4
+  variantwind: 0.6.0
   vue: 3.0.0-rc.5
   vue-i18n: 9.0.0-alpha.13_vue@3.0.0-rc.5
   vue-router: 4.0.0-beta.6_vue@3.0.0-rc.5
@@ -3776,10 +3776,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
-  /variantwind/0.3.4:
+  /variantwind/0.6.0:
     dev: false
     resolution:
-      integrity: sha512-wyOh1KNXXmVaSTFl+wx9gmhwIqWVCBh4yYQW+K5gxA7Iyy0MZi85l44LINEHfBAdUbzsjTCWWTyKWIDwwU8+Cg==
+      integrity: sha512-qBR4+KYvD0iJG84hJR7VgWrOI7vXz3SPbs763sXxqh+GqhYIRQ9/33yeExlaqHXpPjHyqboCz3+vpzl64ESGEA==
   /vary/1.1.2:
     dev: true
     engines:
@@ -4033,7 +4033,7 @@ specifiers:
   tailwindcss: ^1.6.2
   tailwindcss-dark-mode: ^1.1.6
   typescript: ^3.9.7
-  variantwind: ^0.3.4
+  variantwind: ^0.6.0
   vite: ^1.0.0-rc.4
   vite-plugin-purge-icons: ^0.0.1
   vite-plugin-voie: ^0.2.0
diff --git a/src/main.ts b/src/main.ts
index c0473e0..8f00f95 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,9 +2,11 @@ import './main.postcss'
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import { createI18n } from 'vue-i18n'
+import { directive as variantwind } from 'variantwind'
 
 // @ts-ignore: this is generated from voie, which TypeScript is not able to infer types correctly
 import routes from '/@voie/pages'
+// import icons data genereted by PurgeIcons
 import '/@purge-icons/icons'
 
 import { registerComponents } from './components'
@@ -25,5 +27,6 @@ const i18n = createI18n({
 app.use(i18n)
 app.use(router)
 app.use(registerComponents)
+app.directive('variantwind', variantwind)
 
 app.mount('#app')
diff --git a/tailwind.config.js b/tailwind.config.js
index c8f221a..a9af96e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const { extractor } = require('variantwind')
 
 module.exports = {
   purge: {
@@ -11,6 +12,14 @@ module.exports = {
     whitelist: [
       'schema-dark',
     ],
+    options: {
+      extractors: [
+        {
+          extractor,
+          extensions: ['vue'],
+        },
+      ],
+    },
   },
   theme: {
     darkSelector: '.schema-dark',
@@ -23,7 +32,7 @@ module.exports = {
   },
   variants: {
     backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'hover'],
-    borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-active'],
+    borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-active', 'active', 'focus', 'disabled'],
     textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'active'],
   },
   plugins: [