Merge pull request #489 from tailwindcss/border-collapse

Add border collapse default styles and utilities

__tests__/fixtures/tailwind-output.css

@@ -610,6 +610,10 @@ button,
   cursor: pointer;
 }
 
+table {
+  border-collapse: collapse;
+}
+
 .container {
   width: 100%;
 }
@@ -1307,6 +1311,14 @@ button,
   background-size: contain;
 }
 
+.border-collapse {
+  border-collapse: collapse;
+}
+
+.border-separate {
+  border-collapse: separate;
+}
+
 .border-transparent {
   border-color: transparent;
 }

css/preflight.css

@@ -589,3 +589,7 @@ input::placeholder, textarea::placeholder {
 button, [role=button] {
     cursor: pointer;
 }
+
+table {
+  border-collapse: collapse;
+}

defaultConfig.stub.js

@@ -842,6 +842,7 @@ module.exports = {
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
+    borderCollapse: [],
     borderColors: ['responsive', 'hover'],
     borderRadius: ['responsive'],
     borderStyle: ['responsive'],

src/generators/borderCollapse.js

@@ -0,0 +1,8 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'border-collapse': { 'border-collapse': 'collapse' },
+    'border-separate': { 'border-collapse': 'separate' },
+  })
+}

src/utilityModules.js

@@ -5,6 +5,7 @@ import backgroundColors from './generators/backgroundColors'
 import backgroundPosition from './generators/backgroundPosition'
 import backgroundRepeat from './generators/backgroundRepeat'
 import backgroundSize from './generators/backgroundSize'
+import borderCollapse from './generators/borderCollapse'
 import borderColors from './generators/borderColors'
 import borderRadius from './generators/borderRadius'
 import borderStyle from './generators/borderStyle'
@@ -52,6 +53,7 @@ export default [
   { name: 'backgroundPosition', generator: backgroundPosition },
   { name: 'backgroundRepeat', generator: backgroundRepeat },
   { name: 'backgroundSize', generator: backgroundSize },
+  { name: 'borderCollapse', generator: borderCollapse },
   { name: 'borderColors', generator: borderColors },
   { name: 'borderRadius', generator: borderRadius },
   { name: 'borderStyle', generator: borderStyle },