Repository: tailwindlabs/tailwindcss (ts)

Issue:
Responsive Container Classes dont work

 ```
module.exports = {
  purge: [],
  theme: {
    container: {
      center: true,
      padding: {
        default: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
```
This do not work. Just the default has an effect to the container when compiled. 

Maybe this is in conflict with my screens config:

``` 
 screens: {
      'sm': { 'min': '640px' },
      'md': { 'min': '768px' },
      'lg': { 'min': '1024px' },
      'xl': { 'min': '1280px' },
      'xxl': { 'min': '1441px' },
      'wide': { 'min': '1601px' },
      'ultrawide': { 'min': '1901px' },
      'landscape': { 'raw': '(orientation: landscape) and (max-width: 1280px)' },
      'phone-landscape': { 'raw': '(orientation: landscape) and (max-width: 1024px)' },
      'mini-landscape': { 'raw': '(orientation: landscape) and (max-width: 640px)' },
 },
```

Is this normal that this don't work that way or is this maybe a bug?
I  tinkered around 2 hours on this today but as I said - just the default has an effect for me - not the breakpoint ones. 

I hope its my bad and not a bug. 

Tailwindcss version: 1.8.3



Pull request:
Fix issue where container padding not applied when using object syntax
Fixes #2339.

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6422a0ea..56c24d5a 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/src/plugins/container.js b/src/plugins/container.js
index 440f323d..ff1ff415 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,


Test patch:
diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js
index 68d0486b..a81239e4 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',