Tailwind Weekly #97: new icons, visual updates, and possible container queries feature 👀
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, love that new rocket icon!
- A WIP preview of a possible container query implementation for Tailwind CSS, looks incredibly cool!
- Variant "labels", never knew I so needed that until I saw it, so excited for it!
- A preview for some upcoming visual updates to the earliest Tailwind UI components, also by Steve.
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
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.
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
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
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
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.
💼 Featured jobs
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.
👌 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 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 😁.
