Skip to content

feat: Add max-width container query support #35

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

phucbm
Copy link

@phucbm phucbm commented Apr 23, 2025

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')
  ]
}

- 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
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant