tailwindlabs · adamwathan · Mar 13, 2018 · Feb 9, 2018 · Feb 9, 2018 · Feb 9, 2018
diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
@@ -27,6 +27,27 @@ test('it can generate hover variants', () => {
   })
 })
 
+test('it can generate active variants', () => {
+  const input = `
+    @variants active {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .active\\:banana:active { color: yellow; }
+      .active\\:chocolate:active { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it can generate focus variants', () => {
   const input = `
     @variants focus {
@@ -69,9 +90,9 @@ test('it can generate group-hover variants', () => {
   })
 })
 
-test('it can generate hover and focus variants', () => {
+test('it can generate hover, active and focus variants', () => {
   const input = `
-    @variants hover, focus {
+    @variants hover, active, focus {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }
@@ -84,6 +105,8 @@ test('it can generate hover and focus variants', () => {
       .focus\\:chocolate:focus { color: brown; }
       .hover\\:banana:hover { color: yellow; }
       .hover\\:chocolate:hover { color: brown; }
+      .active\\:banana:active { color: yellow; }
+      .active\\:chocolate:active { color: brown; }
   `
 
   return run(input).then(result => {

diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
@@ -804,7 +804,8 @@ module.exports = {
   | Here is where you control which modules are generated and what variants are
   | generated for each of those modules.
   |
-  | Currently supported variants: 'responsive', 'hover', 'focus', 'group-hover'
+  | Currently supported variants: 'responsive', 'hover', 'active', focus', 
+  | 'group-hover'
   |
   | To disable a module completely, use `false` instead of an array.
   |

diff --git 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
@@ -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
@@ -10,13 +10,14 @@
         'responsive',
         'hover',
         'focus',
+        'active',
         'group-hover',
     ])->diff($variants)
     ->take(3 - count($variants))
     ->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>
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,6 +6,7 @@ features:
   responsive: true
   customizable: false
   hover: false
+  active: false
   focus: false
 ---