Tailwind Weekly #38: New Tailwind UI update & code-along live stream from Adam!
Hello folks!
This week was packed with new stuff in the Tailwind ecosystem. We got a new update from the Tailwind Labs team, a new stream from Adam, and a new app (which is this week’s resource!) from the makers of Windy.
Things are definitely picking up steam this year, really looking forward to all that is coming this year for TailwindCSS!
Now, here’s this week’s sponsor:
⭐ Polypane is a stand-alone browser for web developers and designers that makes you five times as productive and helps you build better websites and apps. I use this daily for my frontend work and its 👌. If you sign up using this link you’ll get 20% off your subscription applied at checkout.
🌟News
This was no idle week for the Tailwind Labs team, we got another Tailwind UI Update.
Here’s what’s new:
- New Landing Page examples category with 3 examples
- 4 new Feature Section examples
- 3 new Hero Section examples
- 1 new Content Section example
- 1 new Newsletter Section example
- 1 new Stat Section example
- 1 new Testimonial example
And one of those landing pages was coded by Adam in a live stream. Definitely missed those.
📚Learning of the week
Custom Animations in TailwindCSS
Tailwind comes with some animations out of the box and you can add your own too but sometimes we need a little inspiration, that’s what this article is about, it showcases 5 different animations that you can add right now to your tailwind config and customize to whatever you need.
💅Showcase of the week
Loveboat
Loveboat sure has a unique style. With vibrant colors, lots of images, lovely typography, and subtle animations, the website looks very elegant and alluring. What a pleasant surprise was finding out such a cool website was made with tailwind, the sky’s the limit folks!
For the curious, here’s what Loveboat does:
Loveboat is a creative production company. Collaborating with a diverse cooperative of directors and interdisciplinary artists. Founded by filmmakers Jeff Baron, Greg Panteix, Nicolas Winding Refn, and Fred Fiore.
🎁Resource of the week
Tint by Beyond Code
From the makers of Windy, comes Tint, the color picker for TailwindCSS developers. But it’s not like any other color picker out there, no sir, this thing automatically takes the color of whatever you have your cursor on and translates it to the nearest Tailwind CSS color. How cool is that!
Reminds me a lot of the popular color picker Sip, but made exclusively for tailwind users. It’s macOS for now and supports Tailwind v1, v2, v2 extended color palettes.
If you design in the browser with tailwind, for such a cheap price ($10) this is a no-brainer.
🗞Classifieds of the week
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!
On Tailwind Made, we just updated our legal/business and e-commerce HTML templates to TailwindCSS v2, among other improvements. Do check them out!
Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then Windy is for you, the tool is still in its early stages but it looks very promising.
I highly recommend LambdaTest as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy to use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.
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 😁.
