Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Everyday Utility Families 1: Layout, Flex, Grid, Spacing, Sizing and Position Utilities
Tailwind's layout utilities map one to one onto CSS, and numeric values derive from a single --spacing variable; the hard part is knowing which CSS to pick. We build Bookstore's catalog grid, book card and two-column cart page both with utilities and with plain CSS, compare the boxes of both pages at three widths in Playwright (0px difference), and measure space-x breaking on wrapping rows, a missing min-w-0 and the difference between auto-fill and auto-fit.
Responsive Mixins and Generating Utility Classes: a Breakpoint Map, @content(args), a Container Query Mixin and Utilities with @each/@for
Write up, down, between and only mixins that read breakpoints from one map with range syntax; this ends the overlap of max-width and min-width right at the boundary, and the same mixins produce container queries through $container. We add a generator that produces md:-prefixed utilities with @content(args) and a button that looks at the card's width to Bookstore, and measure that making everything responsive multiplies the rule count by 3.6.