Rebuilding iOS 15 with Tailwind CSS

[@howtofix360]

really awesome work 😍

[@telerikarsov]

This is the greatest framework I've ever used! KUDOS GUYS!!!

[@EPIC-w6k]

Man you're killing it! Please keep them coming.

[@simonswiss]

Thank you! And will do!

[@pranab091]

These guys made css fun.

[@moracabanas]

Im just crying in CSS now

[@pranab091]

@@moracabanas me too bro, can't go back to regular old css.

[@danielstill5625]

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.

[@markus-sagen]

Whole heartedly agree! Tailwind makes me eager to do css again

[@nitinsoni9956]

The more I watch Tailwind Labs video the more I love Tailwind.

[@notsciencelab2789]

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 :)

[@monarchgam3r]

This channel has made me fall in love with tailwind, thank you

[@abdullahialhassan3700]

Me too.. been learning since last month

[@delulu6969]

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

[@moracabanas]

I want to think and speak CSS like you 🥲

[@SebastianJaschinski]

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.

[@prasadchinwal9997]

This series is simply mind blowing :) Thank you so much for all your efforts!

[@stackinstuds]

You’re the man Simon! Thank you for doing these build videos, they have been invaluable to my learning.

[@simonswiss]

Super happy to hear this, Josh! 🎉

[@jmagrippis]

The final result is so CRISP! It’s what I imagine microled will look like 😛

[@joshuarileymagic]

Absolutely mind blowing, would love to see more iOS style UI builds in the future!

[@simonswiss]

Hey, thanks! I could certainly do a few other iOS screens, they're fun!

[@mryechkin]

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 :)

[@simonswiss]

Thank you! 🙏

[@gtdmg489]

What a madlad. Just saw your tweet about this and a video is already up.

[@kevinbatdorf]

Using the “p” tag was fine anyway, but I think the “time” tag may have been a pretty good choice too :D Great video.

[@simonswiss]

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!

[@MaheshKumar-bg5re]

While you designing, it all seems easier.. but the truth is, you make it easier.

[@muhammad_abir]

just awesome!

[@karsongrady]

HR tag was new to me. Thanks for the great video.

[@chandanm3308]

👍👍👍😊 Thats why i love Tailwind❤ I forget other CSS 🤣

[@william312435]

This is so AWESOME!!! it's completely the same! I'm so stunning😲

[@ngechumungai8420]

Just started using tailwind and its 🔥🔥🔥🔥🔥🔥🔥🔥..Thanks for the tutorial

[@shaikhdawood3517]

Too good man, I'm in love with Tailwind

[@joshuagugunsiagian9839]

Thanks Simon, I learn a lot about css by using tailwindcss

[@simonswiss]

Very glad to hear that! ✨

[@xtheory9640]

If You want to learn something then the best teacher is who write that book.❤❤

[@wolfsaman]

well done, cant wait for windows 11 ui :P

[@LucasKatayama]

Man that is awesome... way better than bootstrap... Congrats for the project.

[@mahdinaderian4053]

Woooh, man that was crazy. You're awesome Simon.

[@MrSonicastra]

Haha, Simon. Kills the ribs, nice one! Thanks for sharing this.

[@rom4ik666]

Wow, that's an absolutely fantastic tutorial. So many tricks packed into 20 minutes. Thanks a lot!

[@sripasum3122]

Consistently knocking it out of the park 👏🏼

[@kmaphane]

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.

[@AnsgarSteinkamp]

Thanks Simon! Great video, as always!!

[@thinkingdev102]

Please do more of this awesome walkthrough

[@krishnendusengupta6158]

Mind = Blown 🤯

[@axelb423]

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.

[@kouceylahadji]

If one day I start to using Tailwind, surely you are one of the reasons

[@techjdx]

Last in video Samsung phone with iPhone screen 😂. Nice tutorial 🎉

[@waldo-the-developer2376]

Wow, that's so cool, don't stop bringing that Tailwind super-secret knowledge ;)

[@mikopiko]

Man, what a powerful framework!

[@marcinzale]

Absolute brilliant!

[@simonswiss]

Thanks! Possibly my favourite video ever on the channel.

[@amitmandaviya]

Excellent work Simon. keep it up.

[@chrisnurse6430]

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 🧐

[@iwanchandra3295]

coolest tailwind stuff ever seen

[@codistiano]

This time!!! he nailed it!! dude keep it up!!!

[@hbela1000]

Fantastic tutorial. thx.

[@himanshusrivastava931]

Here, we go again in the land of Tailwind 😎

[@RedVelocityTV]

God I love this channel

[@isaaccloos1084]

