feat: Add max-width container query support

[phucbm]

Changes

• Allow configuration of max-width container queries using object syntax
• Support both string values (min-width) and object values with max/min properties
• Sort max-width queries in descending order
• Maintain backward compatibility with original string-based configuration
• Add proper TypeScript type definitions

Usage

// tailwind.config.js
module.exports = {
  theme: {
    containers: {
      // Default min-width queries (unchanged)
      'sm': '24rem',      // 384px
      'md': '28rem',      // 448px
      
      // New max-width queries
      'mobile': { max: '30rem' },      // 480px
      'tablet': { max: '48rem' },      // 768px
      
      // You can mix both types
      'desktop': { min: '64rem' },     // 1024px
      'wide': '80rem',                 // 1280px
    }
  },
  plugins: [
    require('@tailwindcss/container-queries')
  ]
}

[RobinMalfait]

Hey!

Thanks for the PR, since Tailwind CSS v4 is out and container queries are now built-in, I would recommend to use the built-in container queries.

In v4 we decided to simplify how screens (breakpoints) and container queries work and just configure a single value instead.

In v4 this functionality exists for free right now. Instead of configuring a min or max width container query, you write the value and explicitly use @min or @max as part of the variant:

@sm:flex     /* @container (width >= 24rem) */
@min-sm:flex /* @container (width >= 24rem) */ /* Essentially an alias */
@max-sm:flex /* @container (width < 24rem) */

If you later want to define custom values such as desktop, you can use:

@theme {
  --container-desktop: 64rem;
}

And use it as @min-desktop:… and @max-desktop:…. This moves explicit control to where you use the variant.

Since this plugin is only really used by Tailwind CSS v3 users, I am going to say no to this PR for now. We can revisit this if more people want this functionality.