Custom container breakpoint applies container max-width

[RomanSkrypnik]

Environment

---

• Operating System: Darwin
• Node Version: v18.12.1
• Nuxt Version: 3.12.3
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: yarn@1.22.19
• Builder: -
• User Config: compatibilityDate, devtools, modules
• Runtime Modules: @nuxtjs/tailwindcss@6.12.0
• Build Modules: -

---

Reproduction

Github: https://github.com/RomanSkrypnik/nuxt-tailwindcss-container-issue
Stackblitz: https://stackblitz.com/github/RomanSkrypnik/nuxt-tailwindcss-container-issue

Describe the bug

Trying to set specific max-width for container on each breakpoint but instead of it tailwind ignores given breakpoint and sets media query equal to container max-width
How it works now:

Expected result:

Additional context

No response

Logs

No response

[ineshbose]

Hey, thanks for opening an issue and sorry I couldn't get to this earlier!

Aren't you missing to put the config into theme: {}?

import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';

export default <Partial<Config>>{
  content: [
    './app.vue'
  ],
+ theme: {
  screens: {
    ...defaultTheme.screens,
    'xxs': '320px',
    'se': '375px',  // @todo replace xs with that breakpoint
    'xs': '380px',
    'xsm': '390px',
    'xm': '480px',  // xm (xs medium)
    '3xl': '1920px',
    '2.5xl': '1600px',
    '2xl': '1440px',
  },
  container: {
    center: true,
    screens: {
      '2xl': '1512px',
      'xl': '1280px',
      'md': '728px'
    },
    padding: {
        DEFAULT: '1rem',
        'xl': '2.25rem'
    }
  },
+ }
}