Part 37: Custom Breakpoints & Container Queries

While viewport breakpoints respond to the browser window size, Container Queries allow components to respond to the width of their parent container.

1. Custom Viewport Screens in tailwind.config.js

module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
        'xs': '475px',
      }
    }
  }
}

2. Modern Container Queries (@tailwindcss/container-queries)

A card component placed inside a narrow 300px sidebar should look like a mobile card, even if viewed on a 4K monitor. Container queries solve this:

<!-- 1. Mark the parent as a container -->
<div class="@container">
  <!-- 2. Use @sm: and @md: instead of sm: and md: -->
  <div class="flex flex-col @md:flex-row gap-4">
    <img src="/thumb.jpg" class="w-full @md:w-48" />
    <div>
      <h4 class="text-base @md:text-xl font-bold">Component Adapts to Container!</h4>
    </div>
  </div>
</div>

Key Takeaways

• Container queries make components truly reusable regardless of where they are placed.
• Mark the container with @container and query with @sm:, @md:, etc.

In Part 38, we build a Complete Responsive Landing Page with Navigation Drawer!