From e112b98d4e3c0f3c91f2fcbca8ad42d3bf1ac877 Mon Sep 17 00:00:00 2001
From: fedeTibaldo <tibaldo125@gmail.com>
Date: Fri, 9 Feb 2018 18:58:37 +0100
Subject: [PATCH] Update docs with active state variant

---
 docs/source/_assets/less/main.less            | 12 +++++++
 .../source/_partials/feature-badges.blade.php | 16 +++++++++
 .../variants-and-disabling.blade.php          |  5 +--
 .../docs/background-attachment.blade.md       |  1 +
 docs/source/docs/background-color.blade.md    |  1 +
 docs/source/docs/background-position.blade.md |  1 +
 docs/source/docs/background-repeat.blade.md   |  1 +
 docs/source/docs/background-size.blade.md     |  1 +
 docs/source/docs/border-color.blade.md        |  1 +
 docs/source/docs/border-radius.blade.md       |  1 +
 docs/source/docs/border-style.blade.md        |  1 +
 docs/source/docs/border-width.blade.md        |  1 +
 docs/source/docs/configuration.blade.md       |  1 +
 docs/source/docs/cursor.blade.md              |  1 +
 docs/source/docs/display.blade.md             |  1 +
 .../docs/flexbox-align-content.blade.md       |  1 +
 docs/source/docs/flexbox-align-items.blade.md |  1 +
 docs/source/docs/flexbox-align-self.blade.md  |  1 +
 docs/source/docs/flexbox-direction.blade.md   |  1 +
 docs/source/docs/flexbox-display.blade.md     |  1 +
 .../docs/flexbox-flex-grow-shrink.blade.md    |  1 +
 .../docs/flexbox-justify-content.blade.md     |  1 +
 docs/source/docs/flexbox-wrapping.blade.md    |  1 +
 docs/source/docs/floats.blade.md              |  1 +
 docs/source/docs/font-weight.blade.md         |  1 +
 docs/source/docs/fonts.blade.md               |  1 +
 docs/source/docs/forms.blade.md               |  1 +
 docs/source/docs/height.blade.md              |  1 +
 docs/source/docs/letter-spacing.blade.md      |  1 +
 docs/source/docs/line-height.blade.md         |  1 +
 docs/source/docs/lists.blade.md               |  1 +
 docs/source/docs/max-height.blade.md          |  1 +
 docs/source/docs/max-width.blade.md           |  1 +
 docs/source/docs/min-height.blade.md          |  1 +
 docs/source/docs/min-width.blade.md           |  1 +
 docs/source/docs/opacity.blade.md             |  1 +
 docs/source/docs/overflow.blade.md            |  1 +
 docs/source/docs/pointer-events.blade.md      |  1 +
 docs/source/docs/positioning.blade.md         |  1 +
 docs/source/docs/resize.blade.md              |  1 +
 docs/source/docs/shadows.blade.md             |  1 +
 docs/source/docs/spacing.blade.md             |  1 +
 docs/source/docs/state-variants.blade.md      | 33 +++++++++++++++++--
 docs/source/docs/text-alignment.blade.md      |  1 +
 docs/source/docs/text-color.blade.md          |  1 +
 docs/source/docs/text-sizing.blade.md         |  1 +
 docs/source/docs/text-style.blade.md          |  1 +
 docs/source/docs/user-select.blade.md         |  1 +
 docs/source/docs/vertical-alignment.blade.md  |  1 +
 docs/source/docs/visibility.blade.md          |  1 +
 .../docs/whitespace-and-wrapping.blade.md     |  1 +
 docs/source/docs/width.blade.md               |  1 +
 docs/source/docs/z-index.blade.md             |  1 +
 53 files changed, 111 insertions(+), 4 deletions(-)

diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less
index 8de9f296b..63b46dad4 100644
--- a/docs/source/_assets/less/main.less
+++ b/docs/source/_assets/less/main.less
@@ -24,6 +24,18 @@ ul {
 
 @tailwind utilities;
 
+.active\:bg-blue:active {
+  @apply .bg-blue;
+}
+
+.active\:text-white:active {
+  @apply .text-white;
+}
+
+.active\:border-transparent:active {
+  @apply .border-transparent;
+}
+
 .focus\:bg-grey-dark:focus {
   @apply .bg-grey-dark;
 }
diff --git a/docs/source/_partials/feature-badges.blade.php b/docs/source/_partials/feature-badges.blade.php
index 3e16ab376..77e7b9bcd 100644
--- a/docs/source/_partials/feature-badges.blade.php
+++ b/docs/source/_partials/feature-badges.blade.php
@@ -48,6 +48,22 @@
     </span>
     @endif
 
+    @if ($active)
+    <a href="#hover" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+        <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
+      </span>
+      <span>Active</span>
+    </a>
+    @else
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+        <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
+      </span>
+      <span>Active</span>
+    </span>
+    @endif
+
     @if ($focus)
     <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
       <span class="inline-flex rounded-full bg-green-light text-white mr-1">
diff --git a/docs/source/_partials/variants-and-disabling.blade.php b/docs/source/_partials/variants-and-disabling.blade.php
index daaa785b0..1ca6ff3e5 100644
--- a/docs/source/_partials/variants-and-disabling.blade.php
+++ b/docs/source/_partials/variants-and-disabling.blade.php
@@ -9,6 +9,7 @@
     $extraVariants = collect([
         'responsive',
         'hover',
+        'active',
         'focus',
         'group-hover',
     ])->diff($variants)
@@ -16,7 +17,7 @@
     ->implode(' and ');
 @endphp
 
-<h3>Responsive, Hover, and Focus Variants</h3>
+<h3>Responsive, Hover, Active and Focus Variants</h3>
 
 <p>By default, {{ $whichVariants }} variants are generated for {{ $utility['name'] }} utilities.</p>
 
@@ -27,7 +28,7 @@
 @component('_partials.customized-config', ['key' => 'modules'])
   // ...
 - {{ $utility['property'] }}: [{{$currentVariants}}],
-+ {{ $utility['property'] }}: ['responsive', 'hover', 'focus'],
++ {{ $utility['property'] }}: ['responsive', 'hover', 'active', 'focus'],
 @endcomponent
 
 @isset($extraMessage)
diff --git a/docs/source/docs/background-attachment.blade.md b/docs/source/docs/background-attachment.blade.md
index 60708655f..192ce64a6 100644
--- a/docs/source/docs/background-attachment.blade.md
+++ b/docs/source/docs/background-attachment.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md
index 2ea73bdce..5a302d889 100644
--- a/docs/source/docs/background-color.blade.md
+++ b/docs/source/docs/background-color.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: true
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md
index 5b171bc6d..6fa7c5e58 100644
--- a/docs/source/docs/background-position.blade.md
+++ b/docs/source/docs/background-position.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/background-repeat.blade.md b/docs/source/docs/background-repeat.blade.md
index ac7994e2a..a7a7bc055 100644
--- a/docs/source/docs/background-repeat.blade.md
+++ b/docs/source/docs/background-repeat.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md
index 3f81cf40a..a6402fc09 100644
--- a/docs/source/docs/background-size.blade.md
+++ b/docs/source/docs/background-size.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md
index 8bc4f16e1..c239cc2ef 100644
--- a/docs/source/docs/border-color.blade.md
+++ b/docs/source/docs/border-color.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: true
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md
index 4cd4fc28e..4420809a9 100644
--- a/docs/source/docs/border-radius.blade.md
+++ b/docs/source/docs/border-radius.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/border-style.blade.md b/docs/source/docs/border-style.blade.md
index a37b2c5ef..edabf0de6 100644
--- a/docs/source/docs/border-style.blade.md
+++ b/docs/source/docs/border-style.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md
index d80d257fc..898820d34 100644
--- a/docs/source/docs/border-width.blade.md
+++ b/docs/source/docs/border-width.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/configuration.blade.md b/docs/source/docs/configuration.blade.md
index 9e92a8522..4f24db3d8 100644
--- a/docs/source/docs/configuration.blade.md
+++ b/docs/source/docs/configuration.blade.md
@@ -162,6 +162,7 @@ The available state variants are:
 
 - `responsive`, for generating breakpoint-specific versions of those utilities
 - `hover`, for generating versions of those utilities that only take effect on hover
+- `active`, for generating versions of those utilities that only take effect on active
 - `focus`, for generating versions of those utilities that only take effect on focus
 - `group-hover`, for generating versions of those utilities that only take effect when a marked parent element is hovered
 
diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md
index 44c0b9a58..07338f296 100644
--- a/docs/source/docs/cursor.blade.md
+++ b/docs/source/docs/cursor.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/display.blade.md b/docs/source/docs/display.blade.md
index 9364e9358..5b2d6cd15 100644
--- a/docs/source/docs/display.blade.md
+++ b/docs/source/docs/display.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md
index 911c9a342..875b94161 100644
--- a/docs/source/docs/flexbox-align-content.blade.md
+++ b/docs/source/docs/flexbox-align-content.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md
index bbe7c1098..c638d8216 100644
--- a/docs/source/docs/flexbox-align-items.blade.md
+++ b/docs/source/docs/flexbox-align-items.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md
index 6d62577a6..817c76e12 100644
--- a/docs/source/docs/flexbox-align-self.blade.md
+++ b/docs/source/docs/flexbox-align-self.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md
index 0388046e1..51d099622 100644
--- a/docs/source/docs/flexbox-direction.blade.md
+++ b/docs/source/docs/flexbox-direction.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md
index 7d008ffc3..5f917975c 100644
--- a/docs/source/docs/flexbox-display.blade.md
+++ b/docs/source/docs/flexbox-display.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md
index 3b1118c84..4724ad6ae 100644
--- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md
+++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md
index c8c5cec15..db6c59f1f 100644
--- a/docs/source/docs/flexbox-justify-content.blade.md
+++ b/docs/source/docs/flexbox-justify-content.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md
index 596e66b7a..5526d730a 100644
--- a/docs/source/docs/flexbox-wrapping.blade.md
+++ b/docs/source/docs/flexbox-wrapping.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md
index 6ca9a94bb..faa545bce 100644
--- a/docs/source/docs/floats.blade.md
+++ b/docs/source/docs/floats.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md
index ed821deba..7264e7428 100644
--- a/docs/source/docs/font-weight.blade.md
+++ b/docs/source/docs/font-weight.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: true
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md
index 5964aa51a..c2c0c6136 100644
--- a/docs/source/docs/fonts.blade.md
+++ b/docs/source/docs/fonts.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md
index 3aa0b4d15..4bd6a051d 100644
--- a/docs/source/docs/forms.blade.md
+++ b/docs/source/docs/forms.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md
index 87534acfb..1bb6060f8 100644
--- a/docs/source/docs/height.blade.md
+++ b/docs/source/docs/height.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md
index 218b6a097..2efb3064a 100644
--- a/docs/source/docs/letter-spacing.blade.md
+++ b/docs/source/docs/letter-spacing.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md
index fd2fc8d37..369900db2 100644
--- a/docs/source/docs/line-height.blade.md
+++ b/docs/source/docs/line-height.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md
index a79b17e91..b04da7031 100644
--- a/docs/source/docs/lists.blade.md
+++ b/docs/source/docs/lists.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md
index 6d1325dd2..1819b7123 100644
--- a/docs/source/docs/max-height.blade.md
+++ b/docs/source/docs/max-height.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md
index dc1903486..bca2f8c58 100644
--- a/docs/source/docs/max-width.blade.md
+++ b/docs/source/docs/max-width.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md
index 6cfbbc4cf..54cbb182c 100644
--- a/docs/source/docs/min-height.blade.md
+++ b/docs/source/docs/min-height.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md
index 3eb1562e7..5ef2f7592 100644
--- a/docs/source/docs/min-width.blade.md
+++ b/docs/source/docs/min-width.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md
index fdfe1a94b..00ec0a6e0 100644
--- a/docs/source/docs/opacity.blade.md
+++ b/docs/source/docs/opacity.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md
index 7487e721c..32e7faf64 100644
--- a/docs/source/docs/overflow.blade.md
+++ b/docs/source/docs/overflow.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md
index a8ae844ff..fdc2e51b8 100644
--- a/docs/source/docs/pointer-events.blade.md
+++ b/docs/source/docs/pointer-events.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md
index b18a3fac7..484825cf3 100644
--- a/docs/source/docs/positioning.blade.md
+++ b/docs/source/docs/positioning.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md
index a4c1f89ae..581dfc7c5 100644
--- a/docs/source/docs/resize.blade.md
+++ b/docs/source/docs/resize.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md
index 5dc2a2ad4..cee2e3ecd 100644
--- a/docs/source/docs/shadows.blade.md
+++ b/docs/source/docs/shadows.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md
index ebc99e9bc..3aac00a26 100644
--- a/docs/source/docs/spacing.blade.md
+++ b/docs/source/docs/spacing.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/state-variants.blade.md b/docs/source/docs/state-variants.blade.md
index 582b354fe..ee568d81c 100644
--- a/docs/source/docs/state-variants.blade.md
+++ b/docs/source/docs/state-variants.blade.md
@@ -1,10 +1,10 @@
 ---
 extends: _layouts.documentation
 title: "State Variants"
-description: "Using utilities to style elements on hover, focus, and more."
+description: "Using utilities to style elements on hover, active, focus, and more."
 ---
 
-Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, focus, and more using *state* prefixes.
+Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, active, focus, and more using *state* prefixes.
 
 ## Hover
 
@@ -35,6 +35,35 @@ Add the `hover:` prefix to only apply a utility on hover.
   </div>
 </div>
 
+## Active
+
+Add the `active:` prefix to only apply a utility on active.
+
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
+<button class="bg-transparent active:bg-blue text-blue-dark font-semibold active:text-white py-2 px-4 border border-blue active:border-transparent rounded">
+  Click me
+</button>
+
+
+@slot('code')
+<button class="bg-transparent active:bg-blue text-blue-dark active:text-white...">
+  Click me
+</button>
+@endslot
+@endcomponent
+
+<div class="bg-blue-light text-white font-semibold px-4 py-3 mb-4 -mt-2">
+  <div class="flex">
+    <div class="py-1">
+      <svg class="fill-current h-6 w-6 text-white opacity-75 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+    </div>
+    <div>
+      <p class="mb-2"><strong>By default, active variants are not generated for any utilities.</strong></p>
+      <p>You can customize this in the <a href="/docs/configuration#modules" class="underline">modules section</a> of your configuration file.</p>
+    </div>
+  </div>
+</div>
+
 
 ## Focus
 
diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md
index afd8ec3e1..932a3b634 100644
--- a/docs/source/docs/text-alignment.blade.md
+++ b/docs/source/docs/text-alignment.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md
index 0de8f055a..58d71f1ae 100644
--- a/docs/source/docs/text-color.blade.md
+++ b/docs/source/docs/text-color.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: true
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md
index 2ecc40e1f..ee752b6e0 100644
--- a/docs/source/docs/text-sizing.blade.md
+++ b/docs/source/docs/text-sizing.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md
index 48ee7d503..1655874d2 100644
--- a/docs/source/docs/text-style.blade.md
+++ b/docs/source/docs/text-style.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: true
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md
index ef76d83b9..cb242c89c 100644
--- a/docs/source/docs/user-select.blade.md
+++ b/docs/source/docs/user-select.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md
index be85ec7c7..70b16c6f2 100644
--- a/docs/source/docs/vertical-alignment.blade.md
+++ b/docs/source/docs/vertical-alignment.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md
index 940bbc54b..310a3fa6b 100644
--- a/docs/source/docs/visibility.blade.md
+++ b/docs/source/docs/visibility.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md
index 409d23ed0..3a9831e36 100644
--- a/docs/source/docs/whitespace-and-wrapping.blade.md
+++ b/docs/source/docs/whitespace-and-wrapping.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md
index d5f690976..52791c9db 100644
--- a/docs/source/docs/width.blade.md
+++ b/docs/source/docs/width.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---
 
diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md
index 3e4a7bee7..facb4845c 100644
--- a/docs/source/docs/z-index.blade.md
+++ b/docs/source/docs/z-index.blade.md
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: true
   hover: false
+  active: false
   focus: false
 ---