Tailwind Weekly #108: these new Tailwind UI hero sections are 🔥👌

Hello folks!

Happy new year! We took a few extra weeks off to really reset and now we're back and ready to roll baby 😎.

And let me tell you, the Tailwind Labs team and the community were on fire this month 🔥🔥🔥, lots of cool stuff on the News section.

There are also lots of people adding Tailwind tips on Twitter these days, I'm showcasing one I really liked on the learnings section but I'm thinking of adding a new section this year dedicated to tips, what do y'all think? Replay with a 👍 if you like the idea!

Now, onto our usual content 😉.

🌟 News

Here are a few interesting things that happened since our last issue:

• We got new hero sections for Tailwind UI
• The popular Fireship youtube channel did a video on Tailwind and it was all praises and compliments 🥰
• Tailwind Play got word wrap support
• Adam made a demo of using CSS variables to do "automatic dark mode" in Tailwind without using the `dark:` modifier. Very insightful. Here's the link!

🤩 Sponsors

What The Diff is the code review assistant for your team and it keeps your manager updated about the changes happening in your code base. Automatically get summaries about the changes in a pull request in plain English, let the AI refactor your code within GitHub without opening a code editor, and receive weekly updates about your project progress. Get 50% off your first month with the code TAILWINDWEEKLY.

We convert your design to Tailwind CSS. Focus on your business logic. Leave the markup code in our capable hands. Just fill out our 3-minute questionnaire and get a quote in 24 hours.

📚 Learning

I found this tip on Twitter a few weeks ago and just had to share it! Using overlapping elements for a gradient border effect is genius 👌. I'm definitely stealing this for my next client project.

Advanced web font optimization techniques

There are hundreds of articles discussing the basics of web font optimizations and you probably know the drill: use font-display: swap, self-host if possible, etc etc.

But what when you want to squeeze every single drop of performance out of your fonts? Then you'll love this article. I particularly liked the "Custom fonts subsetting" and "Vertical baseline fixes" sections and I'm planning on implementing a few of their tips on my client projects. Overall, a great piece!

The New CSS Media Query Range Syntax

There's a big upcoming update for media queries and we'll be getting a new range syntax, this is definitely an upcoming feature you don't want to miss! No more adding a +1 to your media queries, now you'll have comparison operators support, so this:

@media (min-width: 600px){ .element{ } }

Will now be:

@media (width >= 600px){ .element{ } }

Subtle but powerful!

💅 Showcase

Convertkit

The popular email marketing service, Convertkit, recently redid its marketing homepage completely in Tailwind CSS, and let me tell you, it looks amazing. It's pretty shapes, smooth animations, beautiful colors all around.

Being in the marketing space means you need a top-notch design and Convertkit has that and more. Now with them embracing Tailwind CSS, I'm eagerly waiting for them to redo their landing page templates with it too!

🎁 Resource

tints.dev

tints.dev is not just another color tool, it's a palette generator + API specifically made for Tailwind CSS. With it, you can generate a full Tailwind-compatible color palette and you have full control over the color generation, like changing hue, saturation, and lightness mix/max, it's all there for you to play with, for free 😁.  

👌 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. ‌

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

Elegant Dashboard Kit by Elegant Goodies is now available! The Elegant Dashboard Kit is based on actual practice and has a sleek design and a well-coded template. You will build your dashboard interface 10x faster with this template.

Ariyh is a newsletter about marketing tactics based on science. Every week you get 3-min marketing recommendations based on the latest scientific research from top business schools. Subscribe for $0 here.

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

This Week In React: the best of React & React-Native news. Sebastien filters the noise, and you save time!

Daily Dev Links is a carefully curated newsletter for developers, designers, and makers that helps you discover the latest industry trends, news & resources in the software industry.

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