Vivian Guillen's Blog

Tailwind Weekly #97: new icons, visual updates, and possible container queries feature 👀

Vivian Guillen's photo
Vivian Guillen
·

5 min read

This was originally posted on Tailwind Weekly, if you want to subscribe to receive this directly into your inbox you can sign up here.

Hello folks!

This week was packed with sneak peeks of future features, new icons, and visual updates, do check out the News sections to learn more!

Now onto our usual content 😉.

🌟 News

The Tailwind Labs team sure was busy tweeting this week! In just a few days we got:

From the community side, we got a tweet from Sam, showing a feature I didn't even know existed! If you use the hoverOnlyWhenSupported flag on the future config property, now all your hover classes will only apply to devices that support hover, so no more weird styles on mobile when you tap elements!

🤩 Sponsors

Alt text The sponsor of this issue is Windy – the browser extension that transforms any HTML element into a Tailwind CSS component with a single click. Save hours or days when you convert your non-Tailwind sites to Tailwind or go to any website and see how you can build any element with Tailwind CSS. Get a 20% discount if you use the code TAILWIND-WEEKLY during the checkout.

Alt text Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and it's 👌. Get a 20% discount if you use the code TAILWINDWEEKLY20 during checkout.

📚 Learning

new-css-style-queries.png

Understanding and using the new CSS style queries

You probably heard all about container queries lately, but did you know there's also a style query API that is coming soon? This article explains all about it, how to use it, and useful use cases for when it's more available. Definitely a great read to be informed of what's coming!

When Do You Use CSS Columns?

Flexbox and CSS Grid have become the default when we want to work with multi-column layouts but there's also the old fashioned columns CSS property. This CSS Tricks piece mentions a few use cases of when you would like to use columns instead of the traditional flexbox approaches.

How to use box shadows with Tailwind CSS, including custom and arbitrary values

Written by me! I had to use a one-off shadow for a client project and realized there were some quirks for doing it as an arbitrary value, so decided to write a whole post about it, I hope you find it useful!

💅 Showcase

meta-2.png

Collect Content

Here's another SaaS landing page for you, this one is all about minimalistic layouts, hand-written-looking effects and shapes, and lots of screenshots! Also, that header font is just so 😍.

For the curious, here's Collect Content's description:

Stop worrying about collecting content from your clients. "Get the content you need to finish your website builds and launch on time.

🎁 Resource

800o59dutnanbfb7udjopuwb33la.png

Heroicons Raycast extension

If you're on Mac then you're gonna love this. Raycast is a more powerful version of Spotlight and it has a plugin system where you can add functionality to it.

This week's resource is a plugin (or extension as it's officially called) for searching and copy-pasting icons from Heroicons straight from Raycast! Pretty handy if you work with Heroicons a lot and want a more streamline way of getting them.

Center Pixel, Inc is hiring a full-time or contract Frontend Web Engineer Remote / Palo Alto, CA · $140,000 - $180,000

Chicago Botanic Garden is hiring a full-time Principal Web Application Developer Hybrid / Chicago Botanic Garden

CMS Max is hiring a full-time Lead Tailwind Developer Remote / USA

Simple Focus is hiring a full-time Front-End Developer Remote / USA

Infinia ML is hiring a full-time Senior Front-End Engineer Durham, NC

⭐ Want to add your job post here? See more info.

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!

Become a Pro at building components & layouts with CSS Flexbox and Grid with the Complete Guide to CSS Flex and Grid ebook by Shruti Balasa. I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

Manage all your projects and tasks in the most organized and efficient way possible. Use the Notion Project Management Template to stay focused and implement a robust structure for your business or personal projects.

Inspect Flow - The complete developer tool for Tailwind CSS. 50% off sale: inspectflow.io

There's a reason over 2.6 million people start their day with Morning Brew — the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

✌️ Partners

CSS Simplified by Shruti Balasa: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

TypeScript Weekly: the best TypeScript links every week, right in your inbox.

ES.next News: learn about the latest in JavaScript and cross-platform tools

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

coffe