add boxSizing classes

Author: alberto-bottarini

__tests__/fixtures/tailwind-output-important.css

@@ -6817,6 +6817,14 @@ video {
   box-shadow: none !important;
 }
 
+.box-sizing-border {
+  box-sizing: border !important;
+}
+
+.box-sizing-content {
+  box-sizing: content !important;
+}
+
 .fill-current {
   fill: currentColor !important;
 }
@@ -16131,6 +16139,14 @@ video {
     box-shadow: none !important;
   }
 
+  .sm\:box-sizing-border {
+    box-sizing: border !important;
+  }
+
+  .sm\:box-sizing-content {
+    box-sizing: content !important;
+  }
+
   .sm\:fill-current {
     fill: currentColor !important;
   }
@@ -25446,6 +25462,14 @@ video {
     box-shadow: none !important;
   }
 
+  .md\:box-sizing-border {
+    box-sizing: border !important;
+  }
+
+  .md\:box-sizing-content {
+    box-sizing: content !important;
+  }
+
   .md\:fill-current {
     fill: currentColor !important;
   }
@@ -34761,6 +34785,14 @@ video {
     box-shadow: none !important;
   }
 
+  .lg\:box-sizing-border {
+    box-sizing: border !important;
+  }
+
+  .lg\:box-sizing-content {
+    box-sizing: content !important;
+  }
+
   .lg\:fill-current {
     fill: currentColor !important;
   }
@@ -44076,6 +44108,14 @@ video {
     box-shadow: none !important;
   }
 
+  .xl\:box-sizing-border {
+    box-sizing: border !important;
+  }
+
+  .xl\:box-sizing-content {
+    box-sizing: content !important;
+  }
+
   .xl\:fill-current {
     fill: currentColor !important;
   }

__tests__/fixtures/tailwind-output.css

@@ -6817,6 +6817,14 @@ video {
   box-shadow: none;
 }
 
+.box-sizing-border {
+  box-sizing: border;
+}
+
+.box-sizing-content {
+  box-sizing: content;
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -16131,6 +16139,14 @@ video {
     box-shadow: none;
   }
 
+  .sm\:box-sizing-border {
+    box-sizing: border;
+  }
+
+  .sm\:box-sizing-content {
+    box-sizing: content;
+  }
+
   .sm\:fill-current {
     fill: currentColor;
   }
@@ -25446,6 +25462,14 @@ video {
     box-shadow: none;
   }
 
+  .md\:box-sizing-border {
+    box-sizing: border;
+  }
+
+  .md\:box-sizing-content {
+    box-sizing: content;
+  }
+
   .md\:fill-current {
     fill: currentColor;
   }
@@ -34761,6 +34785,14 @@ video {
     box-shadow: none;
   }
 
+  .lg\:box-sizing-border {
+    box-sizing: border;
+  }
+
+  .lg\:box-sizing-content {
+    box-sizing: content;
+  }
+
   .lg\:fill-current {
     fill: currentColor;
   }
@@ -44076,6 +44108,14 @@ video {
     box-shadow: none;
   }
 
+  .xl\:box-sizing-border {
+    box-sizing: border;
+  }
+
+  .xl\:box-sizing-content {
+    box-sizing: content;
+  }
+
   .xl\:fill-current {
     fill: currentColor;
   }

src/corePlugins.js

@@ -48,6 +48,7 @@ import position from './plugins/position'
 import inset from './plugins/inset'
 import resize from './plugins/resize'
 import boxShadow from './plugins/boxShadow'
+import boxSizing from './plugins/boxSizing'
 import fill from './plugins/fill'
 import stroke from './plugins/stroke'
 import tableLayout from './plugins/tableLayout'
@@ -126,6 +127,7 @@ export default function({ corePlugins: corePluginConfig }) {
     inset,
     resize,
     boxShadow,
+    boxSizing,
     fill,
     stroke,
     tableLayout,

src/plugins/boxSizing.js

@@ -0,0 +1,11 @@
+export default function() {
+  return function({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.box-sizing-border': { 'box-sizing': 'border' },
+        '.box-sizing-content': { 'box-sizing': 'content' },
+      },
+      variants('boxSizing')
+    )
+  }
+}

stubs/defaultConfig.stub.js

@@ -465,6 +465,7 @@ module.exports = {
     borderStyle: ['responsive'],
     borderWidth: ['responsive'],
     boxShadow: ['responsive', 'hover', 'focus'],
+    boxSizing: ['responsive'],
     cursor: ['responsive'],
     display: ['responsive'],
     fill: ['responsive'],