From 3be8748293cbeec0e26e0859120ad8ee623d136a Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Thu, 9 Sep 2021 07:38:35 -0400
Subject: [PATCH] Add column utilities

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-Authored-By: Cody <codytooker@gmail.com>
---
 src/plugins/columns.js           |  5 +++++
 src/plugins/index.js             |  1 +
 stubs/defaultConfig.stub.js      | 28 ++++++++++++++++++++++++++++
 tests/arbitrary-values.test.css  |  6 ++++++
 tests/arbitrary-values.test.html |  1 +
 tests/basic-usage.test.css       |  6 ++++++
 tests/basic-usage.test.html      |  1 +
 7 files changed, 48 insertions(+)
 create mode 100644 src/plugins/columns.js

diff --git a/src/plugins/columns.js b/src/plugins/columns.js
new file mode 100644
index 000000000000..b60f83bd2939
--- /dev/null
+++ b/src/plugins/columns.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function () {
+  return createUtilityPlugin('columns', [['columns', ['columns']]])
+}
diff --git a/src/plugins/index.js b/src/plugins/index.js
index dcf316ca16fe..f5db8a041fcf 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -51,6 +51,7 @@ export { default as listStylePosition } from './listStylePosition'
 export { default as listStyleType } from './listStyleType'
 
 export { default as appearance } from './appearance'
+export { default as columns } from './columns'
 export { default as gridAutoColumns } from './gridAutoColumns'
 export { default as gridAutoFlow } from './gridAutoFlow'
 export { default as gridAutoRows } from './gridAutoRows'
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 8be05ea55c75..02324cb2cb5e 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -38,6 +38,34 @@ module.exports = {
       pink: colors.pink,
       rose: colors.rose,
     }),
+    columns: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      '3xs': '16rem',
+      '2xs': '18rem',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+    },
     spacing: {
       px: '1px',
       0: '0px',
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 0a4b2ab8a18b..9f0cdc0a4898 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -181,6 +181,12 @@
   --tw-skew-y: 3px;
   transform: var(--tw-transform);
 }
+.columns-\[20\] {
+  columns: 20;
+}
+.columns-\[var\(--columns\)\] {
+  columns: var(--columns);
+}
 .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
   grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index 5945c1dfff6f..3c55dd90406b 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -39,6 +39,7 @@
     <div class="max-h-[var(--height)]"></div>
     <div class="space-x-[20cm]"></div>
     <div class="space-x-[calc(20%-1cm)]"></div>
+    <div class="columns-[20] columns-[var(--columns)]"></div>
     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
     <div class="lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
     <div class="grid-rows-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index e78a9b0a7c87..a86cfe8b2787 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -314,6 +314,12 @@
 .appearance-none {
   appearance: none;
 }
+.columns-1 {
+  columns: 1;
+}
+.columns-md {
+  columns: 28rem;
+}
 .auto-cols-min {
   grid-auto-columns: min-content;
 }
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
index 18e239879050..69ce7b89342a 100644
--- a/tests/basic-usage.test.html
+++ b/tests/basic-usage.test.html
@@ -61,6 +61,7 @@
     <div class="font-medium"></div>
     <div class="gap-x-2 gap-y-3 gap-4"></div>
     <div class="from-red-300 via-purple-200 to-blue-400"></div>
+    <div class="columns-1 columns-md"></div>
     <div class="auto-cols-min"></div>
     <div class="grid-flow-row"></div>
     <div class="auto-rows-max"></div>