Hello folks!

We got a couple of new stuff this week, from bugfixes to new v4 features (with tips!), v4 is slowly but surely making progress.

Also, it's the middle of November, and the Black Friday sales are ramping up! I'll be sending a special Black Friday edition in a few weeks, so stay tuned.

Let's dive in!

🌟 News

Fix for custom text selection colors broken in Chrome 131

If you customized the text selection property on your site, then you need to update to tailwindcss@3.4.15 and set this flag on your tailwind config:

module.exports = {
  future: {
    disableColorOpacityUtilitiesByDefault: true
  }，
}

We may get an official templates marketplace 👀

Adam tweeted this week asking template makers to mention their best templates, and the Tailwind Labs team will pick the best ones and showcase them on the Tailwind site. There will probably be a shared revenue scheme which is standard in the industry. I think this will be great for the community so small template makers will get more visibility 🙂

A couple of v4 tips from Adam

We got 3 new v4 betas this week, and Adam tweeted a few of the new coolest features like:

In v4, you'll be able to specify the color interpolation mode for gradients

In v4, this is all you'll have to do for py-1 to mean 1px instead of 4px, py-7 to mean 7px instead of 28px

CSS now has an official logo 🎨

This is more on the community side, but it was notable enough to mention it!

Believe it or not, CSS has never had an official logo. When CSS3 came out, people just defaulted to using the CSS3 logo, but it was never official. Well the CSS-Next Community Group finally came together and created one!

🤩 Sponsors

Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.

Led by seasoned developers Vivian and Daniela, we excel in converting your PSD, Figma, Adobe XD, and Sketch files into responsive and maintainable Tailwind CSS markup.

Complete our quick 3-minute survey and receive a tailored quote within 24 hours.

📚 Learning

The most effective ways to improve Core Web Vitals

This article is a great resource for improving your site's Core Web Vitals, focusing on Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). It gets straight to the point with practical, easy-to-do tricks that really work.

CSS display contents

Another great piece by Ahmad Shadeed! This is a deep dive into the CSS property display: contents and how it can be a game-changer for creating more fluid layouts. He breaks down practical examples, like rearranging elements without altering the HTML structure, and showcases how it can simplify complex layouts by ungrouping elements within containers.

Installing Google Fonts as npm packages

Amit Merchant dives into a handy solution for installing Google Fonts via npm packages using Fontsource. It tackles the typical issues of traditional font inclusion—avoiding extra HTTP requests, managing multiple fonts conveniently, and addressing privacy concerns—as Fontsource offers a straightforward way to self-host these fonts. Amit explains how easy it is to integrate these fonts into your project with npm commands and import statements, making it a breeze to manage fonts locally, reduce request load times, and even enable offline use for Progressive Web Apps.

💅 Showcase

Querio

Querio is the BI platform that helps developers to query and explore data with AI agents that connect directly to your database, maintaining business context. It supports intuitive querying, dynamic dashboards, and powerful charting—all designed to enhance efficiency and data-driven decision-making.

🎁 Resource

FlyonUI

FlyonUI is an open-source components library built with Tailwind. The library features semantic classes and JavaScript plugins, and its compatible with Vue.js and React. I see this as a Daisy UI competitor, and I really liked their designs.

👌 Cool Stuff

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

"Level up with Tailwind CSS" by Shruti dives into real-world Tailwind examples and offers tips even seasoned users will find valuable. Plus, there's an accompanying video course with fresh content every week. If you're serious about improving your Tailwind CSS skills, this book is for you!

Velvet – Deploy AI confidently with easy analysis, evaluation, and monitoring in just 2 lines of code.

PM2 – Effortlessly keep your Node.js apps running 24/7 with PM2's powerful process manager.

Gleek – Create diagrams using only your keyboard. Generate and visualize ideas effortlessly for free!

Do you want to share something with the Tailwind CSS 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 😁.