An excellent overview of how to approach fluid design on the web. Lots of excellent references and techniques, particularly those around using Flex layout with flex-basis to control widths, or auto-repeating Grid layouts for extra control. Also some solid stats around the problems of designing for fixed breakpoints.
On the Tailwind trap, or how Tailwind hides the shortcuts and lures people into bad habits:
When I was using grid in Tailwind, I thought of it as a static thing with a defined number of columns, or rows, or both. To change it I had to explicitly state how many new columns (or rows) I wanted. I wasn't aware that a grid could be dynamic, adapting the number of columns or rows based on the content and available space
On how fluid design comes with one clear tradeoff:
Everything has tradeoffs - you can't have it all. And as far as I can tell the main tradeoff with building fluid websites is that you can't control every aspect. At some screen sizes it won't look exactly as you wished it did.
On the reality of designing for fixed breakpoints (and how rare those breakpoints are to fit what your users use):
Two of the designs I worked on were likely seen by less than 1% of people. And even if we're generous and include the entire range for the largest breakpoint, even though 1280px is at the top end, less than 3% of people would have seen three of my designs exactly as I intended them.
