diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index d2e5ab7f8..c95709754 100644
--- 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/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index 652c133fb..79fc634cc 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -12,6 +12,15 @@ const variantGenerators = {
 
     container.before(cloned.nodes)
   },
+  active: (container, config) => {
+    const cloned = container.clone()
+
+    cloned.walkRules(rule => {
+      rule.selector = `${buildClassVariant(rule.selector, 'active', config.options.separator)}:active`
+    })
+
+    container.before(cloned.nodes)
+  },
   focus: (container, config) => {
     const cloned = container.clone()
 
@@ -48,7 +57,7 @@ export default function(config) {
 
       atRule.before(atRule.clone().nodes)
 
-      _.forEach(['focus', 'hover', 'group-hover'], variant => {
+      _.forEach(['hover', 'active', 'focus', 'group-hover'], variant => {
         if (variants.includes(variant)) {
           variantGenerators[variant](atRule, unwrappedConfig)
         }