diff --git a/src/corePlugins.js b/src/corePlugins.js index 566d75468f49..4f34c9cf7885 100644 --- a/src/corePlugins.js +++ b/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']], ]) 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 @@
+
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 @@
+