From 38962a5e77cd4e715682e307c6625102f7b35d20 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Thu, 14 Jun 2018 14:12:53 -0400
Subject: [PATCH 1/7] Add "no-outline" utility

---
 __tests__/fixtures/tailwind-output.css | 4 ++++
 defaultConfig.stub.js                  | 1 +
 src/generators/outline.js              | 7 +++++++
 src/utilityModules.js                  | 2 ++
 4 files changed, 14 insertions(+)
 create mode 100644 src/generators/outline.js

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 9cd0a44f0..4bc325bb5 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3191,6 +3191,10 @@ button,
   opacity: 1;
 }
 
+.no-outline {
+  outline: none;
+}
+
 .overflow-auto {
   overflow: auto;
 }
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index b2cf9fc6e..749ebcec2 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -862,6 +862,7 @@ module.exports = {
     minWidth: ['responsive'],
     negativeMargin: ['responsive'],
     opacity: ['responsive'],
+    outline: [],
     overflow: ['responsive'],
     padding: ['responsive'],
     pointerEvents: ['responsive'],
diff --git a/src/generators/outline.js b/src/generators/outline.js
new file mode 100644
index 000000000..63a65dab7
--- /dev/null
+++ b/src/generators/outline.js
@@ -0,0 +1,7 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'no-outline': { outline: 'none' },
+  })
+}
diff --git a/src/utilityModules.js b/src/utilityModules.js
index d22b9a6c4..50346a369 100644
--- a/src/utilityModules.js
+++ b/src/utilityModules.js
@@ -24,6 +24,7 @@ import minHeight from './generators/minHeight'
 import minWidth from './generators/minWidth'
 import negativeMargin from './generators/negativeMargin'
 import opacity from './generators/opacity'
+import outline from './generators/outline'
 import overflow from './generators/overflow'
 import padding from './generators/padding'
 import pointerEvents from './generators/pointerEvents'
@@ -71,6 +72,7 @@ export default [
   { name: 'minWidth', generator: minWidth },
   { name: 'negativeMargin', generator: negativeMargin },
   { name: 'opacity', generator: opacity },
+  { name: 'outline', generator: outline },
   { name: 'overflow', generator: overflow },
   { name: 'padding', generator: padding },
   { name: 'pointerEvents', generator: pointerEvents },

From 8b3709309d32df94cf9434d1d23b40f588683266 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Thu, 14 Jun 2018 14:13:07 -0400
Subject: [PATCH 2/7] Add default shadow outline utility

---
 __tests__/fixtures/tailwind-output.css | 20 ++++++++++++++++++++
 defaultConfig.stub.js                  |  1 +
 2 files changed, 21 insertions(+)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 4bc325bb5..923877e95 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3575,6 +3575,10 @@ button,
   box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
 }
 
+.shadow-outline {
+  box-shadow: 2px solid rgba(52, 144, 220, .5);
+}
+
 .shadow-none {
   box-shadow: none;
 }
@@ -7480,6 +7484,10 @@ button,
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
+  .sm\:shadow-outline {
+    box-shadow: 2px solid rgba(52, 144, 220, .5);
+  }
+
   .sm\:shadow-none {
     box-shadow: none;
   }
@@ -11378,6 +11386,10 @@ button,
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
+  .md\:shadow-outline {
+    box-shadow: 2px solid rgba(52, 144, 220, .5);
+  }
+
   .md\:shadow-none {
     box-shadow: none;
   }
@@ -15276,6 +15288,10 @@ button,
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
+  .lg\:shadow-outline {
+    box-shadow: 2px solid rgba(52, 144, 220, .5);
+  }
+
   .lg\:shadow-none {
     box-shadow: none;
   }
