Public/waveterm
2
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-11-28 05:00:26 +08:00
Code Issues Projects Releases Packages Wiki Activity
waveterm/aiprompts/tailwind-container-queries.md
Mike Sawka d272a4ec03
 New AIPanel (#2370) 
Massive PR, over 13k LOC updated, 128 commits to implement the first pass at the new Wave AI panel.  Two backend adapters (OpenAI and Anthropic), layout changes to support the panel, keyboard shortcuts, and a huge focus/layout change to integrate the panel seamlessly into the UI.

Also fixes some small issues found during the Wave AI journey (zoom fixes, documentation, more scss removal, circular dependency issues, settings, etc)
2025-10-07 13:32:10 -07:00

1,005 B
Raw Permalink Blame History

Tailwind v4 Container Queries (Quick Overview)

  • Viewport breakpoints: sm:, md:, lg:, etc. → respond to screen size.
  • Container queries: @sm:, @md:, etc. → respond to parent element size.

Enable

No plugin needed in v4 (built-in). In v3: install @tailwindcss/container-queries.

Usage

<aside class="@container w-64 bg-gray-100">
  <div class="w-32 @sm:w-48 @md:w-64 bg-blue-500">Content</div>
</aside>
  • @container marks the parent.
  • @sm: / @md: refer to container width, not viewport.

Notes

  • Based on native CSS container queries (well supported in modern browsers).
  • Breakpoints for container queries reuse Tailwind’s sm, md, lg, etc. scales.
  • Safe for modern webapps; no IE/legacy support.

we have special breakpoints set up for panels:

--container-xs: 300px;
--container-xxs: 200px;
--container-tiny: 120px;

since often sm, md, and lg are too big for panels.

so to use you'd do:

@xs:ml-4