Introducing 𝚑𝚒𝚝-𝚊𝚛𝚎𝚊—a collection of Tailwind CSS utility classes for expanding the hit area of interactive elements. Small hit areas are a silent UX killer. One class fixes it. Distributed via shadcn registry - see link below.

@tailwindcss @shadcn done

let's goooo 💪 also it seems like I left some dead code in there 😬; feel free to re-install to remove the --𝚑𝚒𝚝-𝚊𝚛𝚎𝚊-𝚋𝚕𝚎𝚎𝚍-* related code may release that as an add-on later the intention was to add a 𝚑𝚒𝚝-𝚊𝚛𝚎𝚊-𝚋𝚕𝚎𝚎𝚍-* utility to add "extra" hit area to account for borders, instead of doing "𝚑𝚒𝚝-𝚊𝚛𝚎𝚊-𝟺.𝟸𝟻" which may not read as well you could do "𝚑𝚒𝚝-𝚊𝚛𝚎𝚊-𝟺 𝚑𝚒𝚝-𝚊𝚛𝚎𝚊-𝚋𝚕𝚎𝚎𝚍" but wasn't sold enough on it

@tailwindcss @shadcn Oh, sure, I’ll reinstall it, thanks!

@tailwindcss @shadcn awesome! really like your /craft as well

@tailwindcss @shadcn Thanks Tom 🙏 May need to do a post on that page, I don't really advertise it but it's basically my portfolio haha

@tailwindcss @shadcn Would love to see a non shadcn registry version. Just a copy&paste for the globals.css

@tailwindcss @shadcn What’s the CSS that powers it?

@tailwindcss @shadcn looks very familiar lol. cooked on the demo video fr fr!

@tailwindcss @shadcn hahaha I told you I was about to make a post on hit areas 🤣 thank u sir much appreciated 🙏

@tailwindcss @shadcn nah bro, c'mmon. i'm Zenith still 20. can't be calling me sir!

@tailwindcss @shadcn i apologize sincerely thank u unc

@tailwindcss @shadcn 🤣🤣

@tailwindcss @shadcn Thank you for making the web more accessible 🙏

@tailwindcss @shadcn 🐐

@tailwindcss @shadcn This is actually brilliant. Hit area bugs are the silent killer of UX - users click, nothing happens, they rage-quit. I've seen 30% drop-off on mobile forms from tiny tap targets alone. The real win? Consistent 44px minimum across all interactive elements. No excuses.

@tailwindcss @shadcn "I've seen 30% drop-off on mobile forms from tiny tap targets alone" that is a crazy stat if it's true thanks for the support 💪

@tailwindcss @shadcn So smart. Have needed this many times.

@tailwindcss @shadcn Thanks Ben 🙏

@tailwindcss @shadcn Very cool, thank you 🙏

@tailwindcss @shadcn Let me know how you like it Vlad 🙏

@tailwindcss @shadcn No class needed. <label> <input ... /> </label> HTML solved this problem long before anyone even had it. I think this knowledge was temporarily lost when the aria bros gave everyone divitis, but... This is the way.

@tailwindcss @shadcn <label> there u go

@tailwindcss @shadcn Nice. Link to repository?

@tailwindcss @shadcn nice one! what did you use for the video 👀?

@tailwindcss @shadcn I made a custom playground component to visualize & animate the hit areas (see below, pls forgive the spacing -- just prompted it quickly and didn't clean up) Then recorded each clip and inserted them into DaVinci Resolve

@tailwindcss @shadcn Insane!

@tailwindcss @shadcn crazy good

@tailwindcss @shadcn Thanks Vicente 🙏

@tailwindcss @shadcn Damn this is dope

@tailwindcss @shadcn Thanks Matt 🙏

@tailwindcss @shadcn This is such a great utility. Immediately adding this

@tailwindcss @shadcn Appreciate that Saul, lmk if you run into any issues

@tailwindcss @shadcn really cool!

@tailwindcss @shadcn Thank you Pedro 💪

@tailwindcss @shadcn Heck yes, been wanting something like this 🙏🏻

@tailwindcss @shadcn Glad this was helpful!

@shadcn @tailwindcss looks clean! thank you

@shadcn @tailwindcss Thanks Vu, appreciate it!

@shadcn @tailwindcss Any particular reason why you wanted it as a shadcn registry instead of tailwind plugin?

@shadcn @tailwindcss my understanding was tailwind plugins are "legacy" cc @adamwathan

@tailwindcss @shadcn You're the man

@tailwindcss @shadcn why didn't you call it hitbox 😭😭😭 (amazing job though)

@shadcn @tailwindcss Omg I was just thinking about making this, thank you for saving my tokens

@shadcn @tailwindcss Hahaha love it when that happens Let me know how it goes

@tailwindcss @shadcn so nice

@tailwindcss @shadcn why don’t just use a <label/> ? genuine question

@shadcn @tailwindcss Immediately installing this, thank you 🙏

@deckard_the_dev @shadcn @tailwindcss Thanks Deckard, lmk how it goes!

@tailwindcss @shadcn We missed bazza.

@tailwindcss @shadcn this example is terrible, the whole row should be a <label>

@anametolast @tailwindcss @shadcn you mean the whole cell, right? lol

@tailwindcss @shadcn it's better to make the whole row a label if you can (but of course if you're using literal <table> you can't do that)

@tailwindcss @shadcn goat video, btw love ur crafts 😙🤌

@shadcn @tailwindcss Nice

@shadcn @tailwindcss Thanks Nathan 🙏

@shadcn @tailwindcss @ishartwt need this on the scrollbar in timeline

@tailwindcss @shadcn nice work!

@tailwindcss @shadcn im sold

@tailwindcss @shadcn Does this work with slider handles?