Tailwind Weekly #63: learn more about CSS custom properties and find great free illustrations for your next project!

Hello folks!

It's been a bit quiet on Tailwind land this week, nothing official to report yet but just wanted to remind you that V3.0 alpha 1 is out and you should go play it and report bugs! I think they'll be launching it as a finished product by end of next month, fingers crossed 🤞.

Also, see anything different? I moved the newsletter to Ghost! I was thinking about it for a while now and decided to migrate over the last week, we only have a few old posts up but we'll be migrating all older issues over the coming weeks. I'm pretty excited about it, Ghost is so easy to use!

Now that we're on a new platform we'll be experimenting a bit with layouts in future issues, stay tuned!

🌟 News

It was kind of a slow week but we still got some tidbits for you!

• Jonathan Reinink shared a great tip on how to add print styles to your site, pretty handy!
• I talked about Wicked Blocks a while back and found it pretty cool, now they just released a V2 which includes new component designs and Alpine.js support for some components, definitely check it out!

🤩 Sponsor

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.

📚 Learning

Getting started with CSS Custom Properties

I know I have talked a lot about CSS Custom Properties before and shared articles about it but it's just such a powerful feature that I can't help but emphasize it again and again. So this week's learning piece is another great primer on it, this time from the great Piccalilli, definitely a great read!

💅 Showcase

Cyral - Data Security and Governance

Cyral's marketing website is clean, sober, and kind of "enterprise" looking, all while also being friendly and very readable. I think they nailed it with their use of small "interaction" animations, especially the ones that activate when you scroll to a particular section, very nice looking!

🎁 Resource

tailwindcss-aria-attributes

I discovered this plugin just this week and it's pretty new but the concept is powerful! It basically a plugin that provides variants for various aria-* attributes and their supported values.

Imagine doing stuff like:

<button class="aria-disabled:cursor-not-allowed" aria-disabled="true">Submit</button>

Powerful stuff 🤯!

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

Want to learn how to improve your debugging CSS skills and reduce the time you spend on CSS bugs? Then you really need to read Debugging CSS! You can use coupon code tailwindweekly for a 15% discount ✌.

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our official blog post about the move. Our templates stay the same. We have portfolio, business, blog, and e-commerce templates if you’re interested.

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

Want to support the newsletter? You can buy me a coffee with the link below 😁.