Huge props to the team that made this Tailwind CSS v2.0 launch possible 👉 (thread)

tailwindcss.com
.@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 🤯 Image
.@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. Image
.@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.

tailwindcss.com/docs/ring-width
.@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. Image
.@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. Image
.@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. Image
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
 

Keep Current with Adam Wathan

Adam Wathan Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @adamwathan

24 Sep
A few people are a little bit confused about what this library actually is, so quick thread with some explanation...
First of all, what it’s not:

❌ 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): Image
Read 5 tweets
24 Sep
🚀 It's still early, but we tagged the first releases of Headless UI for React and Vue!

We're starting with a Menu Button (or dropdown for you common folk 😤), with new components coming every few weeks 🤩

Incredible work by @malfaitrobin on this one 👏

headlessui.dev
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:

codesandbox.io/s/headlessuire…
Read 6 tweets
21 Sep
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 🥴

core.trac.wordpress.org/ticket/41286
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 😶
Read 5 tweets
17 Sep
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. Image
Selectors like this get you very close, but the nail in the coffin is anything added to the `prose` class itself that is inheritable: Image
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. Image
Read 4 tweets
4 Sep
🥳 Just released Tailwind CSS v1.8.0!

🦑 New `font-variant-numeric` utilities
🐠 New grid alignment utilities (place-items!)
🐳 Even smaller file sizes
🌒 Experimental dark mode support

Check out the release notes for all the details 👉

github.com/tailwindlabs/t… Image
(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 🙈
Read 4 tweets
3 Sep
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 😬
Read 5 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!