> ## Content Index > Fetch the complete content index at: https://tailwindweekly.com/llms.txt > Use this file to discover other available public pages before exploring further. # Tailwind Weekly #227: Maizzle 6 components, rem vs px breakpoints, and new corner shapes 🌟 - URL: https://tailwindweekly.com/issue-227/ - Published: 2026-08-22T12:00:36.000Z - Updated: 2026-08-22T12:00:36.000Z - Author: Vivian Guillen Hello folks! Cosmin got CSS gradients working in Maizzle, so linear, radial and conic all survive the trip to an inbox. Nick Bevers digs into Tailwind's rem breakpoints and why a layout you tested at 16px can flip to `md:grid-cols-3` on someone else's machine. Zoran shows off `corner-shape`, which turns your `border-radius` into squircles, scoops and notches with one declaration. You also get a security video with a great account takeover tip, a cloud coding agent that bills by session instead of tokens, and an ESLint plugin that rewrites `w-[100px]` into `w-25`. Let's dive in πŸ‘‡ ## **🌟 News** ![](https://tailwindweekly.com/content/images/2026/08/image-6.png) ### **Mailviews components updated to Maizzle 6** [Cosmin](https://x.com/cossssmin/status/2088306501303652524?ref=tailwindweekly.com) updated every Mailviews component to Maizzle 6 and added a few new ecommerce ones along the way. He's giving the template packs the same treatment, with an announcement coming soon. If you own Mailviews, your components are already on the latest version. If you don't, it's 227 components with 935 variants in HTML, Maizzle or Tailwind CSS. ### **CSS gradients now work in Maizzle** Tailwind 4's gradient utilities lean on modern CSS that email clients choke on. Cosmin [fixed that](https://x.com/cossssmin/status/2088583056462430633?ref=tailwindweekly.com) by merging the gradient utilities into a single class that outputs a plain `background-image` declaration you can inline. Linear, radial and conic all work, so your gradients show up wherever the client supports CSS gradients. ### **eslint-plugin-tailwindcss** [**v4.4.0**](https://github.com/francoismassart/eslint-plugin-tailwindcss/releases?ref=tailwindweekly.com) FranΓ§ois added an `enforces-canonical-classname` rule, which needs Tailwind CSS v4.3.0 or above. Linting runs faster too. v4.3.0 shipped a few days earlier with much better Svelte support: `class:` directives, object syntax and array syntax. ## **🀩 Windy Picks** ### Me, again πŸ™‹πŸ»β€β™€οΈ Still looking for a full-time role, still open to freelance projects. 12 years of front-end work, plus full stack in Laravel, Vue, and React. On the Tailwind side: I run this newsletter, side projects like [Todowing](https://todowing.com/?ref=tailwindweekly.com) and [Windybase](https://windybase.com/?ref=tailwindweekly.com), and client work for [Baselair](https://thebaselair.com/?ref=tailwindweekly.com) and [FLX Websites](https://flxwebsites.com/?ref=tailwindweekly.com). Besides code, most of my week goes to people. I scope tickets with PMs so a sprint ships. If the empty state never made it into the Figma, I ask the designer instead of inventing one. When a client asks for something that will blow up the timeline, I tell them that week, not the week before launch. QA gets PR notes they can test against, and when a bug comes back I fix it. Hand me a Figma and a spec and I can take it from idea to launch. I've worked async with US and European teams for years, and I'm on AST so overlap is easy. Email me at [vivian@redpixel.io](mailto:vivian@redpixel.io) and let's chat πŸ™‚ ## **πŸ“š Learning** ![](https://tailwindweekly.com/content/images/2026/08/image-4.png) ### [Can we make default tailwind a more accessible choice?](https://spatie.be/blog/can-we-make-default-tailwind-a-more-accessible-choice?ref=tailwindweekly.com) Tailwind's default breakpoints use rem, which means a user's browser font size setting can move them. Nick Bevers from Spatie walks through why: setting `html { font-size }` does nothing, since rem inside a media query resolves against the initial value and ignores your CSS, but the browser's own default font size setting does shift things. So a layout you tested at 16px can flip into `md:grid-cols-3` on someone else's machine at a viewport you never checked. Nick argues both sides. rem breakpoints serve people who bump their base font instead of zooming, px breakpoints trigger exactly where you designed them. He includes a `@theme` override if you want to switch to px, plus a codepen where you can change your own font size and watch the rem breakpoint move while the px one stays put. ### [Security Mistakes Every Dev Makes (I Did Too)](https://www.youtube.com/watch?v=x6YBZ4w7Ueg&ref=tailwindweekly.com) A video full of practical security tips for any app you build. First one: returning 403 for a resource you can't access tells an attacker that resource exists, so return 404 either way, and use UUID v7 for your IDs since they're time-ordered, index friendly and not guessable from outside. From there it covers rate limiting every endpoint, by account ID rather than IP, so one user can't scrape the same route thousands of times. Also clamp the `per_page` value instead of trusting whatever the user sends, and use the same generic error message on login and password reset so nobody can fish for which emails are registered. The account takeover tip at the end is the one worth stealing. When a user changes their email, confirm on the new address and the old one before you commit the change. ### [Start Using the corner-shape CSS Property Today](https://www.youtube.com/watch?v=oKcrTBjmOio&ref=tailwindweekly.com) Zoran Jambor covers `corner-shape`, a CSS property that changes the shape of the corners `border-radius` already gives you. Set it to `squircle`, `scoop`, `bevel`, `notch` or `square` and you get a different border effect from a single declaration. He walks through a demo of each value, and the differences get much more obvious once you push the radius up to something like `11rem`. Every keyword maps to a `superellipse()` value behind the scenes, so `round` is `1`, `bevel` is `0`, `scoop` is `-1`, and you can pass your own number if none of the keywords fit your design. That also means you can transition between corner shapes. Browsers without support fall back to a normal rounded border, so small radii are safe to ship today, though Zoran suggests an `@supports` check if you're going extreme. ## **πŸ’… Showcase** [![](https://tailwindweekly.com/content/images/2026/08/screenshot-1440x900-1787358120737.webp)](https://standardcode.ai/?ref=tailwindweekly.com) ### [Standard Code](https://standardcode.ai/?ref=tailwindweekly.com) Standard Code is a cloud coding agent that bills by lines of service instead of tokens. One line gets you one active session with unlimited usage. Session state lives in the cloud, so you can start a task in the terminal and pick it up later in the web app, on macOS or iOS. It runs a team of domain-specific subagents for research, codebase exploration and asset generation, and their work stays out of your main session's context. The site is worth a scroll too, with an animated terminal, a +/βˆ’ line counter that updates pricing live, and a code editor mock. ## **🎁 Resource** ![](https://tailwindweekly.com/content/images/2026/08/image-5.png) ### [tailwind-suggest-plugins](https://github.com/anburocky3/tailwind-suggest-plugins?ref=tailwindweekly.com) If you've ever inherited a codebase full of `w-[100px]` and `text-[14px]`, this one's for you. It's a set of ESLint and Prettier plugins that convert arbitrary values into their canonical Tailwind equivalents, so `w-[100px]` becomes `w-25`. What makes it interesting is that it uses Tailwind's own language service instead of regex, so it also resolves custom theme tokens correctly. One heads-up: it doesn't play nicely with `prettier-plugin-tailwindcss` on save, but the README has a two-step workaround that runs both sequentially. ## **πŸ‘Œ Cool Stuff** [**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast. --- [**BotDirectoryAI**](https://botdirectory.ai/?ref=tailwindweekly.com) – Add bots via a single markdown file + PR (or tweet @botdirectoryai), plus a public JSON API to browse listings. [**Pi**](https://pi.dev/?ref=tailwindweekly.com) – A minimal agent harness you can extend with skills, prompts, themes, and packages, shareable via npm or git. [**Flipper Zero**](https://flipper.net/?ref=tailwindweekly.com) – A pocket multi-tool to explore RFID, NFC, Sub-1 GHz, IR, and GPIO debugging, with USB/BLE and apps. Do you want to share something with the Tailwind CSS community? You can [submit a link](https://forms.gle/2WhynnUkJTHkM7746?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.com). Want to support the newsletter? You can buy me a coffee with this [link](https://buymeacoffee.com/vivgui?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.