Split "Responsive design" into 2 "Media queries" and "Container queries" pages?

[karlhorky]

I attempted to use the Responsive Design utilities of Tailwind CSS today, revisiting the Responsive design docs page. However, in scrolling down, I unintentionally landed in the wrong "Using arbitrary values" section, which did not have many hints that I was in the section about container queries, not page-width media queries. I then mistook the @min-[<number>px]:<utility> syntax for the main media query syntax, and filed a bug (converted to discussion):

• Arbitrary Responsive Design Breakpoints failing? tailwindcss#19501
• Arbitrary Responsive Design Breakpoints failing? tailwindcss#19502

My proposal:

Split up the "Responsive design" docs page into 2 docs pages "Media queries" and "Container queries" (or similar alternative naming)

Upsides:

1. 1 instead of 2 "Using arbitrary values" sections which can cause the syntax confusion above
2. 1 instead of 2 "Using custom breakpoints/container sizes" sections which could possibly also cause similar syntax confusion

Possible downsides:

1. Duplication of explanations which apply to both?

Alternatives considered

Instead of splitting up the page, add UI affordances (eg. a sticky header) to show the user that they are in the Container Queries section. This seems to be more work, but maybe would be helpful for other docs pages too.