diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md
index de3afdb64..c726a835b 100644
--- a/docs/source/docs/functions-and-directives.blade.md
+++ b/docs/source/docs/functions-and-directives.blade.md
@@ -46,17 +46,32 @@ This is extremely useful when you find a common utility pattern in your HTML tha
 }
 ```
 
-Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mixin the plain version of that utility into the `:hover` pseudo-selector or a new media query:
+Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mix in the plain version of that utility into the `:hover` pseudo-selector or a new media query:
 
 ```less
 // Won't work:
 .btn {
+  @@apply .block .bg-red;
   @@apply .md:inline-block;
   @@apply .hover:bg-blue;
 }
 
 // Do this instead:
 .btn {
+  @@apply .block .bg-red;
+}
+.btn:hover {
+  @@apply .bg-blue;
+}
+@@screen md {
+  .btn {
+    @@apply .inline-block;
+  }
+}
+
+// Or if you're using Less or Sass:
+.btn {
+  @@apply .block .bg-red;
   &:hover {
     @@apply .bg-blue;
   }