When I started tailwind in 2019 it was totally new, no community and was hard to integrate, but now it has improved so much and in all of my projects I am using tailwindcss.
Tailwind is sooo freaking awesome my stomach hurts just thinking about it. Why did we ever write raw css. Thank you Adam and the team and thank you sir for the great videos on how to leverage this great tool.
u make these animation as simple as it look tough .like when i see it look dificult to other web how people create this but i have learned it from u great .😍😍
These videos always give me lots of great ideas for potential designs I could use and shows just of how much Tailwind is capable. Thanks a lot for that!
Since we're animating `transform` properties, performance is pretty good on these! It would be a different story if we were animating thing like height, width and other properties that trigger an expensive layout "repaint".
Good question. I tried this animations and the performance in the web page have gone down soooo bad. Even the model web page has some performance issues
Does it work on Firefox? Last time I checked they still don't support the blur effect which is kind of a deal breaker, even with a fallback mechanism. I know you can enable support by changing a flag but you can't expect your visitors to do the same.
I need help on how to have a backup solution if a user is visiting the website on Firefox and any other browser that does not support filter blue or backdrop blur? On Firefox, you'll just get 3 solid objects on the ground.
I'm following along with this and it seems that nothing I add to the animation part of the config file is showing up. I've copy pasted the config exactly and animate-blob has no effect while animate-bounce does.
If you want a CSS-only solution, you can make a checkbox and you translate-x-full the menu. And then combine selector when checkbox:checked .menu to translate-x-0
There isn't a ready-made hamburger style menu in tailwind itself, because that would be a 'component' and tailwind deals with 'utilities'. But that means you can easily make one in your own style using the tailwindcss utilities and some custom css (like the checkbox hack) or javascript (many tutorials on w3schools for that). Or you can go for a fully accessible solution using HeadlessUI - Also from the makers of Tailwind. It uses javascript, and is available for frameworks like React and Vue.
I was playing with this and got it basically working, but my existing layout that I want to appear on top of the blobs have the blobs showing through them, what am I missing? I tried specifying the z-indexes but that didn't make any difference, they seem to blend with my content. What did I miss?
If i want to blur an element when it's hovered, can i use the duration class with blur to create a transition effect ? Or is there any other way to do this ?
I just love tailwindcss
Everytime I see any video of Tailwind, I just smile, thanks to everyone who works to make this happen.
Reading this makes me happy! ✨
I do the same, but then I get sad because I'm short on time and always postpone learning it.
These videos are a gem. Thank you to the Tailwind team for doing this work and sharing it for free.
Just applied this to my hero intro section, nicely done :D
We need more high level tutorials like this. Keep up the good work 🚀
When I started tailwind in 2019 it was totally new, no community and was hard to integrate, but now it has improved so much and in all of my projects I am using tailwindcss.
Tailwind is a masterpiece and this videos are amazing.
I love these videos, they make my day everytime.
That's amazing to hear! 🙏
these tutorials make tailwindcss even more accessible muchas gracias :)
Not only I understood tailwind more, I also learned more css. Thank U
This tutorial solidifed my love for Tailwindcss more
Thank you sir
I love tailwind and your explain and design sir please more video make for ux ui related like this in next ja and tailwind
I love Tailwind CSS. And this channel is a masterpiece.
Love this content that's a bit more than just "here's how to use the new features of tailwind", really really cool and helpful
That's nice to hear, and encouraging to come up with more ideas like this!
Tailwind is sooo freaking awesome my stomach hurts just thinking about it. Why did we ever write raw css. Thank you Adam and the team and thank you sir for the great videos on how to leverage this great tool.
Amazing effect. I saw and immediately put it on my bucket list.
I love the "really blurry blur" 🤣
u make these animation as simple as it look tough .like when i see it look dificult to other web how people create this but i have learned it from u great .😍😍
Masterpiece, I just love tailwind, this was what I was trying to achieve.
Absolutely delighted with the capability and flexibility. Haven't played with @layer at all, this was a great introduction to its usefulness. Thanks!
I'm so glad you exist and do what you do!
This guy makes me happy.
Really enjoy the power of tailwindcss. A big thanks.
Just awesome and as always a very nice tutorial from you
These videos always give me lots of great ideas for potential designs I could use and shows just of how much Tailwind is capable. Thanks a lot for that!
I absolutely love these videos. Please, carry on
This is amazing! Thank you!
Ohh so beautiful corgi!
finally found one with tailwind!
Thank you for sharing your knowledge through this video great work 👌👌🔥
Epic Demo, tailwind rules, keep um coming
TailwindCss is really impressive
This video made my day, thank you Simon!
My pleasure 🎉
Thanks for your efforts and great production value on these. Super helpful.
Tailwind is just superb
Really cool!
Bro you are a genius!
So amazing. Thank you very much!
Thank you very much for this tutorial!
thanks for another super-simon video. it would be awesome if the snippets/source-code was made available. is it anyway?
Please which editor do you use, the extensions, theme and how do you preview your page? The curiosity is killing me lol. Thanks
Reply after 3 yrs, just in case you are still alive: It's almost like TailwindCSS Playground. Google it and probably first result after the ad.
So cool!
What font is being used in this video ?
Thanks! It helped me a lot.. keep going on
Love this animation.
Amazing - great video!
your a master...your amazing and because of that i will give you a like and a subscribe so that i dont miss out on any of your content
Thank you! It's awesome.
Awesome man 👍
awesome video, thank you so much
Awesome. Any plans to add animation delay to tailwind itself? Would be nice to be able to use it with jit
this really helped thanks.
thankyou for this video but i got a problem which is the objects on top dosn't works after i added divs as a background animate,
Thanks sir, finally i found it
that was awesome
Awesome. Thanks a ton for sharing.
When Tailwind Merch?
That's awesome!
Hey, nice recreation. What about performance of this animations?
Since we're animating `transform` properties, performance is pretty good on these! It would be a different story if we were animating thing like height, width and other properties that trigger an expensive layout "repaint".
Good question. I tried this animations and the performance in the web page have gone down soooo bad. Even the model web page has some performance issues
Does it work on Firefox? Last time I checked they still don't support the blur effect which is kind of a deal breaker, even with a fallback mechanism. I know you can enable support by changing a flag but you can't expect your visitors to do the same.
This is just perfect
Can you tell me how can I blur the top of my element in which I'm using backdrop blur
it should blend properly
Awesome 👍👍
Download source code where ? Thankmu
Magic tailwindcss 🚀🚀
great work
Just fantastic
Loved it
I need help on how to have a backup solution if a user is visiting the website on Firefox and any other browser that does not support filter blue or backdrop blur? On Firefox, you'll just get 3 solid objects on the ground.
@Adam gives this man a raise 🙂
Can you add transform rotate, so they move to different directions?
Yeah you could do that
Another cool one as usual. Hey, why don't you show us how can we make a "Waterfall Grid" layout using TailwindCSS? That would be really awesome.
We need to know what tools you used in the video. Anyway tailwind is revolutionary
Came for code, stayed for corgi.
Is there a way to do this with dark mode?
awesome!
Thank you for the video!
How many dogs do you have? Is this Queen's Corgi ?
Haha I have two corgis! One is 4 years old, and this one is... 9 weeks old ❤️
I'm following along with this and it seems that nothing I add to the animation part of the config file is showing up. I've copy pasted the config exactly and animate-blob has no effect while animate-bounce does.
did you ever figure it out ? im having the same problem
@@tareekylefraser4058 pretty sure I either restarted the project file or moved on. Cant quite recall.
@@adrienbird4130 well i just solved it.. my jit mode was not setup so that fixed it
Great content as always. Does anyone know if there’s a hamburger-style menu with Tailwind?
If you want a CSS-only solution, you can make a checkbox and you translate-x-full the menu. And then combine selector when checkbox:checked .menu to translate-x-0
There isn't a ready-made hamburger style menu in tailwind itself, because that would be a 'component' and tailwind deals with 'utilities'. But that means you can easily make one in your own style using the tailwindcss utilities and some custom css (like the checkbox hack) or javascript (many tutorials on w3schools for that). Or you can go for a fully accessible solution using HeadlessUI - Also from the makers of Tailwind. It uses javascript, and is available for frameworks like React and Vue.
How did you do that "class" word curly?
I'm using Astro with tailwind, and I don't know where to write the animation delays. Can someone help me out?
I was playing with this and got it basically working, but my existing layout that I want to appear on top of the blobs have the blobs showing through them, what am I missing? I tried specifying the z-indexes but that didn't make any difference, they seem to blend with my content. What did I miss?
Great! Thanks!
Is it possible to create this without a framework?
What development tools are used? Is there a windos version?
If i want to blur an element when it's hovered, can i use the duration class with blur to create a transition effect ? Or is there any other way to do this ?
which theme used in vs code name plase??
thanks very useful
Very cool!!!
Brilliant
none create dropdown menu with transform i tried many time and didnt work for me please show us with react
Cute dog
looks good and all, i am using it.. but when ever you hover those blobs, you cannot scroll the website anymore..
what font is that?
How do I make this mobile responsive?
Amazing
I love tailwindcss, but write CSS animations via JS config file is something that I don't like.
anyone knows which font he is using
AMAZING
so good!!!!