Tailwind Weekly #97: new icons, visual updates, and possible container queries feature 👀
Tags: html, css, tailwindcss
Published: 2022-09-20 14:48:43

*This was originally posted on [Tailwind Weekly](https://tailwindweekly.com/issue-97/), if you want to subscribe to receive this directly into your inbox you can sign up [here](https://tailwindweekly.com/).*

---

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:

* [A new batch of heroicons, from Steve Schoger](https://twitter.com/steveschoger/status/1569688757804335107?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website), love that new rocket icon!
* A [WIP preview](https://twitter.com/adamwathan/status/1570840782659260416?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website) of a possible container query implementation for Tailwind CSS, looks incredibly cool!
* [Variant "labels"](https://twitter.com/adamwathan/status/1570869415444611072?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website), never knew I so needed that until I saw it, so excited for it!
* A preview for some [upcoming visual updates](https://twitter.com/steveschoger/status/1570872908788146176?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website) to the earliest Tailwind UI components, also by Steve.

From the community side, we got a tweet from Sam, [showing a feature](https://twitter.com/samselikoff/status/1570089403468464129?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website) 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](https://tailwindweekly.com/content/images/size/w1000/2022/09/windy.png)](https://usewindy.com/?utm_source=Tailwind+Weekly+Website&utm_medium=email&utm_campaign=Tailwind+Weekly+Web+Issue)
The sponsor of this issue is [Windy](https://usewindy.com/?utm_source=Tailwind+Weekly+Website&utm_medium=email&utm_campaign=Tailwind+Weekly+Web+Issue) – 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](https://tailwindweekly.com/content/images/size/w1000/2021/11/polypane-1.png)](https://polypane.app/tailwindcss/?status=accepted&expires=1665666677&p_sid=39438&p_aid=124142&p_link=3113&p_tok=e0439855-4b53-4e33-acc9-7fb9976ef55c)
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

[![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz4fvko7pkc941yk2lyk.png)](https://blog.logrocket.com/new-css-style-queries/?utm_source=CSS-Weekly&utm_campaign=Issue-518&utm_medium=email#utm_source%3DCSS-Weekly%26utm_campaign%3DIssue-518%26utm_medium%3Demail)
### [Understanding and using the new CSS style queries](https://blog.logrocket.com/new-css-style-queries/?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)
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?](https://css-tricks.com/when-do-you-use-css-columns/?utm_campaign=tailwind-weekly-&utm_source=Tailwind+Weekly?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)
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](https://redpixelthemes.com/blog/tailwindcss-box-shadows-how-to/?utm_campaign=tailwind-weekly-097&utm_source=Tailwind+Weekly?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)
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

[![Image2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qp6odm4czty8j7sr1gh.png)](https://www.collectcontent.io/?utm_campaign=tailwind-weekly-&utm_source=Tailwind%20Weekly%3Futm_campaign%3DTailwind%20Weekly%20Web%20Issue&utm_source=Tailwind%20Weekly%20Website)
### [Collect Content](https://www.collectcontent.io/?utm_campaign=tailwind-weekly-&utm_source=Tailwind%20Weekly%3Futm_campaign%3DTailwind%20Weekly%20Web%20Issue&utm_source=Tailwind%20Weekly%20Website)
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


[![Image3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r5rv062txlbb95mtzl4.png)](https://www.raycast.com/haack/heroicons?utm_campaign=tailwind-weekly-097&utm_source=Tailwind+Weekly?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)
### [Heroicons Raycast extension](https://www.raycast.com/haack/heroicons?utm_campaign=tailwind-weekly-097&utm_source=Tailwind+Weekly?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)
If you're on Mac then you're gonna love this. [Raycast](https://www.raycast.com/?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website) 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.

### 💼 Featured jobs
**Center Pixel, Inc** is hiring a full-time or contract [Frontend Web Engineer](https://jobs.ashbyhq.com/center/b287f1b5-b9d9-4a86-bc3f-8fb8f6048f11?ref=tailwind-jobs?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website) 
Remote / Palo Alto, CA · $140,000 - $180,000

**Chicago Botanic Garden** is hiring a full-time [Principal Web Application Developer](https://workforcenow.adp.com/mascsr/default/mdf/recruitment/recruitment.html?cid=21ef98a3-d325-4110-a85a-7729320b6f80&ccId=19000101_000001&lang=en_US&ref=tailwind-jobs?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)
Hybrid / Chicago Botanic Garden

**CMS Max** is hiring a full-time [Lead Tailwind Developer](https://www.cmsmax.com/careers/lead-tailwind-developer?ref=tailwind-jobs?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)
Remote / USA

**Simple Focus** is hiring a full-time [Front-End Developer](https://simplefocus.com/careers/front-end-developer?ref=tailwind-jobs?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)
Remote / USA

**Infinia ML** is hiring a full-time [Senior Front-End Engineer](https://infiniaml.bamboohr.com/jobs/view.php?id=78&source=aWQ9MTQ%3D&ref=tailwind-jobs?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)
Durham, NC

⭐ Want to add your job post here? See [more info](https://tailwindweekly.com/advertise/#promoted-job-posting).

## 👌 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!*

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://shrutibalasa.gumroad.com/l/css-flex-and-grid?utm_campaign=Tailwind%20Weekly%20Web%20Issue&utm_source=Tailwind%20Weekly%20Website)** ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website). 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](https://notioneverything.gumroad.com/l/project-management-template?utm_campaign=Tailwind%20Weekly%20Web%20Issue&utm_source=Tailwind%20Weekly%20Website) 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](https://www.inspectflow.io/??utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)

**There's a reason over 2.6 million people start their day with [Morning Brew](https://www.morningbrew.com/daily/subscribe?utm_source=tailwind-weekly&utm_medium=paid_newsletter&utm_campaign=swapstack_tailwind-weekly&utm_campaign=Tailwind%20Weekly%20Web%20Issue&utm_source=Tailwind%20Weekly%20Website)** — 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](https://www.getrevue.co/profile/shrutibalasa?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

[TypeScript Weekly](https://typescript-weekly.com/?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website): the best TypeScript links every week, right in your inbox.

[ES.next News](http://esnextnews.com/?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR_hLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform) or message me on Twitter [@vivgui](https://twitter.com/vivgui?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

[![coffe](https://tailwindweekly.com/content/images/size/w1000/2021/11/coffee.png)](https://www.buymeacoffee.com/vivgui?utm_campaign=Tailwind+Weekly+Web+Issue&utm_source=Tailwind+Weekly+Website)