diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index a12d2c46b..0d7a36cd0 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -3442,6 +3442,66 @@ video { flex-shrink: 1 !important; } +.order-1 { + order: 1 !important; +} + +.order-2 { + order: 2 !important; +} + +.order-3 { + order: 3 !important; +} + +.order-4 { + order: 4 !important; +} + +.order-5 { + order: 5 !important; +} + +.order-6 { + order: 6 !important; +} + +.order-7 { + order: 7 !important; +} + +.order-8 { + order: 8 !important; +} + +.order-9 { + order: 9 !important; +} + +.order-10 { + order: 10 !important; +} + +.order-11 { + order: 11 !important; +} + +.order-12 { + order: 12 !important; +} + +.order-first { + order: -1 !important; +} + +.order-last { + order: 999 !important; +} + +.order-none { + order: 0 !important; +} + .float-right { float: right !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index d92841cfb..c15ea8d40 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -3442,6 +3442,66 @@ video { flex-shrink: 1; } +.order-1 { + order: 1; +} + +.order-2 { + order: 2; +} + +.order-3 { + order: 3; +} + +.order-4 { + order: 4; +} + +.order-5 { + order: 5; +} + +.order-6 { + order: 6; +} + +.order-7 { + order: 7; +} + +.order-8 { + order: 8; +} + +.order-9 { + order: 9; +} + +.order-10 { + order: 10; +} + +.order-11 { + order: 11; +} + +.order-12 { + order: 12; +} + +.order-first { + order: -1; +} + +.order-last { + order: 999; +} + +.order-none { + order: 0; +} + .float-right { float: right; } diff --git a/src/corePlugins.js b/src/corePlugins.js index e7d2cb25e..270b843ac 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -22,6 +22,7 @@ import alignContent from './plugins/alignContent' import flex from './plugins/flex' import flexGrow from './plugins/flexGrow' import flexShrink from './plugins/flexShrink' +import order from './plugins/order' import float from './plugins/float' import fontFamily from './plugins/fontFamily' import fontWeight from './plugins/fontWeight' @@ -92,6 +93,7 @@ export default function({ corePlugins: corePluginConfig }) { flex, flexGrow, flexShrink, + order, float, fontFamily, fontWeight, diff --git a/src/plugins/order.js b/src/plugins/order.js new file mode 100644 index 000000000..1c5dd9279 --- /dev/null +++ b/src/plugins/order.js @@ -0,0 +1,18 @@ +import _ from 'lodash' + +export default function() { + return function({ addUtilities, e, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('order'), (value, modifier) => { + return [ + `.${e(`order-${modifier}`)}`, + { + order: value, + }, + ] + }) + ) + + addUtilities(utilities, variants('order')) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 19b8ca649..fa4fdfb5a 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -389,6 +389,23 @@ module.exports = { '0': 0, default: 1, }, + order: { + first: '-1', + last: '999', + none: '0', + '1': '1', + '2': '2', + '3': '3', + '4': '4', + '5': '5', + '6': '6', + '7': '7', + '8': '8', + '9': '9', + '10': '10', + '11': '11', + '12': '12', + }, listStyleType: { none: 'none', disc: 'disc',