diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 964352ef2..b23f287f2 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -23,6 +23,7 @@ module.exports = { flexWrap: ['responsive'], alignItems: ['responsive'], alignSelf: ['responsive'], + justifyContent: ['responsive'], flexbox: ['responsive'], float: ['responsive'], fontFamily: ['responsive'], diff --git a/src/corePlugins.js b/src/corePlugins.js index f08cf825b..2b20774a6 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -17,6 +17,7 @@ import flexDirection from './plugins/flexDirection' import flexWrap from './plugins/flexWrap' import alignItems from './plugins/alignItems' import alignSelf from './plugins/alignSelf' +import justifyContent from './plugins/justifyContent' import flexbox from './plugins/flexbox' import float from './plugins/float' import fontFamily from './plugins/fontFamily' @@ -95,6 +96,7 @@ export default function(config) { flexWrap, alignItems, alignSelf, + justifyContent, flexbox, float, fontFamily, diff --git a/src/plugins/flexbox.js b/src/plugins/flexbox.js index 6b6a7afc6..2f52fd860 100644 --- a/src/plugins/flexbox.js +++ b/src/plugins/flexbox.js @@ -2,21 +2,6 @@ export default function({ variants }) { return function({ addUtilities }) { addUtilities( { - '.justify-start': { - 'justify-content': 'flex-start', - }, - '.justify-end': { - 'justify-content': 'flex-end', - }, - '.justify-center': { - 'justify-content': 'center', - }, - '.justify-between': { - 'justify-content': 'space-between', - }, - '.justify-around': { - 'justify-content': 'space-around', - }, '.content-center': { 'align-content': 'center', }, diff --git a/src/plugins/justifyContent.js b/src/plugins/justifyContent.js new file mode 100644 index 000000000..1c18b2173 --- /dev/null +++ b/src/plugins/justifyContent.js @@ -0,0 +1,24 @@ +export default function({ variants }) { + return function({ addUtilities }) { + addUtilities( + { + '.justify-start': { + 'justify-content': 'flex-start', + }, + '.justify-end': { + 'justify-content': 'flex-end', + }, + '.justify-center': { + 'justify-content': 'center', + }, + '.justify-between': { + 'justify-content': 'space-between', + }, + '.justify-around': { + 'justify-content': 'space-around', + }, + }, + variants + ) + } +}