@@ -19174,6 +19190,10 @@ button,
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
+  .xl\:shadow-outline {
+    box-shadow: 2px solid rgba(52, 144, 220, .5);
+  }
+
   .xl\:shadow-none {
     box-shadow: none;
   }
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index 749ebcec2..e43dcc979 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -728,6 +728,7 @@ module.exports = {
     'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
     'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
     'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+    'outline': '2px solid rgba(52,144,220,0.5)',
     'none': 'none',
   },
 

From f188bd3093ff0ded0409ef04ca284949f6f3b7de Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Fri, 15 Jun 2018 09:04:04 -0400
Subject: [PATCH 3/7] Change no-outline utility value form "none" to "0"

---
 __tests__/fixtures/tailwind-output.css | 2 +-
 src/generators/outline.js              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 923877e95..4424f6e8d 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3192,7 +3192,7 @@ button,
 }
 
 .no-outline {
-  outline: none;
+  outline: 0;
 }
 
 .overflow-auto {
diff --git a/src/generators/outline.js b/src/generators/outline.js
index 63a65dab7..397d0d5d1 100644
--- a/src/generators/outline.js
+++ b/src/generators/outline.js
@@ -2,6 +2,6 @@ import defineClasses from '../util/defineClasses'
 
 export default function() {
   return defineClasses({
-    'no-outline': { outline: 'none' },
+    'no-outline': { outline: '0' },
   })
 }

From d4deb7f97123297497909ff0278a824a7a488c18 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 20 Jun 2018 13:38:36 -0400
Subject: [PATCH 4/7] Rename "no-outline" to "outline-none" instead

---
 __tests__/fixtures/tailwind-output.css | 2 +-
 src/generators/outline.js              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 4424f6e8d..f514fd2a3 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3191,7 +3191,7 @@ button,
   opacity: 1;
 }
 
