In my opinion, the classes should be :style="" with a math formula using the index. and I don't see a point in making the emails reactive. The emails object should live on the default exported object. I'll hopefully give this a try if I can improve on it. Beautiful video as usual.
Was it really clearer to start with all the repetition and then at the very end refactor to a for-loop over a data array? vs writing the concise loop in the beginning? At a certain point I had to skip forward to see if you eventually tidied it up.
This is the process of how I figured it out myself. If I started with a loop, I wouldn't have figured out that I had to do transitions for each card individually.
@@drehimself Thanks for the explanation, but I definitely found it very frustrating that you started with duplicated HTML. Even when prototyping, it's generally a good idea to drive your views with mock data, so when you actually load it from the server, you don't have to do any additional work. Nice tutorial though!
@@drehimself Also, putting the CSS classes in the data objects doesn't really make sense--it would be better to have the rotation calculated programmatically by the item's index in the data array. You would also get a more consistent effect by using the precise rotation and offset values instead of relying on ordinal classes in Tailwind that are only approximating what you're trying to do.
Sure... If you try the most basic transition in the docs (and like I did in the video) you'll notice that the "enter" transition does not happen. The exit transition works fine. Looking through the GitHub issues, it looks like it's in the process of being fixed.
I really like your tutorials. But this tailwind css so annoying. Tailwind css seems good but when you start to using continuously code trashes in your html file.
It does look messy but for me personally (and a lot of other people), it solves so many issues with normal CSS. If you tried it and don't like it, that's cool, not everyone will feel the same way :)
You can use Tailwind within CSS with @apply so it became less messy and more reusable, plus it has amazing tools like postcss and purgecss. You should look into those.
It does feel like a mess, but I feel like the strength of using it is encapsulating the CSS classes into your reusable Vue.js components so you don't have to use Tailwind all over the place. In practice, it should look more simple, unless you're digging down into the component level. Implementing a fan component should be as easy as , and you don't see any CSS at all. Full disclosure though, I haven't used Tailwind in an actual project, but it seems very elegant when you're creating component libraries.
Really appreciate your interest in making tutorials on small interactions that you come across.
Thanks! I learn a lot myself.
Always a pleasure to watch you working with Vue and Tailwind
Thanks! Always fun to do these types of vids!
In my opinion, the classes should be :style="" with a math formula using the index. and I don't see a point in making the emails reactive. The emails object should live on the default exported object. I'll hopefully give this a try if I can improve on it. Beautiful video as usual.
Agree! Definitely a more dynamic solution. If I hooked this up to a backend, I'd probably do something like that.
Adding this in one of my project.
Awesome!
This was really cool, learned so much from your tutorials.
Wish you made a video on most used vue transitions.
Like animating a modal
A dropdown etc.
Thanks for watching! Will consider some transition videos.
Keep out with the tailwind a Vue js. Such a great combo
This is awesome @Andre Madarang
Thanks for watching!
Hey! Congratulations! Great Video! Please, what's your vscode settings.json?
fantastic! keep making these dope vue + animation ui componants
Thanks for watching!
Dr Dre is back
😎
pretty good Andre
Thank you so much 🙏❤️❤️
Nice presentation too ... ✅✅✅
Was it really clearer to start with all the repetition and then at the very end refactor to a for-loop over a data array? vs writing the concise loop in the beginning? At a certain point I had to skip forward to see if you eventually tidied it up.
This is the process of how I figured it out myself. If I started with a loop, I wouldn't have figured out that I had to do transitions for each card individually.
@@drehimself Thanks for the explanation, but I definitely found it very frustrating that you started with duplicated HTML. Even when prototyping, it's generally a good idea to drive your views with mock data, so when you actually load it from the server, you don't have to do any additional work. Nice tutorial though!
@@drehimself Also, putting the CSS classes in the data objects doesn't really make sense--it would be better to have the rotation calculated programmatically by the item's index in the data array. You would also get a more consistent effect by using the precise rotation and offset values instead of relying on ordinal classes in Tailwind that are only approximating what you're trying to do.
Hello Andre, what addon / styling rules are you using to add those highlighting colors to your Match Brackets inside VSCode?
Perfect 👌👌
Thanks for watching!
Please make videos on how to render Vue or React in the server-side for SEO friendly in Laravel.
Seems like you really taking a liking to Tailwind, would you say tailwind is your default css now?
100 percent, I would be really sad if I had to use normal CSS.
@@drehimself I'm glad because I can safely assume all your next tutorial will use tailwind, I'm liking it too
Amazinggg
Thanks for watching!
Add demo pics in ur github repo! Before video,I always saw ur github acc...
How do I integrate Tailwindcss with Codeigniter ?
It's easy to integrate with mix in laravel. Please reply if possible.
Coolll!!! 😍
Tailwind CSS IntelliSense 0.3.1 not working after update. How have you configured it, please, Mr Andre?
Hmmm, I haven't had any issues at all. It just works for me :)
Can u share ur vs code environment setup
I'm on Vite and Vue 3. Can you detail the bug please?
Sure... If you try the most basic transition in the docs (and like I did in the video) you'll notice that the "enter" transition does not happen. The exit transition works fine. Looking through the GitHub issues, it looks like it's in the process of being fixed.
Wouldn't "transition-group" be better ???
Still waiting for your asmr channel 😂
Hahah, I need to get on that! Channel name: DREsmr
@@drehimself haha good one :)
I really like your tutorials. But this tailwind css so annoying. Tailwind css seems good but when you start to using continuously code trashes in your html file.
It does look messy but for me personally (and a lot of other people), it solves so many issues with normal CSS. If you tried it and don't like it, that's cool, not everyone will feel the same way :)
Andre Madarang hope you will do some styled components tutorials too. :)
@@uenmedia4528 It fixes the eternal programming issue of having to name things. If only classes had different colors.
You can use Tailwind within CSS with @apply so it became less messy and more reusable, plus it has amazing tools like postcss and purgecss. You should look into those.
It does feel like a mess, but I feel like the strength of using it is encapsulating the CSS classes into your reusable Vue.js components so you don't have to use Tailwind all over the place. In practice, it should look more simple, unless you're digging down into the component level. Implementing a fan component should be as easy as , and you don't see any CSS at all. Full disclosure though, I haven't used Tailwind in an actual project, but it seems very elegant when you're creating component libraries.