Add column utilities

Co-Authored-By: Adam Wathan <[email protected]>
Co-Authored-By: Cody <[email protected]>

src/corePlugins.js

@@ -813,6 +813,8 @@ export let appearance = ({ addUtilities }) => {
   })
 }
 
+export let columns = createUtilityPlugin('columns', [['columns', ['columns']]])
+
 export let gridAutoColumns = createUtilityPlugin('gridAutoColumns', [
   ['auto-cols', ['gridAutoColumns']],
 ])

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',

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;
 }

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>

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;
 }

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>