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.
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
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 :)
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
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. ?
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!
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
![Advanced TailwindCSS Techniques You Have To Know?! [8 concepts]](/img/n.gif)
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 😊
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😍
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
Watching it three years later and loving it!
I love love love Emmet snippets. Those devs deserve more love and appreciation.
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
incredible! til about divide and you explain blur so well! excellent example
Thanks Shawn 🙏
Its good to see u guys uploading again
Yes, happy to be back! ✨
When I watch your tutorials I realize I know nothing about CSS 😂
I've been smiling all the time as I watch the video.
My favourite youtube channel.
As always high level video output🔥, thanks 👍
Am always enjoying seeing you Simon brilliant love you man from Egypt.
Great stuff as always, Simon! This is really neat. Can we request more pupper appearances in future videos? :D
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 :)
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
It's really beautiful!
These are such great videos. Very nice touches for web apps :)
Amazing work. Keep these videos coming, they're fun to watch 🎉
&rarrrrrrrrrrrr; 🦁
These videos are awesome, keep them coming!
Excellent as usual.
Thank you so much.
WOW it looks so clean!!!!
Awesome tutorial, thanks a lot - using this for my first portfolio iteration :-)
Another awesome tutorial, thank you very much! 🥰
Awesome! Simple and effective. Thanks for sharing :)
Love this effect! I was wondering what extension are you using for the preview window in vs code?
What the heck I had no idea about &rarr, that's amazing!
This is darn cool, thank you!
You're welcome!
Wow, that was really good. Thanks!
Thank you for making this!
Beautiful tutorial!
Need more of these!
very nice!
Really incredible.
Amazing video as always
So cool tricks! Thank you so much!
Thank you for this.
I had to do a gradient border for a input[search] once, it wasn't the smoothest experience.
Cool! Thanks a lot for your work!
This is so good!
It's awesome, thank you !!
Looks great! Fun video too 👍
Haha, simon the corgi is rwarr! And ofcourse nice video, cool topic!
Very cool!
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" 👍
Thanks that was useful! :D
look really cool, thanks for share
Very cool
Tailwind is very amazing.
Awesome trick
It was easy and 👍🏻
Great vid 👏
Hi this is cool!) tell me through what extension does the preview work in visual studio?
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. ?
muito foda! TailwindCSS é muito top!
The best.
W's all around
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!
Laughed aloud about → :D
RARR indeed!
Rawr
Waiting day have came
Thanks :)
Que cara Bom...tá maluco!
can I use the z-index classes to place the pink div under the button ?
Just wondering: What is the preview plugin used here? :)
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
thanks
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!
woah!!
what did he use at 4:10 to move that
cool
❤️❤️
Your result is event better what they have
it glows in the dark
There are two kinds of css library, Tailwindcss and Windicss XD
❤
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.
→ I died laughing 😂😂😂😂😂😂😂😂😂
Arguably my best contribution to Tailwind Labs 🤣
Rarr!
Meanwhile, I still struggle with centering a div 😭😅
damn
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
2:17 :DDDDDD
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 ?
great stuff
❤️❤️❤️