-.no-outline {
+.outline-none {
   outline: 0;
 }
 
diff --git a/src/generators/outline.js b/src/generators/outline.js
index 397d0d5d1..328c58a7f 100644
--- a/src/generators/outline.js
+++ b/src/generators/outline.js
@@ -2,6 +2,6 @@ import defineClasses from '../util/defineClasses'
 
 export default function() {
   return defineClasses({
-    'no-outline': { outline: '0' },
+    'outline-none': { outline: '0' },
   })
 }

From 23a015131175f78c4924179fc1b76b2d568daa9d Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 20 Jun 2018 13:40:26 -0400
Subject: [PATCH 5/7] Enable focus varients for shadows by default

---
 __tests__/fixtures/tailwind-output.css | 120 +++++++++++++++++++++++++
 defaultConfig.stub.js                  |   2 +-
 2 files changed, 121 insertions(+), 1 deletion(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index f514fd2a3..7fbe0914d 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3583,6 +3583,30 @@ button,
   box-shadow: none;
 }
 
+.focus\:shadow:focus {
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+}
+
+.focus\:shadow-md:focus {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+}
+
+.focus\:shadow-lg:focus {
+  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+}
+
+.focus\:shadow-inner:focus {
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+}
+
+.focus\:shadow-outline:focus {
+  box-shadow: 2px solid rgba(52, 144, 220, .5);
+}
+
+.focus\:shadow-none:focus {
+  box-shadow: none;
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -7492,6 +7516,30 @@ button,
     box-shadow: none;
   }
 
+  .sm\:focus\:shadow:focus {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .sm\:focus\:shadow-md:focus {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .sm\:focus\:shadow-lg:focus {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .sm\:focus\:shadow-inner:focus {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .sm\:focus\:shadow-outline:focus {
+    box-shadow: 2px solid rgba(52, 144, 220, .5);
+  }
+
+  .sm\:focus\:shadow-none:focus {
+    box-shadow: none;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -11394,6 +11442,30 @@ button,
     box-shadow: none;
   }
 
+  .md\:focus\:shadow:focus {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .md\:focus\:shadow-md:focus {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .md\:focus\:shadow-lg:focus {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .md\:focus\:shadow-inner:focus {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .md\:focus\:shadow-outline:focus {
+    box-shadow: 2px solid rgba(52, 144, 220, .5);
+  }
+
+  .md\:focus\:shadow-none:focus {
+    box-shadow: none;
+  }
+
   .md\:text-left {
     text-align: left;
   }
@@ -15296,6 +15368,30 @@ button,
     box-shadow: none;
   }
 
+  .lg\:focus\:shadow:focus {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .lg\:focus\:shadow-md:focus {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .lg\:focus\:shadow-lg:focus {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .lg\:focus\:shadow-inner:focus {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .lg\:focus\:shadow-outline:focus {
+    box-shadow: 2px solid rgba(52, 144, 220, .5);
+  }
+
+  .lg\:focus\:shadow-none:focus {
+    box-shadow: none;
+  }
+
   .lg\:text-left {
     text-align: left;
   }
@@ -19198,6 +19294,30 @@ button,
     box-shadow: none;
   }
 
+  .xl\:focus\:shadow:focus {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .xl\:focus\:shadow-md:focus {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .xl\:focus\:shadow-lg:focus {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .xl\:focus\:shadow-inner:focus {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .xl\:focus\:shadow-outline:focus {
+    box-shadow: 2px solid rgba(52, 144, 220, .5);
+  }
+
+  .xl\:focus\:shadow-none:focus {
+    box-shadow: none;
+  }
+
   .xl\:text-left {
     text-align: left;
   }
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index e43dcc979..2f699872c 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -869,7 +869,7 @@ module.exports = {
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],
-    shadows: ['responsive'],
+    shadows: ['responsive', 'focus'],
     svgFill: [],
     svgStroke: [],
     textAlign: ['responsive'],

From dd71f23bfafe19c72840a902b24c414f0d15a02e Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 20 Jun 2018 13:41:48 -0400
Subject: [PATCH 6/7] Enable focus varients for outlines by default

---
 __tests__/fixtures/tailwind-output.css | 4 ++++
 defaultConfig.stub.js                  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 7fbe0914d..5710936ae 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3195,6 +3195,10 @@ button,
   outline: 0;
 }
 
+.focus\:outline-none:focus {
+  outline: 0;
+}
+
 .overflow-auto {
   overflow: auto;
 }
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index 2f699872c..cec71069b 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -863,7 +863,7 @@ module.exports = {
     minWidth: ['responsive'],
     negativeMargin: ['responsive'],
     opacity: ['responsive'],
-    outline: [],
+    outline: ['focus'],
     overflow: ['responsive'],
     padding: ['responsive'],
     pointerEvents: ['responsive'],

From 38609128c11b37703958f304dc5c743f7a72f57a Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 20 Jun 2018 13:46:41 -0400
Subject: [PATCH 7/7] Remove default tabindex="-1" outline style in Preflight

---
 __tests__/fixtures/tailwind-output.css | 10 ----------
 css/preflight.css                      | 10 ----------
 2 files changed, 20 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 5710936ae..9b937fb3d 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -518,16 +518,6 @@ ul {
   margin: 0;
 }
 
-/**
- * Suppress the focus outline on elements that cannot be accessed via keyboard.
- * This prevents an unwanted focus outline from appearing around elements that
- * might still respond to pointer events.
- */
-
-[tabindex="-1"]:focus {
-  outline: none !important;
-}
-
 /**
  * Tailwind custom reset styles
  */
diff --git a/css/preflight.css b/css/preflight.css
index 3e17e71ab..784af8fb6 100644
--- a/css/preflight.css
+++ b/css/preflight.css
@@ -513,16 +513,6 @@ ul {
   margin: 0;
 }
 
-/**
- * Suppress the focus outline on elements that cannot be accessed via keyboard.
- * This prevents an unwanted focus outline from appearing around elements that
- * might still respond to pointer events.
- */
-
-[tabindex="-1"]:focus {
-  outline: none !important;
-}
-
 /**
  * Tailwind custom reset styles
  */