Tailwind Weekly #27: New Tailwind Labs employee + more tailwind 2.0 eye candy 🍬

Hello folks!

This week we finally met the newest Tailwind Labs employee, Robin Malfait! Robin is a full stack developer from Belgium who loves Laravel and React. Be sure to say hi to him on twitter and check his personal website. And here’s the post on how the team decided to hire him, it’s quite a read!

We also got to see Adam opening a PR for the oldest and most requested feature in TailwindCSS.

Also JetBrains made a very exciting announcement, it looks like we’ll be getting Tailwind support in WebStorm later in the year.

No bad for just 1 week 😉.

🌟News

YeS! @apply will finally support media queries and pseudo selectors like :hover and :focus and it’s coming for V2.0!

TailwindCSS support is supposedly coming to WebStorm in November

With WebStorm 2020.3 scheduled for the end of November, we’d like to share our plans for the rest of the year.

Here are some of the highlights from our roadmap:

We’ll do our best to add support for Tailwind, a popular CSS framework.

📚Article of the week

Tailwind CSS Tips and Tricks

This post from our friend Jason Beggs is quite a treat. It’s basically a collection of solutions (using tailwind) to very specific but common scenarios you encounter while working with UI’s like “How to vertically center a div inside another div” or the classic “How to center an SVG/Icon and text inside a button or link”. Of course, with CSS, there are multiple solutions to those kind of situations but I like that Jason keeps his solutions very simple and easy to remember.

💅Showcase of the week

Curiously Creative Web Design in Bath | Our name is Mud

This week we get another agency showcase but this one will likely subvert your expectations!

First thing you see is a lovely custom cursor that becomes very iPadOS like on link hover.

Then you check out the pages and see all those subtle animations, like the unique shape opening in each project’s image and the hero background line that you swore it was an image but nope.

And finally, when checking the last page, you get delighted by the off canvas menu that open to the right, to show the contact info.

It’s like I could never predict that the website would do next! Very unique and impressive, definitely check it out.

Here’s how “Our Name is Mud” describe their company:

We build websites, plan digital strategies and create great online results for clients across the UK. Curiously Creative thinking. Great code. A friendly team. Our name is Mud.

🎁Resource of the week

variantwind

Meet variantwind, a vue directive that lets you write code like this:

<div v-variantwind class=“w-full bg-red-500 md:{w-1/3 bg-blue-500} lg:{w-¼ bg-yellow-500 hover:bg-yellow-900}”>

I must admit I really see the appeal, in theory, this would be a more visual way to organize your css classes in your markup. It also has support for other ways of writing it like:

<div v-variantwind=“‘xl:{w-¼ bg-yellow-500 hover:bg-yellow-900}’”>

And it has PurgeCSS support!

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