Tailwind Weekly #74: new Tailwind UI and Headless UI updates!
Hello folks!
We got a new Tailwind UI update and a Headless UI update, this time about "Comboboxes", check out the News section to learn more about it but I gotta tell you, they're 💅.
P.S. I couldn't send the newsletter without talking a bit about what's happening in Ukraine right now. We just barely got over a plague and now there's a war, it's honestly surreal. If you want to support Ukraine here's a great resource on how to help and the best non-profits to donate to.
🌟 News
With the new Tailwind UI and Headless UI updates we now have what the Tailwind team calls "Comboboxes" components, some people would also call them "Autocomplete" components.
You can check out the new Comboboxes designs here and the new Headless UI Combobox component here.
To top it all off, the team also released a video of Simon coding a Combobox from scratch using the Headless UI component. It's a bit long (38m) but it's sooo worth it.
🤩 Sponsor
The sponsor of this issue is the DevTools for Tailwind CSS browser extension. The DevTools for Tailwind bring back designing and debugging in your browser. Intellisense autocompletion, full JIT engine support in minified production sites, and more. Get a 20% discount if you use the code TAILWIND-WEEKLY during the checkout.
Bytes is probably the funniest JavaScript newsletter you'll ever read (trust me). If you like Tailwind Weekly, I've got a feeling you'll love Bytes too. Check it out.
📚 Learning
A Deep CSS Dive Into Radial And Conic Gradients
When I was first learning about CSS gradients years ago I quickly ignored Radial and Conic gradients are being hard to do with not many uses cases. This article completely destroyed that notion and I think it will do that to you too!
Ahmad once again delivers a great intro to a complicated CSS topic and makes it child's play, definitely give it a read!
How to style HTML tables with Tailwind CSS
Ever had to style an HTML table with Tailwind CSS and felt at a loss? Our latest tutorial at Red Pixel Themes can fix that! We show you how to style a table from scratch and add things like headers in different colors, hover effects, striped rows, etc.
💅 Showcase
Awake Security
Subtle on load animations, seamless background videos, angled backgrounds, beautiful hover button animations, and vibrant colors, what's not to love? Also, they definitely know how to make a great seamless hero background video, that neural network video is 👌.
For the curious, here's Awake Security's description:
Get a security solution built on an AI platform that acts like the human brain to sense, detect, and respond to threats you may not even know exist.
🎁 Resource
Conic.css
Following the same idea of this week's top learning resource, I also wanted to show you some cool conic gradients and this week's resource does exactly that. Conic.css is a compilation of beautiful conic gradients you can use on your future projects. Just click on the one you like and the CSS will be copied to your clipboard.
👌 Promoted links
Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!
Tailwind Made is now Red Pixel Themes 🥳! Check out our official blog post about the move. Our templates stay the same. We have portfolio, business, blog, and e-commerce templates if you’re interested.
Inspect Flow - The complete developer tool for Tailwind CSS. 50% off sale: inspectflow.io
This Week In React: the best of React & React-Native news. Sebastien filters the noise, and you save time!
Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. Check it out here.
Want to share something with the TailwindCSS community? You can submit a link or message me on Twitter @vivgui.
Want to support the newsletter? You can buy me a coffee with the link below 😁.
