Tailwind Weekly #112: we got a handbook launch, a Tailwind animation guide, and more 🤓!
Hello folks!
The Tailwind Labs team has been quiet recently but the community has been picking up! Last time we got a book and video course preorder and now we got a handbook launch! See the news section for more info.
Now onto our usual content 😉.
🌟 News
This week we got a community launch from Surjith! He released the "Tailwind CSS Notion Handbook".
He compiled all his knowledge from years of using Tailwind CSS and put it on a Notion workspace, some of the content includes:
- Tailwind CSS Basics
- 30 Tailwind CSS Tips
- 10 Bonus Tips
- Production Checklist
- UI Kits & Templates
- 20+ Tools & Resources
It's a paid product but very affordable. Right now its priced at $9 if you use the code LAUNCH75.
🤩 Sponsors
What The Diff is the code review assistant for your team and it keeps your manager updated about the changes happening in your code base. Automatically get summaries about the changes in a pull request in plain English, let the AI refactor your code within GitHub without opening a code editor, and receive weekly updates about your project progress. Get 50% off your first month with the code TAILWINDWEEKLY.
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
Different ways to get CSS gradient shadows
This great piece shows you how to do complex gradient shadows with CSS and features both non-transparent and transparent solutions, along with adding a border-radius. The process is complex but can really make your site "pop"!
How to create custom CSS Animations in TailwindCSS
Tailwind CSS comes with built-in animations like spin and pulse but you can also add your own! This article outlines exactly how to do that and uses a loading bar animation as an example.
Debug your CSS with a ??? utility
The author posted this tip on the official Tailwind CSS discord chat and I found it very useful. It's basically the "add a border to everything" trick but with a clever class name. I think it would be a great addition to any starter project.
💅 Showcase
Scale AI
Some people say 2023 will be the year of AI and now we're getting a lot of AI services with beautiful marketing pages. Scale AI is one of them!
I really like the dark theme with the colorful and mouse-controlled animations. It makes it look really futuristic 🧑🏻🚀. And that typography is just beautiful 😍.
For the curious, here's what Scale AI does:
Scale delivers high quality training data for AI applications such as self-driving cars, mapping, AR/VR, robotics, and more.
🎁 Resource
VantaJS
If there's one thing I love about web development, is beautiful animations so when I found VantaJS I was thrilled! It's a library to helps you generate custom background animations and its incredibly flexible. Some of the example animations even look like videos! Overall, a great way to spice up your next project.
👌 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!
Our friend Shruti, the author of Complete Guide to CSS Flex and Grid, is writing another book! This time about Tailwind CSS and it'll also be a video course. You can preorder it right now at a discount here.
Inspect Flow - The complete developer tool for Tailwind CSS. 50% off sale: inspectflow.io
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 😁.
