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 :)
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.
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 🧐
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!
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
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.
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.
@@simonswiss Thanks you so much I took that route yesterday and I found San Francisco apple font has a very restrictive terms of use. I used them locally but I got artifacts. I ended up using Roboto. Where do you get your San Francisco fonts from, any CDN? (I know you cannot share the because of braking apple TOS)
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.
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
![เปิดบ้าน นาราเครปกระเทย 1 ไร่ ขายขาดทุนหลัก10ล้าน เอามาใช้หนี้!!! l [Nickynachat]](http://i.ytimg.com/vi/0jz84VFWVP4/mqdefault.jpg)
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 :)
really awesome work 😍
This channel has made me fall in love with tailwind, thank you
Me too.. been learning since last month
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.
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! 🎉
This series is simply mind blowing :) Thank you so much for all your efforts!
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!
The final result is so CRISP! It’s what I imagine microled will look like 😛
If You want to learn something then the best teacher is who write that book.❤❤
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!
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! 🙏
While you designing, it all seems easier.. but the truth is, you make it easier.
This is the greatest framework I've ever used! KUDOS GUYS!!!
Wow, that's an absolutely fantastic tutorial. So many tricks packed into 20 minutes. Thanks a lot!
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.
Just started using tailwind and its 🔥🔥🔥🔥🔥🔥🔥🔥..Thanks for the tutorial
Thanks Simon, I learn a lot about css by using tailwindcss
Very glad to hear that! ✨
👍👍👍😊
Thats why i love Tailwind❤
I forget other CSS 🤣
What a madlad. Just saw your tweet about this and a video is already up.
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. 👌
This is so AWESOME!!! it's completely the same! I'm so stunning😲
HR tag was new to me. Thanks for the great video.
just awesome!
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
Man that is awesome... way better than bootstrap... Congrats for the project.
Too good man, I'm in love with Tailwind
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 🧐
Woooh, man that was crazy. You're awesome Simon.
If one day I start to using Tailwind, surely you are one of the reasons
well done, cant wait for windows 11 ui :P
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.
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.
Last in video Samsung phone with iPhone screen 😂. Nice tutorial 🎉
Man, what a powerful framework!
Mind = Blown 🤯
Subscribed ! pretty nice video. Powerfull framework. Can you do a video of your VS Code setup ? Thanks !
Thanks Simon! Great video, as always!!
Haha, Simon. Kills the ribs, nice one! Thanks for sharing this.
Consistently knocking it out of the park 👏🏼
Absolute brilliant!
Thanks! Possibly my favourite video ever on the channel.
Excellent work Simon. keep it up.
man I want to become a frontend designer after watching all these videos 😭😭
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
Fantastic tutorial. thx.
Here, we go again in the land of Tailwind 😎
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!
Wow, that's so cool, don't stop bringing that Tailwind super-secret knowledge ;)
coolest tailwind stuff ever seen
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 👍
I love tailwind
Tailwind is making legacy.
This time!!! he nailed it!!
dude keep it up!!!
And my mind is blown...🤯
God I love this channel
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
i am enjoying more tailwind each day! But what is this inset-x-0 thing, what does it do?
excellent content. Very informative !
Very cool, good one!
🤯 unbelievable.. soo good
this is fun thing to do.
Does anyone know which preview extension Simon is using in vscode? 🤔
nope
It is "Browser Preview" extension
"html preview" will do the job
Which font are you using? Is it a special theme?
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
Soooo good!
That's really impressive!
Awesome tutorial.
omg that was amazing.
Excellent video
When to use grid and when to use flex box?
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.
thank you, It's great. I want to be as good as you
Mind blowing!!!
Love it 😍
Wondefull job
Insane!
the last, so funny~
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
Im wondering how about the font family?
Here's a video that shows how to use custom fonts with Tailwind CSS 👍 th-cam.com/video/sOnBG2wUm1s/w-d-xo.html
@@simonswiss Thanks you so much I took that route yesterday and I found San Francisco apple font has a very restrictive terms of use. I used them locally but I got artifacts. I ended up using Roboto.
Where do you get your San Francisco fonts from, any CDN?
(I know you cannot share the because of braking apple TOS)
AWESOME!!!
Awesome!
awesome
Awesome...
🔥🔥🔥🔥
🎉🎉🎉
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.
thanks
Please bring back Tailwind Play! 😢
What do you mean? It's still here! play.tailwindcss.com
Magic
cool!!!
which font are you using in your IDE?
Dank Mono ✨
🔥🔥🔥🔥👍✊🏿
Apple corners are not circular arcs though
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
I tried this code in firefox and "backdrop blur" do not seem to be applied
Yep, backdrop-filters are not supported yet in FF.
Can we use tailwind in react-native?
Greate work. Hello 🤩 i like to request a video on hamburger menu if there is a video point me to it