diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 95ef5b28b..facc08a08 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -8461,6 +8461,22 @@ video { gap: 1px !important; } +.grid-flow-row { + grid-auto-flow: row !important; +} + +.grid-flow-col { + grid-auto-flow: column !important; +} + +.grid-flow-row-dense { + grid-auto-flow: row dense !important; +} + +.grid-flow-col-dense { + grid-auto-flow: column dense !important; +} + .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } @@ -18046,6 +18062,22 @@ video { gap: 1px !important; } + .sm\:grid-flow-row { + grid-auto-flow: row !important; + } + + .sm\:grid-flow-col { + grid-auto-flow: column !important; + } + + .sm\:grid-flow-row-dense { + grid-auto-flow: row dense !important; + } + + .sm\:grid-flow-col-dense { + grid-auto-flow: column dense !important; + } + .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } @@ -27632,6 +27664,22 @@ video { gap: 1px !important; } + .md\:grid-flow-row { + grid-auto-flow: row !important; + } + + .md\:grid-flow-col { + grid-auto-flow: column !important; + } + + .md\:grid-flow-row-dense { + grid-auto-flow: row dense !important; + } + + .md\:grid-flow-col-dense { + grid-auto-flow: column dense !important; + } + .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } @@ -37218,6 +37266,22 @@ video { gap: 1px !important; } + .lg\:grid-flow-row { + grid-auto-flow: row !important; + } + + .lg\:grid-flow-col { + grid-auto-flow: column !important; + } + + .lg\:grid-flow-row-dense { + grid-auto-flow: row dense !important; + } + + .lg\:grid-flow-col-dense { + grid-auto-flow: column dense !important; + } + .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } @@ -46804,6 +46868,22 @@ video { gap: 1px !important; } + .xl\:grid-flow-row { + grid-auto-flow: row !important; + } + + .xl\:grid-flow-col { + grid-auto-flow: column !important; + } + + .xl\:grid-flow-row-dense { + grid-auto-flow: row dense !important; + } + + .xl\:grid-flow-col-dense { + grid-auto-flow: column dense !important; + } + .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 4d6bb0863..bfd396ce8 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -8461,6 +8461,22 @@ video { gap: 1px; } +.grid-flow-row { + grid-auto-flow: row; +} + +.grid-flow-col { + grid-auto-flow: column; +} + +.grid-flow-row-dense { + grid-auto-flow: row dense; +} + +.grid-flow-col-dense { + grid-auto-flow: column dense; +} + .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -18046,6 +18062,22 @@ video { gap: 1px; } + .sm\:grid-flow-row { + grid-auto-flow: row; + } + + .sm\:grid-flow-col { + grid-auto-flow: column; + } + + .sm\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .sm\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -27632,6 +27664,22 @@ video { gap: 1px; } + .md\:grid-flow-row { + grid-auto-flow: row; + } + + .md\:grid-flow-col { + grid-auto-flow: column; + } + + .md\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .md\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -37218,6 +37266,22 @@ video { gap: 1px; } + .lg\:grid-flow-row { + grid-auto-flow: row; + } + + .lg\:grid-flow-col { + grid-auto-flow: column; + } + + .lg\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .lg\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -46804,6 +46868,22 @@ video { gap: 1px; } + .xl\:grid-flow-row { + grid-auto-flow: row; + } + + .xl\:grid-flow-col { + grid-auto-flow: column; + } + + .xl\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .xl\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } diff --git a/src/corePlugins.js b/src/corePlugins.js index 6e7c85d5d..fc61da7ba 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -74,6 +74,7 @@ import translate from './plugins/translate' import gap from './plugins/gap' import columnGap from './plugins/columnGap' import rowGap from './plugins/rowGap' +import gridAutoFlow from './plugins/gridAutoFlow' import gridTemplateColumns from './plugins/gridTemplateColumns' import gridColumn from './plugins/gridColumn' import gridColumnStart from './plugins/gridColumnStart' @@ -158,6 +159,7 @@ export default function({ corePlugins: corePluginConfig }) { gap, columnGap, rowGap, + gridAutoFlow, gridTemplateColumns, gridColumn, gridColumnStart, diff --git a/src/plugins/gridAutoFlow.js b/src/plugins/gridAutoFlow.js new file mode 100644 index 000000000..a2fa74c44 --- /dev/null +++ b/src/plugins/gridAutoFlow.js @@ -0,0 +1,13 @@ +export default function() { + return function({ addUtilities, variants }) { + addUtilities( + { + '.grid-flow-row': { gridAutoFlow: 'row' }, + '.grid-flow-col': { gridAutoFlow: 'column' }, + '.grid-flow-row-dense': { gridAutoFlow: 'row dense' }, + '.grid-flow-col-dense': { gridAutoFlow: 'column dense' }, + }, + variants('gridAutoFlow') + ) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 6f36f931b..ab7acb76c 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -585,6 +585,7 @@ module.exports = { gap: ['responsive'], columnGap: ['responsive'], rowGap: ['responsive'], + gridAutoFlow: ['responsive'], gridTemplateColumns: ['responsive'], gridColumn: ['responsive'], gridColumnStart: ['responsive'],