Tailwind Weekly #45: JIT is the future of TailwindCSS + new official videos!
Hello folks!
Sorry I missed next week, had some personal stuff going on, all resolved now!
Now you’ll get 2 weeks of news and let me tell you, it is packed.
Let’s get to it!
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!
🌟 News
Ok let’s start breaking down these incredibly packed 2 weeks:
- We got a big reveal on Monday about an upcoming new feature that will become the future of TailwindCSS, Just-In-Time generation! The TL;DR is that we won’t have huge bundle sizes on development anymore, Tailwind will only generate exactly the classes that we’re using!
- We got 2 very instructive videos from the Tailwind Labs team, one about how to size images and video with aspect ratio and one about how to style forms with the official forms plugin
- The Tailwind Labs theme got a new member! Go say hello to James McDonald, an incredibly talented designer!
We also got a new Tailwind UI update too! The team:
- Added new Contact Pages to the Marketing package with 4 examples
- Added 1 new CTA Section example to the Marketing package
- Added 2 new Header Section examples to the Marketing package
- Added 2 new Newsletter Section examples to the Marketing package
- Added 2 new Contact Section examples to the Marketing package
🤩 Sponsor
toast.log is a chrome (and firefox!) extension that shows your browser’s console messages like toast notifications. See errors, warnings, and logs as they happen on your site — without having to open the browser’s console. I find it incredibly useful when doing my frontend work! Check it out here.
📚 Learning
Create Responsive Image Effects With CSS Gradients And aspect-ratio
Following the whole I-want-you-to-level-up-your-CSS-skills theme, I bring you another great article, this one shows you how to do incredibly cool effects for your images, which can easily be added to complement your Tailwind project. If you work a lot with images, then this is definitely a great read.
💅 Showcase
Home – Alex Perronnet
Yet another portfolio site, but there’s a catch! You may think this site is a bit simple and minimalistic but the special feature is not the design, it’s the sound effects. That’s right, the awesome Alex added sounds effects and subtle animations to the hover and click states of some of the elements. Kind of like discovering some easter eggs, very cool!
For the curious:
I am Alex Perronnet, a french freelance developer and designer. I am also an open-source contributor and a content creator
🎁 Resource
tailwindcss-scroll-snap
If you don’t know what Scroll Snap is you’re missing a great CSS feature that was only previously possible with JS. It is great for scrolling effects and especially useful for sliders/carousels. This little plugin adds that functionality to your tailwind project, pretty handy.
🗞 Classifieds
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!
At Tailwind Made, we recently launched our latest template, Atlas! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a legal/business and an e-commerce template if you’re interested.
Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then Windy is for you, the tool is still in its early stages but it looks very promising.
Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using this link you’ll get 20% off your subscription applied at checkout.
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 😁.
