Tailwind Weekly #122: we got the Tailwind Connect video and its 😎 🤟🏻
Hello folks!
We finally got the Tailwind Connect video folks and it's a MUST watch if you're interested in the future of Tailwind CSS. Check out the news section for more info!
Now onto our usual content 😉.
🌟 News
Here's the Tailwind Connect keynote and at 1.5 hours, its quite beefy but if you just want the TL;DW then here it is:
- The event was separated into 3 parts: 1) an intro, 2) a demo session with 4 demos, and 3) a "here's what we're working on and will be releasing soon" session.
- For the demos, we got:
1) How to use the accent-[color] feature
2) How to use the upcoming text-balance class
3) Upcoming :has support in the form of has-[] and group-has-[] classes, with examples
4) Upcoming @container queries support, with examples
- After the demos, Adam started talking more about his vision for Tailwind CSS and what they're coming up the pipeline but 2 major things stood out:
- The announcement of Oxide, which will be a unified toolchain for Tailwind CSS, will include support
autoprefixer,postcss-importand other PostCSS plugins out of the box, kind of like Parcel, so you won't have to install those individual packages anymore. - The announcement of Catalyst, which will be a mix of Tailwind UI and ready-made components a la Radix UI, all made in React. The idea is to copy and paste a folder full of premade components that you can customize to fit your needs.
That pretty much covers all the major things but I HIGHLY suggest you watch the whole video, it has incredible production value and we even got Steve at the end showing some cool upcoming designs.
🤩 Sponsors
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.
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
Self-hosting fonts explained (including Google fonts) // @font-face tutorial
This is one of the best tutorials I have seen about using your own font files (or self-hosting as it is called now). It details all the steps, from getting the font files to converting them to web-friendly formats to creating the @font-face declarations. Overall, a great video to have in your library for future reference!
You probably want position: sticky instead of fixed
Here's yet another video from Kevin Powell 🙈 but this one is just as good! If you have been coding long enough you know that position: fixed was the standard way to make elements "sticky" on the screen, until position: sticky came along and changed things a bit.
The thing is, you can still use position: fixed but position: sticky offers a few advantages and this video is all about those and some scenarios where position: sticky is definitely the way to go!
CSS color-mix()
This is THE tutorial about the new way of mixing colors in CSS using the color-mix() function. No more messing with SCSS or trying to do magic with HSL and variables. You just call the function, give it a few colors and it'll all the work for you. The best thing is, it has very good browser support!
💅 Showcase
Trigger.dev
Here's another stunning development tool landing page for you! Trigger.dev has a dark style with lots of beautiful shadows and lighter gradients. It also has a very nice combination of fonts (Poppins & Inter to be exact) but if you ask me, the light of the party is the "screenshot" animations! They look very well-made and catch the eyes' attention for sure.
🎁 Resource
Tailwind Size Conversion Raycast Extension
I'm a HUGE fan of Raycast and use it a lot on my daily work so when I saw this new extension popup I had to try it out. It basically converts pixel values to approximate Tailwind CSS values, using Tailwind's scale 4. It also goes the other way around, converting Taiwind values to pixels. Definitely helpful if you're not yet familiar with Tailwind's number scale.
👌 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.
OpenDyslexic is a new open-source font created to increase readability for readers with dyslexia. The typeface includes regular, bold, italic, and bold-italic styles. It is being updated continually and improved based on input from other dyslexic users.
Polypane is an excellent tool for testing your project’s responsive design and accessibility. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.
I highly recommend LambdaTest as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.
✌️ 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!
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 😁.
