Tailwind Weekly #95: Heroicons v2.0 is here 🥳 🚀!

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!

Heroicons v2.0 is out folks 🎉 . This launch has been long in the making and it's finally here! Check out the news section for more info.

We also decided to add a jobs section and feature job ads from the official Tailwind CSS job board, if you want to add yours then check out the section for more info.

🌟 News

Beautiful 😍

Say hello to the new Heroicons!

We got a completely new design, a new 24px solid set, and 260 icons redrawn from scratch, with the outline version using a thinner 1.5px stroke.

The icons are also available as React and Vue libraries and official Figma components so we got the whole deal 😎.

🤩 Sponsors

The sponsor of this issue is the DevTools for Tailwind CSS browser extension. The DevTools for Tailwind bring back designing and debugging in your browser. Intellisense autocompletion, full JIT engine support in minified production sites, and more. 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

Everything Developers Must Know About Figma

This primer is not your average "here's how to use Figma" post, this is actually a great guide for its most common and advanced features and how they're useful for developers. A great read if you work translating Figma designs to code.

How to make your multilingual website suitable for RTL with only HTML and CSS

This one is short, sweet, and straight to the point. It has 3 tips for you if you're working on adding RTL support to your website. The 3rd tip "Give unicode ranges to fonts" was one I haven't heard of before and was quite interesting.

How to change the Tailwind CSS base font size

Written by me! I recently worked on a project migrating an old codebase from Bootstrap to Tailwind CSS and the original developer did the whole html { font-size: 10px; } so had to find a way around that for Tailwind and this post explains how I did it. I hope you find it useful!

💅 Showcase

Bump

Bump's design is simple and clean with beautiful blue hues, cute icons, and styled screenshots. The copy is king here and I particularly liked the testimonial section's design.

For the curious, here's Bump's description:

Create a powerful human-centered workflow for your APIs. Bump documents, diffs, and validates your API changes continuously. It lets you focus on what's important: building your product.

🎁 Resource

a17t

a17t is a Tailwind CSS plugin that provides pre-built components like field, button, and card in for your project. I would say the design is very minimalistic and I find it curious how they class prefixes like ~ and @. Overall a great resource if you like the design and you're looking to code fast with pre-built components.

💼 Featured jobs

Laravel Developer - Full-time - Remote / USA - Mindsize

Lead Tailwind Developer - Full-time - Remote / USA - CMS Max

Senior Frontend Engineer - Full-time - Remote / Everywhere - Lugg

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

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.

Get smarter every day. Every day Refind picks 7 links from around the web for you, tailored to your interests. Loved by 50k+ curious minds. Subscribe for free today.

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