diff --git a/docs/source/examples.blade.php b/docs/source/examples.blade.php
index 5f93c9b0f..1a4243030 100644
--- a/docs/source/examples.blade.php
+++ b/docs/source/examples.blade.php
@@ -34,7 +34,7 @@
     </button>
 </div>
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-dark hover-bg-dark-dark mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-dark @bg-dark-dark mr-4">
         Save
     </button>
     <button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
@@ -47,7 +47,7 @@
 
 @foreach($page->colors as $color)
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} hover-bg-{{$color}}-dark mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} @bg-{{$color}}-dark mr-4">
         Save
     </button>
     <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}}-light mr-4">
@@ -60,7 +60,7 @@
 
 @foreach($page->colors as $color)
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark hover-text-light border border-{{$color}} hover-bg-{{$color}} mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark @text-light border border-{{$color}} @bg-{{$color}} mr-4">
         Save
     </button>
     <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-light border border-{{$color}}-light mr-4">
diff --git a/src/generators/backgrounds-hover.less b/src/generators/backgrounds-hover.less
index b1e34728b..70d5c1a6c 100644
--- a/src/generators/backgrounds-hover.less
+++ b/src/generators/backgrounds-hover.less
@@ -1,6 +1,6 @@
 .define-bg-hover-colors(@variants) {
-  .generate-utility-variants('hover-bg'; @variants; {
-    &:hover { background-color: extract(@__variant-value, 2); }
+  .generate-utility-variants('\@bg'; @variants; {
+    &:hover, &:focus { background-color: extract(@__variant-value, 2); }
   });
 }
 
@@ -10,8 +10,8 @@
 
 .define-bg-hover-colors(@variants; @screens) when not (@screens = none) {
   .define-bg-hover-colors(@variants);
-  .generate-responsive-utility-variants('hover-bg'; @variants; @screens; {
-    &:hover { background-color: extract(@__variant-value, 2); }
+  .generate-responsive-utility-variants('\@bg'; @variants; @screens; {
+    &:hover, &:focus { background-color: extract(@__variant-value, 2); }
   });
 }
 
diff --git a/src/generators/text-colors-hover.less b/src/generators/text-colors-hover.less
index 8b1c0f277..e5ea96d7d 100644
--- a/src/generators/text-colors-hover.less
+++ b/src/generators/text-colors-hover.less
@@ -1,6 +1,6 @@
 .define-text-hover-colors(@variants) {
-  .generate-utility-variants('hover-text'; @variants; {
-    &:hover { color: extract(@__variant-value, 2); }
+  .generate-utility-variants('\@text'; @variants; {
+    &:hover, &:focus { color: extract(@__variant-value, 2); }
   });
 }
 
@@ -10,8 +10,8 @@
 
 .define-text-hover-colors(@variants; @screens) when not (@screens = none) {
   .define-text-hover-colors(@variants);
-  .generate-responsive-utility-variants('hover-text'; @variants; @screens; {
-    &:hover { color: extract(@__variant-value, 2); }
+  .generate-responsive-utility-variants('\@text'; @variants; @screens; {
+    &:hover, &:focus { color: extract(@__variant-value, 2); }
   });
 }