Fix issue where container padding not applied when using object syntax (

#2353)
tailwindlabs · Sep 9, 2020 · b49d80e · b49d80e
1 parent 9760468
commit b49d80e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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,