Tailwind Container Queries (@container) & Fluid Typography

Style components based on parent container width rather than viewport width using @container and @md.

Component Container Queries in Tailwind

<div class="@container max-w-2xl bg-slate-900 p-6 rounded-2xl">
    <div class="flex flex-col @md:flex-row items-center gap-6">
        <img src="/images/avatar.jpg" class="w-24 h-24 @md:w-32 @md:h-32 rounded-xl" />
        <div>
            <h3 class="text-lg @md:text-2xl font-bold text-white">Adaptive Course Card</h3>
            <p class="text-xs @md:text-sm text-slate-400">Responsive to container boundaries!</p>
        </div>
    </div>
</div>

Previous Shadows & Glassmorphism (shadow-2xl, backdrop-blur-md)

Next Lesson Authoring Custom Tailwind CSS Plugins & Custom Utilities