Agreed. With Tailwind I now am more excited about design than the backend work, whereas previously I just used Material UI to avoid design and focus on the backend.
Things I would add to mimic closer to the mockup: 1. The 'rounded-out' corners of the notch with ::before and ::after radial-gradient box shadow 2. line-clamp: 2 for the and line-clamp: 4 for its 3. Blur the background
It's really fun to use Tailwind CSS to create element/component/etc clones. It is also very simple. This video shows it very well. Of course, Simon did a good job :)
Haha yes we discussed this after the recording, and ended up deciding that since we're kinda doing "CSS Art" here, it wasn't worth re-recording. But yes, a element would have worked here!
Simon you're a rockstar!! These just keep getting better and better. Love learning all the little tricks with Tailwind, there's something new in every video :)
I love the end result. I get overwhelmed by these sorts of statements “add this style but then this goes wrong so add this utility as well...” Look at the ratio of presented information to markup...it’s a bit crazy hey 🧐
Thank you for all your videos. Which theme and code editor/plugin do you use inside your video please? Maybe a video with a setup for use tailwind in best conditions can do another great video.
Install Tailwind CSS Intellisense extension and add the recommended editor config to vscode config.json. Read instructions carefully to get autosuggestions working properly. If not, use ctrl+space to spawn tailwind suggestions when you are class""
It does seem he is using Live Server (see the browser at localhost port 5000) and blending it into the video. Most of the Preview extensions I've tried don't seem to really handle all of the CSS updates properly.
It was a bit harder to have the screenshot/build side by side that way, and I prefer how the text editor looks in vscode for screencasts. There is also a Tailwind Play version of this tutorial, by the way: twitter.com/simonswiss/status/1414689134401114114
Great work. @Simonswissdev when u stack elements (at 15.44) when u create a div with position absolute, how it goes under the main notification panel. U didn't specify any z-index
It's because the element is sitting before (higher) in the HTML, so since they have the same stacking context, the source order of the HTMl will make it appear behind!
Please do a Tailwinds for beginners series (no frameworks). I am vanilla PHP and very little Javascript, I'd love to use Tailwinds, but all the docs feel VERY framework specific.
I'm using DaVinci Resolve, but most the things I do here you could do with almost any editing software. Recording the screen with QuickTime on Mac, then editing camera + screen footage together 👍
Hi, a question. What is the equivalent of `bg-green/50` when using the theme function in `background-color: theme('colors.green')......`? how to represent the 50% alpha value with `theme()` function
You know, I'm soo used to tailwind now that I have to google vanilla css. 😂 Recently in one of my old project with web components I started using tailwind classes without thinking and was wondering why things weren't working. 😂 P.S: Please come up with web component support. 😅
You can install webpack, then tailwind, then import a .css with base, utilities etc. and you are good to go. At `npm run build` you are compiling Tailwind to css chunks minified at `dist` dir. So If you want to generate maintenable CSS there is a extension to compile Tailwind to unminified CSS.
This is sooo cool. 1000 Thanks for this great video. just one question: when I started a new npm project or copy/paste the same code into codepen.io, this doesn't work anymore, the whole thing just collapsed.
i'm super new in html and css, i only know that we can create stuff in html and design it in css and in scss but what tek is this without css this accurate somebody please explain me
Man you're killing it! Please keep them coming.
Thank you! And will do!
These guys made
css fun.
Im just crying in CSS now
@@moracabanas me too bro, can't go back to regular old css.
Agreed. With Tailwind I now am more excited about design than the backend work, whereas previously I just used Material UI to avoid design and focus on the backend.
Whole heartedly agree! Tailwind makes me eager to do css again
The more I watch Tailwind Labs video the more I love Tailwind.
Things I would add to mimic closer to the mockup:
1. The 'rounded-out' corners of the notch with ::before and ::after radial-gradient box shadow
2. line-clamp: 2 for the and line-clamp: 4 for its
3. Blur the background
I want to think and speak CSS like you 🥲
It's really fun to use Tailwind CSS to create element/component/etc clones. It is also very simple. This video shows it very well. Of course, Simon did a good job :)
This channel has made me fall in love with tailwind, thank you
Me too.. been learning since last month
This series is simply mind blowing :) Thank you so much for all your efforts!
You’re the man Simon! Thank you for doing these build videos, they have been invaluable to my learning.
Super happy to hear this, Josh! 🎉
The final result is so CRISP! It’s what I imagine microled will look like 😛
Hey friends, you are not only producing the best CSS framework out there but also these learning materials truly rock! Keep the good stuff coming.
Using the “p” tag was fine anyway, but I think the “time” tag may have been a pretty good choice too :D Great video.
Haha yes we discussed this after the recording, and ended up deciding that since we're kinda doing "CSS Art" here, it wasn't worth re-recording. But yes, a element would have worked here!
Absolutely mind blowing, would love to see more iOS style UI builds in the future!
Hey, thanks! I could certainly do a few other iOS screens, they're fun!
👍👍👍😊
Thats why i love Tailwind❤
I forget other CSS 🤣
Simon you're a rockstar!! These just keep getting better and better. Love learning all the little tricks with Tailwind, there's something new in every video :)
Thank you! 🙏
If You want to learn something then the best teacher is who write that book.❤❤
This is the greatest framework I've ever used! KUDOS GUYS!!!
I love just in time compiler
please don't use it in production. sometimes it doesn't properly generate styles and media queries.
@@xeptao4385 I've actually used it in many projects and it gives me really good results. 👌
While you designing, it all seems easier.. but the truth is, you make it easier.
really awesome work 😍
What a madlad. Just saw your tweet about this and a video is already up.
Wow, that's an absolutely fantastic tutorial. So many tricks packed into 20 minutes. Thanks a lot!
Just started using tailwind and its 🔥🔥🔥🔥🔥🔥🔥🔥..Thanks for the tutorial
HR tag was new to me. Thanks for the great video.
I love the end result. I get overwhelmed by these sorts of statements “add this style but then this goes wrong so add this utility as well...” Look at the ratio of presented information to markup...it’s a bit crazy hey 🧐
This is so AWESOME!!! it's completely the same! I'm so stunning😲
Thank you for all your videos. Which theme and code editor/plugin do you use inside your video please? Maybe a video with a setup for use tailwind in best conditions can do another great video.
Thanks Simon, I learn a lot about css by using tailwindcss
Very glad to hear that! ✨
well done, cant wait for windows 11 ui :P
Mind = Blown 🤯
Last in video Samsung phone with iPhone screen 😂. Nice tutorial 🎉
Excellent video 🚀✨. Also, showing your vscode setup would be very helpful xD.
Install Tailwind CSS Intellisense extension and add the recommended editor config to vscode config.json. Read instructions carefully to get autosuggestions working properly. If not, use ctrl+space to spawn tailwind suggestions when you are class""
Much appreciated
I think the theme is Night Owl and the font is Dank Mono.
Too good man, I'm in love with Tailwind
Thanks for this video. I'm loving Tailwind, but I feel there is a lot I don't use or know about and this helps a lot. Look forward to more.
Please do more of this awesome walkthrough
Haha, Simon. Kills the ribs, nice one! Thanks for sharing this.
Here, we go again in the land of Tailwind 😎
Absolute brilliant!
Thanks! Possibly my favourite video ever on the channel.
Woooh, man that was crazy. You're awesome Simon.
Man that is awesome... way better than bootstrap... Congrats for the project.
Subscribed ! pretty nice video. Powerfull framework. Can you do a video of your VS Code setup ? Thanks !
What's the name of the VS Code HTML preview extension you're using please?
It does seem he is using Live Server (see the browser at localhost port 5000) and blending it into the video. Most of the Preview extensions I've tried don't seem to really handle all of the CSS updates properly.
just awesome!
Man, what a powerful framework!
If one day I start to using Tailwind, surely you are one of the reasons
Excellent work Simon. keep it up.
Consistently knocking it out of the park 👏🏼
I love tailwind
Its looking fun Man you did that amazing
Fantastic tutorial. thx.
Thanks Simon! Great video, as always!!
Does anyone know which preview extension Simon is using in vscode? 🤔
nope
It is "Browser Preview" extension
"html preview" will do the job
man I want to become a frontend designer after watching all these videos 😭😭
Wow, that's so cool, don't stop bringing that Tailwind super-secret knowledge ;)
Love it. Curious why you didn't just use Tailwind Play though?
It was a bit harder to have the screenshot/build side by side that way, and I prefer how the text editor looks in vscode for screencasts. There is also a Tailwind Play version of this tutorial, by the way: twitter.com/simonswiss/status/1414689134401114114
Great work. @Simonswissdev when u stack elements (at 15.44) when u create a div with position absolute, how it goes under the main notification panel. U didn't specify any z-index
It's because the element is sitting before (higher) in the HTML, so since they have the same stacking context, the source order of the HTMl will make it appear behind!
coolest tailwind stuff ever seen
Tailwind is making legacy.
And my mind is blown...🤯
Please do a Tailwinds for beginners series (no frameworks). I am vanilla PHP and very little Javascript, I'd love to use Tailwinds, but all the docs feel VERY framework specific.
Correct me if I'm wrong but aren't you supposed to reduce what the server does as much as possible and delegate it to Javascript?
@@FADHsquared Absolutely not. Sever > Client side
How did you edit your video? Looks amazing!
I'm using DaVinci Resolve, but most the things I do here you could do with almost any editing software. Recording the screen with QuickTime on Mac, then editing camera + screen footage together 👍
Very cool, good one!
Which font are you using? Is it a special theme?
Hi, a question. What is the equivalent of `bg-green/50` when using the theme function in `background-color: theme('colors.green')......`? how to represent the 50% alpha value with `theme()` function
Brilliant!
i am enjoying more tailwind each day! But what is this inset-x-0 thing, what does it do?
That's really impressive!
excellent content. Very informative !
This time!!! he nailed it!!
dude keep it up!!!
this is fun thing to do.
Soooo good!
Apple corners are not circular arcs though
God I love this channel
the last, so funny~
🤯 unbelievable.. soo good
More!
Wondefull job
Awesome tutorial.
When to use grid and when to use flex box?
Thanks!
Excellent video
Please bring back Tailwind Play! 😢
What do you mean? It's still here! play.tailwindcss.com
Mind blowing!!!
omg that was amazing.
You know, I'm soo used to tailwind now that I have to google vanilla css. 😂
Recently in one of my old project with web components I started using tailwind classes without thinking and was wondering why things weren't working. 😂
P.S: Please come up with web component support. 😅
You can install webpack, then tailwind, then import a .css with base, utilities etc. and you are good to go. At `npm run build` you are compiling Tailwind to css chunks minified at `dist` dir. So If you want to generate maintenable CSS there is a extension to compile Tailwind to unminified CSS.
This is sooo cool. 1000 Thanks for this great video.
just one question: when I started a new npm project or copy/paste the same code into codepen.io, this doesn't work anymore, the whole thing just collapsed.
You're probably missing the JIT mode? You can see the code in action here: play.tailwindcss.com/kY4LYXwsNZ
Insane!
Awesome
thanks
what font is this guy using?
He is using Dank Mono :D
Hi I'm learning CSS/Tailwind, why he's always adding inset-x-0 on absolute elements ? What does it do ?
It's the same as left: 0 and right: 0, i.e. it makes the element cover the full width of its non-static parent.
Love it 😍
i'm super new in html and css, i only know that we can create stuff in html and design it in css and in scss
but what tek is this without css this accurate somebody please explain me
Awesome!
Vscode theme?
awesome
thank you, It's great. I want to be as good as you
Magic
cool!!!
I tried this code in firefox and "backdrop blur" do not seem to be applied
Yep, backdrop-filters are not supported yet in FF.
Whats the name of this guy? Does he have his own channel?