Rebuilding the Instagram Stories UI with Tailwind CSS

  Рет қаралды 70,409

Tailwind Labs

Tailwind Labs

Күн бұрын

Пікірлер: 155
@almujahid5507
@almujahid5507 4 жыл бұрын
Oh my, this is entertaining and educating at the same time
@TailwindLabs
@TailwindLabs 4 жыл бұрын
That's what I was going for - so I really appreciate this comment! ❤️
@arunavkhare2733
@arunavkhare2733 3 жыл бұрын
You guys have made the task of UI design far simpler. Hats off to this amazing library and these informative and addictive videos.
@Iwanmukhtar
@Iwanmukhtar 2 жыл бұрын
Absolutely, right! 😀
@vampirekabir
@vampirekabir Жыл бұрын
he has such depth of knowledge,very very experienced tutor
@methos90
@methos90 4 жыл бұрын
Man, I just love Tailwind since I gave it a try. I was reluctant at first to switch from Bootstrap and Materialize, but once I started using it, it became my fav CSS framework. It's just so intuitive, although sometimes I end with long long strings of classes, but anyways it is easy to read by having some arranging rules. Also, I feel like it doesn't make me forget how to write plain CSS when needed.
@NEERAJ355
@NEERAJ355 4 жыл бұрын
one of the best CSS framework i just love it
@jawyor-k3t
@jawyor-k3t Жыл бұрын
Absolutely loving these little workshops!
@monarchgam3r
@monarchgam3r 4 жыл бұрын
Ok, this is my first time seeing anything done in tailwind, and I’m officially sold... switching to this soon Once I get learn it
@TheBboyStyle
@TheBboyStyle 3 жыл бұрын
check the net ninja tutorial, really clear
@CodingWithLewis
@CodingWithLewis 4 жыл бұрын
I have been on the lookout for a mature CSS framework that has built-in stories. Tailwind CSS is the only option!
@spiderdev1678
@spiderdev1678 3 жыл бұрын
I just started learning tailwind and this video got me more interested in tailwind. This is awesome, thanks!
@controltelevision8862
@controltelevision8862 4 жыл бұрын
I was very blessed by coming across this video. It's amazing and very fast. I'm surprised. Definitely giving it a go.
@Rhidayah
@Rhidayah 4 жыл бұрын
The cat bring me here, Tailwind and Cat both of them are cute. I like it
@joemobes1632
@joemobes1632 4 жыл бұрын
I have never used a CSS framework before and this makes building a UI very easy. The only thing is that each element will have a long list of classes. Excited to give it a try though. Thanks for the quick tutorial!
@arijitsingh9876
@arijitsingh9876 4 жыл бұрын
Enough info to title it as a crash course to Tailwind 2.0. 🔥
@digigoliath
@digigoliath 3 жыл бұрын
Nice fun project. I enjoyed seeing how the UI was created.
@svndays
@svndays 3 жыл бұрын
Really good video. I’ve been using tailwind for a long time and I just learned about the @components layer and the space utility class here. You can always learn something new.
@AcunPearce
@AcunPearce 3 жыл бұрын
So smooth and looks easy. Gonna love Tailwind
@swyxTV
@swyxTV 4 жыл бұрын
WE LOVE YOU TAILWIND
@TailwindLabs
@TailwindLabs 4 жыл бұрын
♥️
@mayankchauhan6680
@mayankchauhan6680 4 жыл бұрын
now I am 100% convinced that I need to learn Tailwind CSS
@mayurravindra9433
@mayurravindra9433 3 жыл бұрын
As always, love you Tailwind! ❤
@Sohrabziagoogle
@Sohrabziagoogle 3 жыл бұрын
It's fun to watch, learning is a plus.
@thinkverse_
@thinkverse_ 4 жыл бұрын
Thought the vscode stories extensions had been added into TailwindPLAY. Had me worried there. 😅 Love the video. Didn't know about @layer, have to keep that in mind for later. 👍
@eliotistube
@eliotistube 4 жыл бұрын
Great work guys! Thank you
@AntNZ
@AntNZ 3 жыл бұрын
Had to lol. You sound like a kiwi when you say Fuchsia
@bharathrathod3155
@bharathrathod3155 4 жыл бұрын
This is really good !!! I well start using it in my next project.
@TheBboyStyle
@TheBboyStyle 3 жыл бұрын
How do you select multiple elements and add code one the 4 differents lines at the same time ? @2:47 ?
@altermode
@altermode 3 жыл бұрын
cmd + shift + l or control + shift + l after you highlight the text to match on
@leonvanrijswijk8409
@leonvanrijswijk8409 4 жыл бұрын
Great video. There's a lot of possibilities in Tailwind I do not use (yet)...
@realistoyun9030
@realistoyun9030 3 жыл бұрын
I have just subbed to you, thank you for posting this.
@SibTiger33
@SibTiger33 3 жыл бұрын
On wow 100% sold on tailwind now
@billywang3829
@billywang3829 3 жыл бұрын
I use to fucking hate styling before I found tailwind. It's literally a lifesaver
@PrithvirajSukale
@PrithvirajSukale 4 жыл бұрын
Tailwind is bonkers! So easy.
@ezeonyemaechi1304
@ezeonyemaechi1304 Жыл бұрын
Thank you very much for this. I had issues when i started but I thank God i was able to fix it. Thanks alot for the video
@klevisxhyra173
@klevisxhyra173 4 жыл бұрын
hahaha Ben - your effort has been recognized :p
@hm7s
@hm7s 4 жыл бұрын
Nice work! Very like the video. Btw, at 10:40 we can use multiple @apply function to group Tailwind classes by their role and make our code more pretty.
@Rahulyadav-lv7dh
@Rahulyadav-lv7dh 3 жыл бұрын
simply awesome man !👍
@TheNewFaceOfHSP
@TheNewFaceOfHSP 3 жыл бұрын
I'll be completely honest with you, Adam Wathan is not my cup of tea. But Simon, you are fucking amazing and I love your content. Made learning Tailwind (properly) amazing.
@azharansari8988
@azharansari8988 4 жыл бұрын
Wow, it is pretty good. Tailwind
@josevelez6865
@josevelez6865 4 жыл бұрын
This is awesome! Thanks for sharing.
@aminos8736
@aminos8736 4 жыл бұрын
Why play.tailwindcss.com still don't add emmet?, i like to it but without emmet extension is so painful.
@TailwindLabs
@TailwindLabs 4 жыл бұрын
Agreed - it's something we're _trying_ to implement during this current work cycle (last of the year) 👍
@shubitoxX
@shubitoxX 2 жыл бұрын
Great tutorial
@felixhaberle9522
@felixhaberle9522 4 жыл бұрын
To center the blue + 🔵 you could have used transform: translate(50%,-50%)
@syropian
@syropian 4 жыл бұрын
Depending on the size, you can get blurry edges due to subpixel rounding with transforms. It was a decent hack back in the day but there are more ideal solutions for centering stuff now.
@felixhaberle9522
@felixhaberle9522 4 жыл бұрын
@@syropian wow thanks didn't know that, interesting. do you have a link to read more about it?
@xoulrage
@xoulrage 4 жыл бұрын
amazing!!!!!!!!! I don't understand why people around me aren't as hyped as I am about Tailwind sigh...
@LuBre
@LuBre 4 жыл бұрын
Because if you actually *know* css you can do the same thing with 1/10th of the code. That's why. I am not bashing Tailwind, it's cool and it surely works for many people. But it's nothing magical, it's not "powerful". It's a just a lazy way to code, in my opinion.
@warangel580
@warangel580 4 жыл бұрын
@@LuBre that's lazy and that's the point, "work smarter, not harder"
@outsider2097
@outsider2097 4 жыл бұрын
​@@LuBre with Tailwind you get to purge your production CSS, have a single source of truth, easily support multiple application themes, easily manage breakpoints, create your own custom components, presets, utilities, support integrations with multiple PostCSS plugins, amazing reactivity with javascript frameworks and those are just some few things you can do with it. What is your argument to say tailwind is not powerful?
@LuBre
@LuBre 4 жыл бұрын
@@outsider2097 it is powerful. But my personal opinion is that outside specific environments where you mass-produce apps and websites it is just a way to bloat the code and add unnecessary weight to the project.
@outsider2097
@outsider2097 4 жыл бұрын
@@LuBre All of that depends on good patterns you have to follow, for example, you can avoid bloating by writing your own components using tailwind directives tailwindcss.com/components Also, you can use different webpack environments; one for the development phase and one for production where you can use a PostCSS plugin like @fullhuman/purgecss which helps you reduce the final size of the application by tree shaking all the unused CSS. This is obviously a matter of preference but since I know Tailwind, I only use CSS for very specific things, like setting up patterns, make SVG shapes, clip-path, etc. There are people who enjoy utility-first and there are people who enjoy writing Vanilla CSS and that's ok, but In my experience, tailwind has been great for big enterprise projects, since we don't have to think about class names, we don't have to communicate to the other teammates which classes are new, mobile-first is very easy to implement, we can fully customize our designs, add new utilities, easily manage a single source of truth, and overall, depending on how much tailwind you're using, you just end up with a size of some few kb. Maybe you could give it a chance and you may like it because right now I dare to say that due to its construction and its philosophy this is the most flexible CSS framework ever.
@SebastienBarrau
@SebastienBarrau 3 жыл бұрын
This is Awesome!
@meljones2922
@meljones2922 4 жыл бұрын
Your google has an Australian accent 🇦🇺❤️ Great video, keep it up!
@TailwindLabs
@TailwindLabs 4 жыл бұрын
haha yep!
@meljones2922
@meljones2922 4 жыл бұрын
@@TailwindLabs Mine too, I moved from Aus to Germany but kept google sounding like home. I have a good giggle when it tries to pronounce German street names with an Aussie twang :) Btw I'm really loving all the work you're doing with Tailwind. Congrats to you and the team, Tailwind is so awesome!
@TailwindLabs
@TailwindLabs 4 жыл бұрын
@@meljones2922 Thank you so much for the kind words 🙏 Haha yep Deutsche Strassen with aussie accent is good fun!
@silvesterwali6565
@silvesterwali6565 3 жыл бұрын
I gonna use it now
@FreeFall73
@FreeFall73 3 жыл бұрын
tailwind is awesome
@stefanpfadt4353
@stefanpfadt4353 2 жыл бұрын
Mate, if you could actually create the functionality for the "create stroies"that would be really AWESOME! ;)
@abedalraoufzeidan1461
@abedalraoufzeidan1461 Жыл бұрын
what is the keyboard abbreviation to write in multiple places
@simonswiss
@simonswiss Жыл бұрын
On mac, it's `cmd` + `D`. Maybe ctrl + D on windows?
@kevvvm9335
@kevvvm9335 4 жыл бұрын
Is there a chance we can have a Tailwind playground, but for React? I know maybe it's just change class for className, but it would be very useful I think. I love Tailwind, good video, now I'm gonna add stories to my side projects. 😆
@rahulmm7795
@rahulmm7795 3 жыл бұрын
Hai Sir am a Student and love the lesson .
@jasonbrooks737
@jasonbrooks737 2 жыл бұрын
thanks mate .. I learned cool things
@ArturoCampos
@ArturoCampos 4 жыл бұрын
Stories on Gmail, it killed me! 🤣 Btw, you could have also used a white border in the images and apply the gradient to the anchors, so no need to use the div wrapper 😁
@TailwindLabs
@TailwindLabs 4 жыл бұрын
That is one very good point 👍😅 Ah well, at least my version made adding the `+` button on first story a bit smoother, since the wrapper relative wrapped was already there.
@ArturoCampos
@ArturoCampos 4 жыл бұрын
@@TailwindLabs Yep, you would need a wrapper in the first story anyway, otherwise `.bottom-0` would not be that helpful inside a `.relative` `` due to the anchor with the kitty name 🙂
@sudheshsankarkk
@sudheshsankarkk 2 жыл бұрын
Thanks for sharing 🙏
@nalakajayasena2343
@nalakajayasena2343 4 жыл бұрын
Cool - thanks!
@parijke
@parijke 4 жыл бұрын
Loved the vid... thanks man!
@TailwindLabs
@TailwindLabs 4 жыл бұрын
Glad you enjoyed it 🙏
@TradewithAnkur
@TradewithAnkur 2 жыл бұрын
Your videos are addictive. We have to have some plan to stay away from playlists of Tailwinds
@mohammadjavadi2283
@mohammadjavadi2283 2 жыл бұрын
Thanks.Please add Vue usability to play tailwind if possible.
@chiefdan07
@chiefdan07 4 жыл бұрын
Almost had me for a sec 😂
@Benrb07
@Benrb07 3 жыл бұрын
How do you edit separate lines at the same time like that 😯
@MaulikParmar210
@MaulikParmar210 3 жыл бұрын
Select and ctrl+d will let you edit multiple lines at once
@damercy
@damercy 4 жыл бұрын
Haha nice one there! 😂
@gagalady6767
@gagalady6767 3 жыл бұрын
thank you, it's awsome!
@CCV334
@CCV334 3 жыл бұрын
How do you do a horizontal scroll?
@dinakanwamu5676
@dinakanwamu5676 2 жыл бұрын
For some reason the background gradient isnt working for me please help
@C00ltronix
@C00ltronix 3 жыл бұрын
Tailwind is cool, so easy to use. However, I find it difficult to make it work in Hugo. Most tutorials I tried don't really work.
@yacobee
@yacobee 4 жыл бұрын
can use ring for white ring?
@mibdev
@mibdev 4 жыл бұрын
Please post stuff to Lbry as well!
@JeroenSteen
@JeroenSteen Жыл бұрын
Where can I find a demo of these kitty stories in Tailwind? I tried to recreate it, but when the kitty name is short the kitty circle is not a circle :/
@simonswiss
@simonswiss Жыл бұрын
You probably need to add `shrink-0` to your element then, to prevent the circle from getting any narrower than it should!
@10XAchievers
@10XAchievers 3 жыл бұрын
Amazing
@wahyusa
@wahyusa 4 жыл бұрын
Wait, i've just install v2
@liamwinterton7370
@liamwinterton7370 3 жыл бұрын
I just can't bring myself to start using Tailwind. The idea of something like this intrigues me, but I just can't get over seeing so much HTML like that. IMO, the HTML shouldn't inform the styling of whatever it is if at all possible. You can take a glance at that HTML and you will know absolutely nothing about what it is whatsoever. Is there a way in SASS that you can extend these classes instead of putting them in the HTML?
@dv4able
@dv4able 4 жыл бұрын
How did you selected all img tags at once?!
@TailwindLabs
@TailwindLabs 4 жыл бұрын
Command + d will select any string that matches what you have currently selected - so I selected one img tag, and pressed 3x cmd + d 👍
@dv4able
@dv4able 4 жыл бұрын
@@TailwindLabs ❤️
@THMok
@THMok 3 жыл бұрын
awesome !
@wouterdorgelo8045
@wouterdorgelo8045 4 жыл бұрын
RIP Bootstrap
@wobsoriano
@wobsoriano 4 жыл бұрын
as much as I like Tailwind... Na, can't beat bootstrap 5
@TailwindLabs
@TailwindLabs 4 жыл бұрын
There's enough room in the world for both... and others! ❤️
@waldothedev
@waldothedev 3 жыл бұрын
Would be great to have a link to the source code, I keep coming back to the video whenever I forgot how to do this lol
@ZarisPlay
@ZarisPlay 9 ай бұрын
This is awsome
@CARUSAR21
@CARUSAR21 4 жыл бұрын
Never using any other framework again. Wow.
@arbrahimbadsa5571
@arbrahimbadsa5571 4 жыл бұрын
This is lit!
@none0n
@none0n Жыл бұрын
Good video but can you add the IG animation and not the one you used
@GGGStalker
@GGGStalker 4 жыл бұрын
Is the framework cost money?
@Xewl
@Xewl 4 жыл бұрын
U forgot Linkedin, but yeah, looool :D
@AbhishekAngira
@AbhishekAngira 4 жыл бұрын
i thought it's foo-shiya
@jailbirdx0x
@jailbirdx0x 4 жыл бұрын
How to link Tailwind CSS if I am not using a framework? I mean just vanilla web development.
@kayodeoladipo7706
@kayodeoladipo7706 4 жыл бұрын
There's a CDN. tailwindcss.com/docs/installation#using-tailwind-via-cdn
@fabiothebest89lu
@fabiothebest89lu 3 жыл бұрын
@@kayodeoladipo7706 yes, anyway there are some disadvantages, so it's better to build tailwind css locally
@antonyalbitestapia848
@antonyalbitestapia848 4 жыл бұрын
Jajajajajaja awesome, I love tailwind
@MrBask-ei4pu
@MrBask-ei4pu 3 жыл бұрын
Well, I think this is is helpful.
@krishnendusengupta6158
@krishnendusengupta6158 3 жыл бұрын
I wonder what would happen to developers if cats didn't exist.
@TailwindLabs
@TailwindLabs 3 жыл бұрын
Capybaras are an excellent replacement
@MrAtomUniverse
@MrAtomUniverse 4 жыл бұрын
More please ... I need more examples :(
@rezkymaulana2782
@rezkymaulana2782 4 жыл бұрын
Try it bro
@aislanarislou
@aislanarislou 4 жыл бұрын
Please, give me more!!!!!! S2
@syakirinamin2788
@syakirinamin2788 4 жыл бұрын
Nice
@kris4637
@kris4637 4 жыл бұрын
how useful would this be to get a job?
@TailwindLabs
@TailwindLabs 4 жыл бұрын
Probably not very useful on its own, but I'd say being able to quickly build a circled avatar UI is not going to hurt 👍
@MazinMMagid
@MazinMMagid 2 жыл бұрын
Who is the developer ????
@simonswiss
@simonswiss Жыл бұрын
It's me! 👋
@alapanroy1114
@alapanroy1114 4 жыл бұрын
Wow 😁😘
@borisbob
@borisbob 3 жыл бұрын
u are best
@josue_ayala27
@josue_ayala27 3 жыл бұрын
Crack man
@nyambe
@nyambe 4 жыл бұрын
Wow
@TailwindLabs
@TailwindLabs 4 жыл бұрын
Meowww
@pranupranav6279
@pranupranav6279 2 жыл бұрын
Cats🥰🥰🥰🥰🥰
@oyunadam2897
@oyunadam2897 3 жыл бұрын
Hmmm, I guess this is was helpful.
@benzigarjs8607
@benzigarjs8607 4 жыл бұрын
Imagine creating these same with vanilla CSS , , 😆😆 Dead !!!
@LuBre
@LuBre 4 жыл бұрын
I hope you're joking. This is *basic* css, nothing more than that. You just need *few lines* of code. Here you go, same thing with few added twists: codepen.io/LuBre/pen/vYKwPLy?editors=1100
@TailwindLabs
@TailwindLabs 4 жыл бұрын
@@LuBre Nice one! 👍
@j4878
@j4878 4 жыл бұрын
Subscribed because of pet, jk
@Tendou-Gaming
@Tendou-Gaming 3 жыл бұрын
Ben awad cross over lol
@habibi9497
@habibi9497 4 жыл бұрын
Fucha is difficult to pronounce .
@LuBre
@LuBre 4 жыл бұрын
Non-Tailwind version (vanilla css) for those who still code in the "old fashioned way" and love being in full control of their code: codepen.io/LuBre/pen/vYKwPLy?editors=1100
@nullpointer8553
@nullpointer8553 3 жыл бұрын
how long did it take you? cause that's the important thing for most people
@LuBre
@LuBre 3 жыл бұрын
@@nullpointer8553 A few minutes, mostly because I wasted too much time looking for cute cats. It's a very basic and simple piece of code, it shouldn't take more than 5 mins to put everything together.
Translating a Custom Design System to Tailwind CSS
10:10
Tailwind Labs
Рет қаралды 127 М.
Theming Tailwind with CSS Variables
27:24
Tailwind Labs
Рет қаралды 130 М.
Rebuilding iOS 15 with Tailwind CSS
20:19
Tailwind Labs
Рет қаралды 77 М.
I WISH I Knew These Tailwind Tips Earlier
9:15
Theo - t3․gg
Рет қаралды 202 М.
7 ways to deal with CSS
6:23
Fireship
Рет қаралды 1,1 МЛН
Building a Fancy Responsive Tile Grid with Tailwind CSS
13:28
Tailwind Labs
Рет қаралды 76 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 990 М.
Programming Is NOT Enough | Add these 7 skills…
13:19
Travis Media
Рет қаралды 424 М.
What's New in Tailwind CSS v2.2
21:21
Tailwind Labs
Рет қаралды 51 М.