Tailwind Weekly #168: Radiant Debuts, Tailwind CSS v4.0 Updates, and Adam's Laracon Highlights 🤩

Hello folks!

The Tailwind UI team has been busy! We got a new stunning Tailwind UI template and more updates for v4, and we even got a potential release date 😄

Also you cannot miss Adam's Laracon talk where he gave a mind blowing presentation about making "responsive" props with just CSS.

Now, let's dive in!

🌟 News

New Tailwind UI template

Say hello to Radiant (preview).

"Radiant is a beautiful multi-page SaaS business template built with Tailwind CSS and Next.js, designed and built by the Tailwind CSS team.

It's designed to be easy to adapt for your own project by dropping in your own app screenshots and content. Even the animated bento cards on the home page are built to be customized.

The blog is powered by Sanity, so even the non-developers on your team can publish new articles.

Like all of our templates, it's a free update if you've got a Tailwind UI All-Access license"

There's even an official blog post that goes deep into the technical side of creating it, I highly recommend you read it, even if its for mere curiosity.

I must say, after having seen all the teasers on Twitter, the design looks stunning, and those bento box sections are 👌🏻.

An update on Tailwind CSS v4.0

Adam sent a big email update on Friday and one of the topics was v4. He gave a summary of the progress so far:

• The main focus has been backward compatibility
• 23 new alpha releases have been rolled out since March
• JavaScript configuration files and plugins are finally supported, including complex ones like @tailwindcss/typography.

He also said that the team aims for a beta release in early November, with hopes to finalize the stable version of v4.0 by the end of the year 🤞🏻.

Adam's Laracon Talk

Adam gave a talk at Laracon US a couple of weeks ago and I watched it live, I cannot tell you the amount of "wow" moments I had with the learnings he shared, especially the final tip! I have been coding CSS for 10 years now, and THAT tip was worth the price of the conference! I won't spoil you, you have to watch it 🤭.

🤩 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

Finally Understanding The Usefulness Of CSS Subgrid: In Just 10 Minutes

Ever heard of CSS Subgrid? This video dives into this overlooked feature, showing how it can solve annoying alignment issues in your layout, like misaligned pricing tables when text changes. It’s a quick, eye-opening guide that makes CSS Grid setups way more robust.

The Undeniable Utility Of CSS :has

Josh Comeau explores the incredible potential of the CSS :has pseudo-class, which allows styling a parent element based on its child’s state. He covers real-world use cases like creating interactive UI elements and even a JavaScript-free Dark Mode toggle.

Creating Perfect Font Fallbacks in CSS

The author discusses the importance of using font-display: swap to prevent invisible text while web fonts load, but points out the potential issue of layout shifts when fallback fonts are not compatible. He introduces CSS properties like size-adjust, ascent-override, and descent-override to finesse font metrics and minimize these shifts.

💅 Showcase

hi.new

Who knew email security could look this good 😍? Hi.new’s sleek dark theme with vibrant green accents creates a stunning, modern vibe. It's all straight lines and green accents, and with clean typography, it makes email protection both stylish and user-friendly.

🎁 Resource

Loadership

LoaderShip offers a huge variety of CSS-only loaders, from spinners to progress bars, and the best part is, there's no need for any dependencies or installations. It’s super easy to use – just pick your favorite style, tweak the settings to match your brand, and copy-paste the generated CSS code straight into your project. Plus, you get real-time previews as you configure, so you can see exactly what you're working with.

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

DeskPad – Create a virtual monitor for seamless screen sharing and easy workspace management.

Icons for AI – Free 16x16 SVG icons tailored for AI projects, perfect for enhancing your UI designs.

Overleaf – Write like a pro with Overleaf, the collaborative, online LaTeX editor for technical documents.

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