Glowing Background Gradient Effects with Tailwind CSS
HTML-код
- Опубликовано: 6 июн 2024
- In this video, I'll show you how to achieve that awesome glow effect popping up everywhere with vanilla Tailwind CSS utilities.
Inspiration: linear.app
Tailwind Play: play.tailwindcss.com/fNKKyOG2Yv 
Наука
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
what an absolute scoop Adam and the guys made when they hired Simon. what a win
Awwww thank you so much! ❤️
@@simonswiss no, thank YOU 😊
I feel so happy whenever I see a new video from you guys. ❤️ 👏
Cant help to get amazed of how much tailwind is good. Everything feels almost tailor made in quality. Super intuitive also
These quick videos are so worth their time to watch. You find great design inspiration and quickly see the nuts and bolts that holds it together. Thanks for making these.
you can't be more correct, he is so good😍
These videos are awesome, keep them coming!
As always high level video output🔥, thanks 👍
Its good to see u guys uploading again
Yes, happy to be back! ✨
It's really beautiful!
WOW it looks so clean!!!!
Excellent as usual.
Thank you so much.
When I watch your tutorials I realize I know nothing about CSS 😂
Awesome! Simple and effective. Thanks for sharing :)
Another awesome tutorial, thank you very much! 🥰
These are such great videos. Very nice touches for web apps :)
Amazing video as always
Wow, that was really good. Thanks!
Am always enjoying seeing you Simon brilliant love you man from Egypt.
I've been smiling all the time as I watch the video.
incredible! til about divide and you explain blur so well! excellent example
Thanks Shawn 🙏
Thank you for making this!
Awesome tutorial, thanks a lot - using this for my first portfolio iteration :-)
This is darn cool, thank you!
You're welcome!
Looks great! Fun video too 👍
My favourite youtube channel.
Cool! Thanks a lot for your work!
I love love love Emmet snippets. Those devs deserve more love and appreciation.
It's awesome, thank you !!
Beautiful tutorial!
This is so good!
So cool tricks! Thank you so much!
Really incredible.
Great stuff as always, Simon! This is really neat. Can we request more pupper appearances in future videos? :D
very nice!
Amazing work. Keep these videos coming, they're fun to watch 🎉
&rarrrrrrrrrrrr; 🦁
Very cool!
Great vid 👏
Need more of these!
What the heck I had no idea about &rarr, that's amazing!
great stuff
the blur will naturally create a rounding of the grlowing div, you'll find that not rounding it or lowering the rounding border size will look slightly better at the corners
I love the Tailwind UI.
Could you make a video on your design process, to help viewers learn how to make such beautiful components as in your UI kit?
I'm kindda struggling every time I need to make something custom :)
Very cool
Thank you for this.
I had to do a gradient border for a input[search] once, it wasn't the smoothest experience.
look really cool, thanks for share
Thanks awesome tutorial as always !
for those who can't see the blur effect just add the utility class "filter" to the div it should work.
Or update your TailwindCSS version :-) I think from v2.2 or so the filter is not needed anymore
It worked man!
The real MVP right here! Thanks! Spent too much time browsing stack overflows and staring at my config files trying to figure out what the heck was wrong. Should've just checked the comments section first. lol
Awesome trick
Thanks :)
Haha, simon the corgi is rwarr! And ofcourse nice video, cool topic!
Love this effect! I was wondering what extension are you using for the preview window in vs code?
muito foda! TailwindCSS é muito top!
The best.
Tailwind is very amazing.
Hey Simon! Thank you for the video sometimes you read my mind.
Just a heads up, the Tailwind Play is missing the class "filter"
have a great day!
thanks
Laughed aloud about → :D
It was easy and 👍🏻
Waiting day have came
W's all around
Que cara Bom...tá maluco!
Hi this is cool!) tell me through what extension does the preview work in visual studio?
cool
woah!!
RARR indeed!
Why do I have to use the filter utility before blur in my tailwindcss project if the filter utility doesn't appear on the tailwindcss playground example. ?
can I use the z-index classes to place the pink div under the button ?
Anyone knows how he get the classNames formatted over multiple lines on save?
Im struggling with really long tailwind classes and its hard to find the right one if they are all on one line.
Thank you in advance!
❤️❤️
Rawr
❤️❤️❤️
Just wondering: What is the preview plugin used here? :)
Cool! as always. One question - How is blur working without applying filter class?. Is that because of JIT or new version of TailwindCSS?
Yep, since version 2.2 we removed the need for a few "toggle" classes like "transform" or "filter" 👍
Yep, since version 2.2 we removed the need for a few "toggle" classes like "transform" or "filter" 👍
Your result is event better what they have
How did you setup vscode that you can see immediate / hot reload changes in your index.html?
2 months late but he ws using tailwind play
it glows in the dark
There are two kinds of css library, Tailwindcss and Windicss XD
❤
Rarr!
I couldn't seem to get this to work until I also added the `filter` class. Is that normal?
You're probably using a version of Tailwind earlier than 2.2? Before then, you needed to add the "filter" toggle class.
@@simonswiss Actually just noticed I was using the compatibility version since I'm on create-react-app.
damn
→ I died laughing 😂😂😂😂😂😂😂😂😂
Arguably my best contribution to Tailwind Labs 🤣
Meanwhile, I still struggle with centering a div 😭😅
2:17 :DDDDDD
What is the extension to make classes got on per line like 7:03?
install prettier vscode extension.
Protip: mark the "require prettier file" on prettier extension config.
Then create a .prettierrc, prettier.config.js or whatever compatible config file format. Go to prettier web page and copy the example config in that file.
Then research there about more configs to format.
Protip2 install "enable disable format extension" to enable/disable prettier formar on save button
Also every time you start a new project first thing to do is create the same last process then "npx prettier --write . " This will format every js css html file on your proyect.
Before formating all js files with that, ensure you add node_modules and all stuff you want to ignore format to .prettierignore.
Commit that and start your project.
That prevents large commits in the future when you edit a file and commit gets changes and format at the same time
Zo'r
Could you please stop “touching” camera every time? Thank you
Always great content! Thanks.
@simonswiss which is the best way in Tailwind to add "smooth scroll" behavior ?