diff --git a/__tests__/index.test.js b/__tests__/index.test.js
index 82218cd..171b26e 100644
--- a/__tests__/index.test.js
+++ b/__tests__/index.test.js
@@ -237,7 +237,7 @@ describe('plugin', () => {
         .text-gray-100 {
           color: #333333
         }
-        .theme-dark .dark\\:focus\\:text-gray-100\\:focus {
+        .theme-dark .dark\\:focus\\:text-gray-100:focus {
           color: #333333
         }
       `)
@@ -257,7 +257,7 @@ describe('plugin', () => {
         .text-gray-100 {
           color: #333333
         }
-        .theme-dark .dark\\:focus\\:text-gray-100\\:focus {
+        .theme-dark .dark\\:focus\\:text-gray-100:focus {
           color: #333333
         }
         .placeholder-gray-100::placeholder {      
@@ -266,7 +266,7 @@ describe('plugin', () => {
         .focus\\:placeholder-gray-100:focus::placeholder {
           color: #333333
         }
-        .theme-dark .dark\\:focus\\:placeholder-gray-100\\:focus::placeholder {
+        .theme-dark .dark\\:focus\\:placeholder-gray-100:focus::placeholder {
           color: #333333
         }
       `)
diff --git a/src/index.js b/src/index.js
index a8437b5..1bcfd31 100644
--- a/src/index.js
+++ b/src/index.js
@@ -82,8 +82,9 @@ module.exports = ({ addVariant, theme, e }) => {
       modifySelectors(({ selector }) => {
         return selectorParser((selectors) => {
           selectors.walkClasses((sel) => {
-            sel.value = `${tv}${separator}focus${separator}${sel.value}:focus`
+            sel.value = `${tv}${separator}focus${separator}${sel.value}`
             sel.parent.insertBefore(sel, selectorParser().astSync(root))
+            sel.parent.insertAfter(sel, selectorParser.pseudo({ value: ':focus' }))
           })
         }).processSync(selector)
       })