skip to content

A hand-drawn ASCII scene: Brandon sits at his desk with headphones on, typing while code scrolls on the monitor. A radio plays on the desk, a cat naps on the bed with its tail wagging, and out the window a city skyline drifts by with planes and the occasional UFO. Two little girls play on the floor while their mom stops by the doorway.

$ whoami

Brandon McConnell

A software engineer helping communities build platforms and people build products.

San Francisco, CA

about

I build tools for developers: Tailwind CSS plugins, React utilities, browser and editor extensions, and the occasional thing that exists only because I wanted to see if it could. I care about APIs that read the way you think, and about the small ergonomic wins that add up over a working day.

By day I'm a frontend engineer at Mintlify. I also run Toolwind, the org behind my Tailwind plugins and a registry of Tailwind tools that Vercel's OSS program is helping me build. I enjoy contributing to open source packages I use, and to the languages underneath them through CSSWG and TC39 discussions, browser bug trackers, and web-platform-tests.

Most of that thinking shows up on X first: plugin launches, CSS tricks people assume need JavaScript, and the occasional spec argument. Off the clock I'm a follower of Christ, a blessed husband, and a dad of two girls.

projects

  • toolwind/signals796 starstailwind, css

    Style descendants based on an ancestor's state via style queries, no more variant chains.

  • render-hooks413 starsreact

    Inline, render-block-stable React hooks. Call hooks where you need them, not at the top.

  • typed.css240 starsscss, animation

    A full-featured typewriter mixin for SCSS: multiple strings, per-string styling, animated caret, accessible.

  • toolwind/mixins220 starstailwind

    Reusable groups of utilities for Tailwind with a declarative API that stays utility-first.

  • toolwind/multi185 starstailwind

    Variant-grouped utilities: multi-['fixed;top-3;right-3'] instead of repeating the variant.

  • toolwind/members74 starstailwind, css

    Style an ancestor based on the state of its descendants. The inverse of signals.

  • toolwind/lerp-colors55 starstailwind, color

    Interpolate between configured colors for extra stops, like red-425. Built on chroma.js.

  • shadd34 starscli

    Global alias for `npx shadcn add` that detects your package manager.

  • toolwind/shadows28 starstailwind

    Directional shadows for Tailwind: shadow-b-lg/20 and friends.

  • Close every tab and group except the active one, borrowed from Sublime's CloseOtherWindows.

  • open-in-gitkrakenbrowser extension

    Browser extension that adds an Open in GitKraken option to GitHub's clone menu, using GitKraken's deep links.

  • geldbrowser extension

    Browser extension that tucks test files out of GitHub diffs and fixes the counts, so you review the code that matters first.

Also merged into tailwindcss, svelte-ux, svelte.dev, epic-stack, t3.gg, and web-platform-tests, among others.

Star counts come from GitHub and refresh hourly. More at github and toolwind.

interests

  • CSS that people think is JavaScript's job
  • Developer ergonomics and API design
  • Browser specs, WPT, and filing the bug
  • Tailwind CSS internals and plugin authoring
  • Hiking, skiing, and any excuse to be outdoors
  • Traveling, and walking a new downtown until my feet give out
  • Great coffee, matcha, and boba, ideally all three in one day
  • Listening to great tunes (the radio in the scene is not decorative)
  • Any sport where I get to hit a ball over a net: table tennis, volleyball, pickleball
  • Photography, and seeing movies in an actual theater

Brandon’s been involved with CSSWG discussions for several years at this point, and I find I’ve never been disappointed seeing one of his comments. Not all of his ideas end up in a spec, but that’s not an issue - it just means that he dreams big, and importantly, he always does so with good justifications underlying his ideas.

Editor of ~50% of CSS specs

1 / 19, swipe the top card in any direction for the next one