diff --git a/CHANGELOG.md b/CHANGELOG.md index 6422a0ea5f2c..56c24d5ab126 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +- Fix issue where container padding not applied when using object syntax ([#2353](https://github.com/tailwindlabs/tailwindcss/pull/2353)) ## [1.8.5] - 2020-09-07 diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js index 68d0486bbdb3..a81239e49931 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -209,6 +209,12 @@ test('responsive horizontal padding can be included by default', () => { [container()], config({ theme: { + screens: { + sm: '576px', + md: { min: '768px' }, + lg: { 'min-width': '992px' }, + xl: { min: '1200px', max: '1600px' }, + }, container: { padding: { default: '1rem', diff --git a/src/plugins/container.js b/src/plugins/container.js index 440f323d6c6a..ff1ff415d8ea 100644 --- a/src/plugins/container.js +++ b/src/plugins/container.js @@ -49,7 +49,11 @@ function mapMinWidthsToPadding(minWidths, screens, paddings) { _.each(minWidths, minWidth => { Object.keys(screens).forEach(screen => { - if (`${screens[screen]}` === `${minWidth}`) { + const screenMinWidth = _.isPlainObject(screens[screen]) + ? screens[screen].min || screens[screen]['min-width'] + : screens[screen] + + if (`${screenMinWidth}` === `${minWidth}`) { mapping.push({ screen, minWidth,