Merge pull request #491 from tailwindcss/no-outline

Add "outline-none" and "shadow-outline" utilities
tailwindlabs · Jun 20, 2018 · 1fc8a85 · 1fc8a85
2 parents 7019ef3 + 3860912
commit 1fc8a85
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 21 deletions.
diff --git 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
  */
@@ -3204,6 +3194,14 @@ table {
   opacity: 1;
 }
 
+.outline-none {
+  outline: 0;
+}
+
+.focus\:outline-none:focus {
+  outline: 0;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -3600,10 +3598,38 @@ table {
   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;
 }
 
+.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;
 }
@@ -7521,10 +7547,38 @@ table {
     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;
   }
 
+  .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;
   }
@@ -11435,10 +11489,38 @@ table {
     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;
   }
 
+  .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;
   }
@@ -15349,10 +15431,38 @@ table {
     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;
   }
 
+  .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;
   }
@@ -19263,10 +19373,38 @@ table {
     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;
   }
 
+  .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/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
  */

diff --git 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',
   },
 
@@ -863,12 +864,13 @@ module.exports = {
     minWidth: ['responsive'],
     negativeMargin: ['responsive'],
     opacity: ['responsive'],
+    outline: ['focus'],
     overflow: ['responsive'],
     padding: ['responsive'],
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],
-    shadows: ['responsive'],
+    shadows: ['responsive', 'focus'],
     svgFill: [],
     svgStroke: [],
     textAlign: ['responsive'],

diff --git a/src/generators/outline.js b/src/generators/outline.js
@@ -0,0 +1,7 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'outline-none': { outline: '0' },
+  })
+}
diff --git a/src/utilityModules.js b/src/utilityModules.js
@@ -25,6 +25,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'
@@ -73,6 +74,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 },