.@bradlc who built the entire website. I absolutely did not expect us to have time for all the insane interactions and animations. He managed to do everything I ever dreamed of plus more, and the APIs he created for it are a delight to work with.
.@malfaitrobin who worked side-by-side with me to develop all of the new features in Tailwind CSS v2.0, and took on the massive job of updating Tailwind UI to take advantage of all the new features. He built an entire automated system that can idempotently update our templates 🤯
.@simonswiss who has been working on tons of new educational content for Tailwind CSS v2.0 that we'll be releasing in the coming days, including tons of new videos on all the new features.
.@david_luhr who audited all of the Tailwind UI templates for accessibility issues and improved them all, and worked with me to develop new features like the "ring" API so we could finally solve the beautifully designed accessible focus style problem.
.@dizzyup who spent a ton of evenings and weekends helping us break through design challenges and come up with new concepts for presenting the ideas in the framework. We could never have landed at the beautiful website we have today without his help.
.@dnisttahuz who put together the amazing and hilarious trailers for us at the last minute, constantly wowing us with every draft he sent over.
.@jasonlbeggs for jumping in at the 11th hour to help us hammer through the dozens and dozens of pages of documentation to get all of the examples updated for the new branding.
.@WEARETULIP for the incredible trailer music 😅 So grateful to have grown up with a friend as talented as this guy, and so unreal to be able to get a legit professional like Ashleigh to do the choir parts for us 😅
.@steveschoger for continuing to push his own limits and push all of our design stuff to the next level, and for battling through all the unbelievably hard strategy decisions that went into putting this whole thing together. Dude is an A+ business partner.
You would never believe the amount of work that goes into trying to do this sort of thing, and to do something to this standard of quality with such a tiny team completely blows my mind.
So unbelievably grateful to be able to work with people this talented, thank you ❤️
• • •
Missing some Tweet in this thread? You can try to
force a refresh
❌ Not an alternative to Tailwind UI
❌ Not a predesigned UI kit
❌ Not styled at all
❌ Not in any way tied to Tailwind, there is no CSS or classes or anything of any kind in the library
Instead, it’s a set of low-level completely unstyled primitives that let you build *custom* versions of common components faster, *with your own design you bring yourself*.
This is what a menu button renders by default (that’s the default browser focus ring, not bundled CSS):
If you haven't seen us hinting at it, Headless UI is a set of completely unstyled, fully accessible UI primitives that make it really easy to build custom controls that are super easy to customize and style.
It's the component library I've always dreamed of 😍
Here's a quick demo of the Menu Button component in React:
Learned today that using the box shadow property to create custom focus styles is insufficient because high contrast mode on Windows doesn’t render box shadows at all.
The hoops you have to jump through on the web are unbelievable, it’s no wonder everything is inaccessible :/
Here’s a relevant link, thanks @david_luhr for teaching me about this one 🥴
Take away is if you want a custom focus style that follows an element’s border radius, literally only option is pseudo elements that are absolutely positioned relative to the main element so they aren’t in the document flow. No one does this of course though 😶
Four hours of trying to build an "unprose" feature for the Tailwind typography plugin and I have determined that it is essentially impossible.
The inevitable conclusion is "create a CSS variable for every inheritable property" which is just, no.
Selectors like this get you very close, but the nail in the coffin is anything added to the `prose` class itself that is inheritable:
These styles are inherited to children even if you stick an `unprose` in between and there's literally nothing you can do about it beyond `all: initial` (unset maintains the inheritance), which also overrides reset styles you _do_ want to preserve from elsewhere in your CSS.
(Haven't had a chance to add docs for the new utilities yet but wanted to get the release out for the eager beavers anyways! If anyone wants to scaffold out the basic pages for `font-variant-numeric` and the added alignment utilities I'll send you a t-shirt!)
Should've said "even bigger file sizes", I broke PurgeCSS completely and have now uncovered a flaw in our purge tests 👀
Hold off on upgrading 'til we fix it, hopefully after my toddler goes to bed 🙈
Didn't think it could be done but thanks to @DavidKPiano I have successfully created a composable API for font-variant-numeric that lets you combine the different options arbitrarily in your HTML 😎
Tailwind v1.8 tomorrow? 🤔
CSS Custom Properties: Theming Isn't The Exciting Part™
Fun/dark follow-up, have to use /*!*/ for the null custom properties rather than /**/ or minifiers will strip the properties 😬