Tailwind Weekly #33: We got new videos & another rebuild with tailwind stream

By Vivian Guillen — Dec 5, 2020

Hello folks!

For our USA friends, I hope you had a great thanksgiving weekend! For the rest of us, I hope you enjoyed this year’s black friday and cyber monday deals 💸.

This week has been full of videos! Between the “What’s new in Tailwind CSS” series and Adam making a new “Rebuild X with TailwindCSS” (an e-commerce site this time!) the Tailwind Labs team sure has been busy.

By the way, I’m trying out a new format for the News section folks! I’ll try to make it more conversational and less just a list of links and see what happens 🙂.

🌟News

We now have Emmet support on Tailwind Play.

We got new videos from the “What’s new in Tailwind CSS” series, showcasing some new features from v2:

Adam also did a new code along screencast this week, this time, recreating an ecommerce site, Allbirds.com. Check out Part 1 and Part 2.

As for the ecosystem, this week we got some nice updates.

We now have official TailwindCSS support on the latest version of WebStorm. And a new color showcase feature on the latest version of the tailwind module for NuxtJS.

📚Article of the week

Simple pie charts with fallback, today – Lea Verou

I’m a really big fan of CSS-only solutions to problems we thought could only be solved with some JS magic.

I remember when I discovered I could do same height columns with flexbox, it was 🤯.

Well, guess what, now we can do simple pie charts with only CSS!

This article shows you how to do it using conic-gradients which have decent support across modern browsers but no IE11 support.

💅Showcase of the week

Deno - A secure runtime for JavaScript and TypeScript

I love showcasing all kinds of websites made with TailwindCSS here but its also good to remember that, sometimes, simple and clean can definitely be great too!

Take this week’s showcase, Deno’s website, which is as simple as it gets when it comes to new technology websites. They’re using some of the colors from the default tailwind palette and don’t have a lot of fancy content on the homepage. They go straight to the point on what it is, what it does great, how to install it, etc and start showcasing code right away, in a very minimalistic and easy to understand format.

So if you want to launch something new soon, don’t worry too much about the visuals and focus more on the idea or message you want to convey.

When in doubt, something is better than nothing 😉.

🎁Resource of the week

Windy - Transform every element on any website to Tailwind CSS

The Tailwind ecosystem is evolving extremely fast! We now are getting new tools not just to improve your tailwind code but also to improve your coding experience.

But this week’s resource is kind of special since I believe it solves a very interesting problem. Now, to get to the point:

Windy is a browser extension for Google Chrome and Firefox that lets you transform HTML elements to Tailwind CSS.

Sounds cool of course but what problem does that solve?

Well sometimes, when I’m browsing other websites and I see a element or component I want to replicate with Tailwind, there’s a lot of back and forth between their website, my project and my code. With windy, you just install the extension, start clicking around and you’ll get tailwind classes with the closest approximation values from the tailwind config, pasted it to your clipboard.

That’s it, next you paste the code, customize it to your needs and now you just saved 15m. Do that for multiple components in one project and the tools just pays for itself in time saved.

The catch? The tool is still in the “early access” stage so you may find some bugs here and there but I definitely think this is a great tool to have in your arsenal if you do a lot of “designing in the browser” with tailwind.

Between this and UI Devtools, the market for tailwind coding tools is getting very exciting!

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 😁.