Modernizing TailwindCSS: Adding Three Missing CSS Features

In last week's video we used three modern CSS features that are huge time savers. However, TailwindCSS doesn't support these properties out of the box yet. In today's video we will take a look at how we can extend Tailwind in such a way that we can use them today! We will take last week's video as a starting point and start converting everything over to TailwindCSS. The CSS features we will be taking a look at are @ starting-style, transition-behavior: allow-discrete, and popover. LINKS: Last weeks video (I explain all these properties): https://youtu.be/Iygwzh33Q1E MORE? 📈 If you want more content like this, become a Frontend FYI PRO and get access to my current and all future courses for a one-time purchase: https://fe.fyi/pro 📺 If you want to see more videos like these, check out my website: https://fe.fyi/videos ✉️ Subscribe to my newsletter: https://fe.fyi/newsletter MY SOCIALS 🌍 My website – https://www.frontend.fyi 🐦 Twitter – https://www.twitter.com/JeroenReumkens 📸 Instagram – https://www.instagram.com/jeroenreumkens 💼 Linkedin – https://www.linkedin.com/in/jeroenreumkens COLLAB Want to work together on creating content? Feel free to reach out via jeroen [at] frontend.fyi WHO AM I? If you're new to this channel — Hey, my name is Jeroen. A frontend engineer with almost 15 years of professional experience, who in 2023 decided to stop teaching only his close collegeas to start teaching the whole world. What I teach some call Design Engineering, I like to call it the Craft of Frontend. TIMESTAMPS: 00:00 – Intro 01:05 – Quick code recap 02:00 – Using :popover-open 04:31 – Styling the backdrop 05:15 – Adding transition plus allow-discrete 07:30 – Adding @ starting-style and fade-in animation 10:58 – Animating the child components 13:48 – End result & Outro #tailwindcss #css #webdevelopment #frontend