Extending TailwindCSS: Adding Modern 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): • Using Modern CSS To Ma...
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: fe.fyi/pro
📺 If you want to see more videos like these, check out my website: fe.fyi/videos
✉️ Subscribe to my newsletter: fe.fyi/newsletter
MY SOCIALS
🌍 My website - www.frontend.fyi
🐦 Twitter - / jeroenreumkens
📸 Instagram - / jeroenreumkens
💼 Linkedin - / 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

[@reeteshvirous1359]

all of a sudden 🥳 we started to learning css as we should.

[@baxtables]

Hi boss, I admire your work and your calmness ..is there a video of you explaining how tailwind css works internally?
If not, I kindly request you to make one, whenever possible. Thank you

[@frontendfyi]

Thanks for your kind words! There’s no video by me explaining that topic unfortunately. I’ll think about it whether I can make such a video 🙏

[@vasyaqwe2087]

this is really cool. thank you!

[@Caldaron]

thanks for the lesson, not sure if I actually replace my js solution for it, but it's great to know. channel subscribed ;-)

[@frontendfyi]

I get what you’re saying!
Still this approach is somehow growing on me. Once the classes are in tailwind and you know how this works, it’s super easy to setup. So let’s see what I think in a few months from now.
Thanks for subscribing, appreciate it!

[@mihao-runs]

well explained. ty👏

[@frontendfyi]

Glad you enjoyed it! Thanks for commenting!

[@LawJolla]

I'm a Tailwind wonk since before the RefactoringUI days. This is the first tutorial that made me think "ok, stop, we have actually found too much tailwind"

[@frontendfyi]

I’m not sure if I completely get what you mean. You’re saying this pseudo language that tailwind is might be going slightly too far now?

[@LawJolla]

I know the point was to show the plugin API. Loved it!
But it's the first time I thought styling was unreadable in Tailwind as opposed to CSS. I think it's the amount of stateful styling.
But I'll probably sign up for your pro this week. Thanks for your hard work!

[@frontendfyi]

@LawJolla thanks so much, appreciate it!
And yeah sometimes tailwind definitely becomes unreadable because of the amount of classes you need. Although I also dislike to then switch back to vanilla css because all of sudden my styles are then split over 2 locations.
Again thanks for your kind words!

[@LawJolla]

@@frontendfyi I completely get that concern and have faced it countless times too. Maybe my comment is better said “this is the first time I thought I would have split styles in this case”

[@adilsarfraz02]

🙌

[@frontendfyi]

🙌

[@webdeveloper4742]

i'll pay anyone if they can install tailwind on my macbook. i can't for the life of me install it or can you do an install vid?

[@frontendfyi]

Happy to help you in a mentorship intro call. We can solve that in that session! www.frontend.fyi/mentorships

[@alexpanteli3651]

Looks like an overkill. Is it not easier to just create a custom CSS for such a use case?

[@frontendfyi]

It’s a delicate balance indeed. In last weeks video I made the same thing with vanilla css. You can definitely use this approach in tailwind too.
But even though it’s quite few classnames, we’re also adding quite some logic now, which used to require adding JS too. So thinking of that it might not be too bad right?