Tailwind Weekly #118: Tailwind got its first in-person event 🥳!
Hello folks!
We got the news of the season people: Tailwind CSS is doing a live in-person event 😃! Check out the news section for more details.
Also, CodeSandbox added full integration support for Tailwind CSS. So you can expect classname autocomplete, linting, color highlighting, and hover previews, a la VS Code.
Now onto our usual content 😉.
🌟 News
The Tailwind Labs team got to work and now we're getting our first in-person event!
Here are the main details:
- 📅 June 20, 2023 @ 6PM
- 📍 Tapestry Hall in Cambridge, ON, Canada
- 🎟️ Registration opens May 17th
The best part is that it's very affordable at just $50 per person but it's capped at 150 people so be sure to order yours as soon as the registration opens!
Also, I just have to point out that the event page is beautiful! I know Tailwind UI already has an event template but they should create another one with this design, it looks superb!
🤩 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.
Tailscan is ultimate the browser dev tool for Tailwind CSS. Build, design, and debug your Tailwind website visually with Tailscan, right within the browser. With auto-completion, config support, class validation, and visual guidelines, you'll instantly level up your development experience! Get $10 off during checkout!
📚 Learning
The simple trick to transition from height 0 to auto with CSS
If you have ever coded an accordion element then you probably know how quirky it is to animate the open and close states. One would have to do all sorts of tricks with fixed height or even max-height values.
Well, you can say bye to all of that because this little short video shows you that not only its possible to finally animate the auto property value but it's as easy as just adding two extra properties to your elements. Watch the video to find out which but here's a spoiler, it uses CSS Grid 🎨!
Don’t use custom CSS scrollbars
I always thought that animating scrollbars was a bad idea. I find it very finicky, the cross-browser support is not that good, and it's kind of unexpected for the user so it can throw them off. Well, this piece explains, in detail, why it's such a bad idea and why you should stick to the defaults.
CSS border animations
Animating borders with CSS has always been a bit tricky. You would have to mess around with :before and :after to get anything worthwhile. But now thanks to better browser support you can make pretty cool border animations by using background properties. I won't spoil the fun but I do want to say that the example animation in the article is very very cool.
💅 Showcase
Total TypeScript
It's not every day that you find a course website that looks anything but! This one makes you feel like you jumped into a magical world, full of colors, old-style serif fonts, and magical-looking shapes. If you're into learning Typescript then you'll be doubly pleased.
🎁 Resource
Tailwind Variants
I discovered this little utility last week and it blew my mind 🤯. Imagine being able to create reusable components with any prop you want like size or color and not have to deal with inline styles. That's what Tailwind Variants promises!
The docs introduction is full of examples that will showcase its power better than I can explain it in these brief paragraphs but I think this can be a game changer for building reusable components with Tailwind CSS.
👌 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.
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.
Inspect Flow - The complete developer tool for Tailwind CSS. 50% off sale: inspectflow.io
Lexington Themes – Premium themes and UI kits crafted with Astro.js and Tailwind CSS.
✌️ 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 😁.