excellent content. Very informative !

[@tsioryfitiavanaanhykrishna6992]

Subscribed ! pretty nice video. Powerfull framework. Can you do a video of your VS Code setup ? Thanks !

[@francismwondha2581]

🤯 unbelievable.. soo good

[@talhaibnemahmud]

What's the name of the VS Code HTML preview extension you're using please?

[@richardgoodwin181]

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.

[@SashrikaWaidyarathna]

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

[@simonswiss]

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!

[@dhwajsharma]

Vscode theme?

[@alicodes22]

Excellent video 🚀✨. Also, showing your vscode setup would be very helpful xD.

[@moracabanas]

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""

[@alicodes22]

Much appreciated

[@leodriesch]

I think the theme is Night Owl and the font is Dank Mono.

[@helderneves91]

That's really impressive!

[@SunGod-887]

man I want to become a frontend designer after watching all these videos 😭😭

[@eunoia7151]

what font is this guy using?

[@simonswiss]

He is using Dank Mono :D

[@JimOHalloran]

Very cool, good one!

[@mayurravindra9433]

And my mind is blown...🤯

[@himanshusrivastava931]

Does anyone know which preview extension Simon is using in vscode? 🤔

[@codistiano]

It is "Browser Preview" extension

[@_sumitdey.exe1]

"html preview" will do the job

[@jostarprogramming]

I love tailwind

[@ErikThiart]

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.

[@FADHsquared]

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?

[@ErikThiart]

@@FADHsquared Absolutely not. Sever > Client side

[@fa8ster]

Which font are you using? Is it a special theme?

[@yogenp]

Awesome tutorial.

[@besara_]

Excellent video

[@straydwag]

Tailwind is making legacy.

[@justinesders811]

Love it. Curious why you didn't just use Tailwind Play though?

[@simonswiss]

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

[@lnezzzardl]

Love it 😍

[@danvilela]

i am enjoying more tailwind each day! But what is this inset-x-0 thing, what does it do?

[@MaheshKumar-bg5re]

When to use grid and when to use flex box?

[@richardjamesbunker]

Soooo good!

[@hoagy_ytfc]

Apple corners are not circular arcs though

[@danwilloughby2088]

How did you edit your video? Looks amazing!

[@simonswiss]

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 👍

[@int0therain44]

omg that was amazing.

[@ezichiebere3168]

Mind blowing!!!

[@jasonji1152]

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

[@rafi_45]

this is fun thing to do.

[@manhappy1839]

thank you, It's great. I want to be as good as you

[@MatthewArrowsmith]

Insane!

[@moracabanas]

Im wondering how about the font family?

[@simonswiss]

Here's a video that shows how to use custom fonts with Tailwind CSS 👍 kzbin.info/www/bejne/qYDRc3porLqgZ9U

[@moracabanas]

@@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)

[@moneyfr]

Combinator please

[@Theya]

Hi I'm learning CSS/Tailwind, why he's always adding inset-x-0 on absolute elements ? What does it do ?

[@lnplum]

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.

[@nicholassingh138]

Whats the name of this guy? Does he have his own channel?

[@lepresk]

Wondefull job

[@alfieqashwa]

Can we use tailwind in react-native?

[@fredheladrienkissie1404]

I tried this code in firefox and "backdrop blur" do not seem to be applied

[@simonswiss]

Yep, backdrop-filters are not supported yet in FF.

[@thangnguyen8402]

AWESOME!!!

[@thekiharani]

which font are you using in your IDE?

[@simonswiss]

Dank Mono ✨

[@kaszapnagypeter]

Awesome!

[@theSamGon]

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

[@SteveHiemstraAKAspeg]

Why is there still background music when talking?! 🤯

[@simonswiss]

Experimenting with fading the background music slowly to keep a little vibe going while I am on-camera. I try to keep it low enough that it's not making it hard to listen to my voice - but if you think it made it harder, I'll consider rethinking this approach!

[@mactanxin]

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]

You're probably missing the JIT mode? You can see the code in action here: play.tailwindcss.com/kY4LYXwsNZ

[@miguelyurivilca6867]

🔥🔥🔥🔥

[@simonswiss]

🎉🎉🎉

[@AhmedTheCoder]

thanks

[@ExtraServingsBTS]

..but can you rebuild tailwind with tailwind?

[@emichel]

awesome

[@szy0syz]

the last, so funny~

[@zidencjb]

How do u do “h-[700px]” to works?

[@simonswiss]

That is the JIT (Just In Time) engine at work: tailwindcss.com/docs/just-in-time-mode

[@jamesbhatta]

Awesome...