Oh my, this is entertaining and educating at the same time
@TailwindLabs4 жыл бұрын
That's what I was going for - so I really appreciate this comment! ❤️
@arunavkhare27333 жыл бұрын
You guys have made the task of UI design far simpler. Hats off to this amazing library and these informative and addictive videos.
@Iwanmukhtar2 жыл бұрын
Absolutely, right! 😀
@vampirekabir Жыл бұрын
he has such depth of knowledge,very very experienced tutor
@methos904 жыл бұрын
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.
@NEERAJ3554 жыл бұрын
one of the best CSS framework i just love it
@jawyor-k3t Жыл бұрын
Absolutely loving these little workshops!
@monarchgam3r4 жыл бұрын
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
@TheBboyStyle3 жыл бұрын
check the net ninja tutorial, really clear
@CodingWithLewis4 жыл бұрын
I have been on the lookout for a mature CSS framework that has built-in stories. Tailwind CSS is the only option!
@spiderdev16783 жыл бұрын
I just started learning tailwind and this video got me more interested in tailwind. This is awesome, thanks!
@controltelevision88624 жыл бұрын
I was very blessed by coming across this video. It's amazing and very fast. I'm surprised. Definitely giving it a go.
@Rhidayah4 жыл бұрын
The cat bring me here, Tailwind and Cat both of them are cute. I like it
@joemobes16324 жыл бұрын
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!
@arijitsingh98764 жыл бұрын
Enough info to title it as a crash course to Tailwind 2.0. 🔥
@digigoliath3 жыл бұрын
Nice fun project. I enjoyed seeing how the UI was created.
@svndays3 жыл бұрын
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.
@AcunPearce3 жыл бұрын
So smooth and looks easy. Gonna love Tailwind
@swyxTV4 жыл бұрын
WE LOVE YOU TAILWIND
@TailwindLabs4 жыл бұрын
♥️
@mayankchauhan66804 жыл бұрын
now I am 100% convinced that I need to learn Tailwind CSS
@mayurravindra94333 жыл бұрын
As always, love you Tailwind! ❤
@Sohrabziagoogle3 жыл бұрын
It's fun to watch, learning is a plus.
@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. 👍
@eliotistube4 жыл бұрын
Great work guys! Thank you
@AntNZ3 жыл бұрын
Had to lol. You sound like a kiwi when you say Fuchsia
@bharathrathod31554 жыл бұрын
This is really good !!! I well start using it in my next project.
@TheBboyStyle3 жыл бұрын
How do you select multiple elements and add code one the 4 differents lines at the same time ? @2:47 ?
@altermode3 жыл бұрын
cmd + shift + l or control + shift + l after you highlight the text to match on
@leonvanrijswijk84094 жыл бұрын
Great video. There's a lot of possibilities in Tailwind I do not use (yet)...
@realistoyun90303 жыл бұрын
I have just subbed to you, thank you for posting this.
@SibTiger333 жыл бұрын
On wow 100% sold on tailwind now
@billywang38293 жыл бұрын
I use to fucking hate styling before I found tailwind. It's literally a lifesaver
@PrithvirajSukale4 жыл бұрын
Tailwind is bonkers! So easy.
@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
@klevisxhyra1734 жыл бұрын
hahaha Ben - your effort has been recognized :p
@hm7s4 жыл бұрын
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-lv7dh3 жыл бұрын
simply awesome man !👍
@TheNewFaceOfHSP3 жыл бұрын
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.
@azharansari89884 жыл бұрын
Wow, it is pretty good. Tailwind
@josevelez68654 жыл бұрын
This is awesome! Thanks for sharing.
@aminos87364 жыл бұрын
Why play.tailwindcss.com still don't add emmet?, i like to it but without emmet extension is so painful.
@TailwindLabs4 жыл бұрын
Agreed - it's something we're _trying_ to implement during this current work cycle (last of the year) 👍
@shubitoxX2 жыл бұрын
Great tutorial
@felixhaberle95224 жыл бұрын
To center the blue + 🔵 you could have used transform: translate(50%,-50%)
@syropian4 жыл бұрын
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.
@felixhaberle95224 жыл бұрын
@@syropian wow thanks didn't know that, interesting. do you have a link to read more about it?
@xoulrage4 жыл бұрын
amazing!!!!!!!!! I don't understand why people around me aren't as hyped as I am about Tailwind sigh...
@LuBre4 жыл бұрын
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.
@warangel5804 жыл бұрын
@@LuBre that's lazy and that's the point, "work smarter, not harder"
@outsider20974 жыл бұрын
@@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?
@LuBre4 жыл бұрын
@@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.
@outsider20974 жыл бұрын
@@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.
@SebastienBarrau3 жыл бұрын
This is Awesome!
@meljones29224 жыл бұрын
Your google has an Australian accent 🇦🇺❤️ Great video, keep it up!
@TailwindLabs4 жыл бұрын
haha yep!
@meljones29224 жыл бұрын
@@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!
@TailwindLabs4 жыл бұрын
@@meljones2922 Thank you so much for the kind words 🙏 Haha yep Deutsche Strassen with aussie accent is good fun!
@silvesterwali65653 жыл бұрын
I gonna use it now
@FreeFall733 жыл бұрын
tailwind is awesome
@stefanpfadt43532 жыл бұрын
Mate, if you could actually create the functionality for the "create stroies"that would be really AWESOME! ;)
@abedalraoufzeidan1461 Жыл бұрын
what is the keyboard abbreviation to write in multiple places
@simonswiss Жыл бұрын
On mac, it's `cmd` + `D`. Maybe ctrl + D on windows?
@kevvvm93354 жыл бұрын
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. 😆
@rahulmm77953 жыл бұрын
Hai Sir am a Student and love the lesson .
@jasonbrooks7372 жыл бұрын
thanks mate .. I learned cool things
@ArturoCampos4 жыл бұрын
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 😁
@TailwindLabs4 жыл бұрын
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.
@ArturoCampos4 жыл бұрын
@@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 🙂
@sudheshsankarkk2 жыл бұрын
Thanks for sharing 🙏
@nalakajayasena23434 жыл бұрын
Cool - thanks!
@parijke4 жыл бұрын
Loved the vid... thanks man!
@TailwindLabs4 жыл бұрын
Glad you enjoyed it 🙏
@TradewithAnkur2 жыл бұрын
Your videos are addictive. We have to have some plan to stay away from playlists of Tailwinds
@mohammadjavadi22832 жыл бұрын
Thanks.Please add Vue usability to play tailwind if possible.
@chiefdan074 жыл бұрын
Almost had me for a sec 😂
@Benrb073 жыл бұрын
How do you edit separate lines at the same time like that 😯
@MaulikParmar2103 жыл бұрын
Select and ctrl+d will let you edit multiple lines at once
@damercy4 жыл бұрын
Haha nice one there! 😂
@gagalady67673 жыл бұрын
thank you, it's awsome!
@CCV3343 жыл бұрын
How do you do a horizontal scroll?
@dinakanwamu56762 жыл бұрын
For some reason the background gradient isnt working for me please help
@C00ltronix3 жыл бұрын
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.
@yacobee4 жыл бұрын
can use ring for white ring?
@mibdev4 жыл бұрын
Please post stuff to Lbry as well!
@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 Жыл бұрын
You probably need to add `shrink-0` to your element then, to prevent the circle from getting any narrower than it should!
@10XAchievers3 жыл бұрын
Amazing
@wahyusa4 жыл бұрын
Wait, i've just install v2
@liamwinterton73703 жыл бұрын
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?
@dv4able4 жыл бұрын
How did you selected all img tags at once?!
@TailwindLabs4 жыл бұрын
Command + d will select any string that matches what you have currently selected - so I selected one img tag, and pressed 3x cmd + d 👍
@dv4able4 жыл бұрын
@@TailwindLabs ❤️
@THMok3 жыл бұрын
awesome !
@wouterdorgelo80454 жыл бұрын
RIP Bootstrap
@wobsoriano4 жыл бұрын
as much as I like Tailwind... Na, can't beat bootstrap 5
@TailwindLabs4 жыл бұрын
There's enough room in the world for both... and others! ❤️
@waldothedev3 жыл бұрын
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
@ZarisPlay9 ай бұрын
This is awsome
@CARUSAR214 жыл бұрын
Never using any other framework again. Wow.
@arbrahimbadsa55714 жыл бұрын
This is lit!
@none0n Жыл бұрын
Good video but can you add the IG animation and not the one you used
@GGGStalker4 жыл бұрын
Is the framework cost money?
@Xewl4 жыл бұрын
U forgot Linkedin, but yeah, looool :D
@AbhishekAngira4 жыл бұрын
i thought it's foo-shiya
@jailbirdx0x4 жыл бұрын
How to link Tailwind CSS if I am not using a framework? I mean just vanilla web development.
@kayodeoladipo77064 жыл бұрын
There's a CDN. tailwindcss.com/docs/installation#using-tailwind-via-cdn
@fabiothebest89lu3 жыл бұрын
@@kayodeoladipo7706 yes, anyway there are some disadvantages, so it's better to build tailwind css locally
@antonyalbitestapia8484 жыл бұрын
Jajajajajaja awesome, I love tailwind
@MrBask-ei4pu3 жыл бұрын
Well, I think this is is helpful.
@krishnendusengupta61583 жыл бұрын
I wonder what would happen to developers if cats didn't exist.
@TailwindLabs3 жыл бұрын
Capybaras are an excellent replacement
@MrAtomUniverse4 жыл бұрын
More please ... I need more examples :(
@rezkymaulana27824 жыл бұрын
Try it bro
@aislanarislou4 жыл бұрын
Please, give me more!!!!!! S2
@syakirinamin27884 жыл бұрын
Nice
@kris46374 жыл бұрын
how useful would this be to get a job?
@TailwindLabs4 жыл бұрын
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 👍
@MazinMMagid2 жыл бұрын
Who is the developer ????
@simonswiss Жыл бұрын
It's me! 👋
@alapanroy11144 жыл бұрын
Wow 😁😘
@borisbob3 жыл бұрын
u are best
@josue_ayala273 жыл бұрын
Crack man
@nyambe4 жыл бұрын
Wow
@TailwindLabs4 жыл бұрын
Meowww
@pranupranav62792 жыл бұрын
Cats🥰🥰🥰🥰🥰
@oyunadam28973 жыл бұрын
Hmmm, I guess this is was helpful.
@benzigarjs86074 жыл бұрын
Imagine creating these same with vanilla CSS , , 😆😆 Dead !!!
@LuBre4 жыл бұрын
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
@TailwindLabs4 жыл бұрын
@@LuBre Nice one! 👍
@j48784 жыл бұрын
Subscribed because of pet, jk
@Tendou-Gaming3 жыл бұрын
Ben awad cross over lol
@habibi94974 жыл бұрын
Fucha is difficult to pronounce .
@LuBre4 жыл бұрын
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
@nullpointer85533 жыл бұрын
how long did it take you? cause that's the important thing for most people
@LuBre3 жыл бұрын
@@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.