Tailwind and Headless UI

TailwindCSS is a great way of writing styles for not just web apps, but also for mobile apps. But do you know Adam Wathan and team is building an ecosystem around it?

I’ve been using Tailwind since months now, and I only have 3 words for it, I love it. And when I say that Tailwind is not just for web apps, but also for mobile apps, I meant there are libraries for React Native which lets you style components with tailwind class names. Isn’t it cool?

Fun fact: 90% of the styles in Maazi, a diary app which I released for iOS a month or so back is written in Tailwind. I used a tailwind-rn for React Native and it made writing styles fairly easy.

The ecosystem

Most of us have heard of Tailwind and TailwindUI. But Adam Wathan and the good folks at Tailwind team have recently released HeadlessUI. What’s that you would ask?

HeadlessUI is the missing part of Tailwind. Think of it as the JavaScript part of Bootstrap which adds components like Dropdowns, Tabs etc., only that these components are completely unstyled which is a good point to start from. So in other words, you can say Tailwind + HeadlessUI is an alternative to Bootstrap, but only better than Bootstrap.

Also HeadlessUI is available for React and Vue right now with small set of components with more components to be added in future. Now if you want to write animations in a project with Tailwind installed, how would write it? You would probably use CSS `keyframes` animation or some third-party library. The most interesting thing for about Headless is that it comes with a Transition component.

Transition component is a way to write CSS animations for your apps using Tailwind classes, isn’t it cool? Just go to the link above and check the docs on how it works, you just wrap the element with the Transition component and add `to` and `from` state class names and done. They’ve made it so easy for everyone to write CSS and animations.

Then comes TailwindUI of course. This has been out there for sometime. These are basically Headless components with styles for plug and play use.

There are other things like recently released Tailwind Playground, themes for Tailwind etc. This whole Tailwind ecosystem is growing fast and maturing pretty well and it makes me curious to see the future of design.

PS: I’ve discovered Headless UI’s transition component today only.