Tailwind in 100 Seconds
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2021
- Tailwind is a utility-first CSS framework for building websites. It takes a functional approach to web design by providing thousands of tiny classes to use directly in your HTML. Learn why web developers love tailwind in this quick breakdown.
🔗 Resources
Tailwind tailwindcss.com/
Tailwind Criticism dev.to/jaredcwhite/why-tailwi...
🤓 Install the quiz app
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
🔥 Watch more with Fireship PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font - วิทยาศาสตร์และเทคโนโลยี
![บุษบา - วงชานเมือง [LiveCoverVertion] Original : เมนทอล](http://i.ytimg.com/vi/Dm81sKcd9rs/mqdefault.jpg)
We blew through 10K likes in no time 🤯 What is a challenging UI you'd like to see implemented with Tailwind?
how about a discord clone 🙃
A product browsing page with cart and dark and light mode
A responsive layout with state management (hover, focus …etc)
Anything that shows the usage of pseudo classes, and dark/light mode
a responsive navigation bar / menu
No one can out-Fireship Fireship 🤩
True
Legend 😭❤️
I feel like I'm missing out on something here
@MCP Clever Programmer basically ripped off this video and called it a "inspiration".
They also ripped off the thumbnail style for HTML & CSS crash courses from Programming with Mosh in the past.
@@themagneticguy Oof, he _thinks_ he's being a clever programmer...
Tailwind in 99 Seconds -- Taught by Jon Frok. Coming soon.
Marketing++
… or shameless plug.
And I'm doing a python requests in 4 minutes (should I be proud of this because it's longer ?) soon Inchaallah
Oh, Hi youtube guitar player. What are you doing here?
@@metamodern7648 You forgot large snake handler :P
I absolutely love Tailwind. Incredible utility and makes building frontends incredibly quick. A word of advice, a strong understanding of plain css is required, this shouldn't be your first interaction with styling.
Thanks! I'm just learning css and will follow your advice
Absolutely true !! If you are just learning this is not for you. You will cripple your self if you start using this in your learning days. you will miss two much. I did the same and regretted , kept using boot strap for months and realized I didn't know a damn basic thing about css , I was a noob even after making few websites.
So In my perspective.
Use it : if you wanna learn backend and don't have time to code front end.
Use it: If you have made enough websites with simple css, and now you wanna explore more.
Thanks for the insight!
If you actually understand CSS then you will hate Tailwind and recognize it for the hacky garbage that it is. Styles belong in the style sheet, NOT in the markup.
@@WyzrdCatTailwind scales incredibly well. You can call the .relative utility a thousand times, it will only generate you that class once. Conversely, if you write it traditionally, your files gets bigger every time you write position: relative. This is true for every class you write.
Show them how it’s done! 👏
We stand by the Fireship!
🔥🔥🔥
Yes
The only channel that can deliver "100 seconds of...". Original Gangsta
Tailwinds biggest advantage is it makes me significantly more productive when writing styles. It's just much faster.
Exactly, instead of adding a class creating a new selector in css and applying all those styles you could do that in a fraction of the time with Tailwind
I've heard it's a great combo with Chakra UI
@@outis99 i don't like tailwind because it makes the classname super long..but i do love chakra ui with come with the same approach but by passing props instead. But chakra ui is coming with bigger bundle size and slow perfomance..
For almost the same davantage you have emmet that has not the long classes issue and result in classic CSS files readable by everyone.
You can also write tags with classes super quickly with Emmet.
No context switching is what worked very well for me
@@bryanltobing Never seemed "too" long for me but I see your point
"If we hit 10k likes, then will do Tailwind beyond 100 seconds..."
9 hrs since video published and has 11k 😎
Now its 15k
TailwindCSS is awesome, the JIT Mode makes it shine more
I honestly prefer working with styled components, you know why? Because from the point where you edit a file and it being updated in the browser usually takes around 7 seconds with tailwind
And 1-2 seconds without it. It's a game changer, especially if you just do the styling and need immediate feedback
@@tigrankhachaturian8983 That's what JIT fixes...
Re-"compiling" the CSS takes ~50-100ms with JIT enabled (compared to 6-10 seconds on my machine)
@@tigrankhachaturian8983 what about bootstrap? How long does it take compared to tailwind?
And another question if u want ofc, why people use tailwind and bootstrap while they can use css, arent the same thing?
@@tigrankhachaturian8983 Tailwind JIT or WendiCSS already fixed this problem. You’re behind the times.
@@kittymedusa3618 I guess, last time I used tailwind it was 7 months ago.
Holy moly this video was incredible! You addressed all the major concerns in such a concise, almost soothing way. Amazing stuff! 🎉🎉🎉
Recently I discovered tailwind. I thought it would be just like bootstrap (boring) But surprisingly I found it quite useful. It decreases development time exponentially.
React + Tailwind is very good combination
No one can copy the beautiful style and the amazing way of storytelling from Jeff / Fireship!🔥🙌 Insane Video as always!
LOVE IT 😍
btw, tailwind officially has its own language server along with great integrated tooling for both emacs and vim - that and jit compilation have made developing in tailwind extremely enjoyable
Yo, you should totally do an extended version of this. I would love to see tailwind beyond 100 seconds. I'm thinking about learning it.
These videos are so great and often fill perfectly the gap between what I read vs. my understanding. Thanks a lot!
I watching other 100 second tailwind videos but none of them seemed to do a great job at explaining it. This was concise, and the audio quality was *chefkiss*
Really all I wanted to know was "what's TailwindCSS's philosophy and how does it look in use?" and this video answered it perfectly. Great use of my 100 seconds. Thank you!
Almost 800k subs
Congrats in Advance Fireship
Hi, Fireship!
And thank you for your short videos: they're really handy. I was going to start to work when looked at frontend dev roadmap and got curious about the Tailwind )
NO WAY the video I was waiting for dude. Great work as always 👍🏼
Good stuff! I’d like to hear more about design systems.
I have never encountered anyone with such an ability to synthesize knowledge, great work !
Agreed. I feel like I just received more information than I would have in a long lecture.
Perfectly captures the main ideas, illustrated pros and cons, gave good examples, hints on practical usage, and even practical performance.
like your works buddy, really appreciated, keep going ! And happy new year
Amazingly concise. Love it!
Tailwind is amazing. Close to year using it now, and I can't imagine any other way of doing CSS. The class names are easy to remember, and with the tooling especially it becomes a breeze after a short amount of time. I'm at a point where I'm thinking in terms of Tailwind classes now whenever I'm building a new UI. This was not the case at all with Bootstrap and other similar libraries
but what about the long markup ?
@@devjourney99 it's ugly but there's not much difference between that and an ugly difficult to navigate css file with a million classes. I think tailwind actually comes out on top there because you can look at the element, see where it is in the document and see immediately what styles are being applied to it. but I'm not a pro so maybe it gets really nightmarish at a production level.
@@devjourney991:26 this apply thing helps abit i think to give it a seperate from html and deal with duplicate code (disclaimer idk Tailwind)
You help us in knowing & catching up with the fast-paced tech world on the go. Without wasting time is a super plus point.!!
I'm excited for the full tutorial on tailwind, I'm incorporating this on my Nextjs projects because of how granular and flexibility to use this. Thanks fireship you're the best!
We definitively need a &Beyond video or full tutorial about tailwind. Great Video as always ! 🔥🔥🔥
Guys, we gettin' a tailwind tutorial from the man himself with this kind of growth!
I really enjoy these 100 seconds videos, thank you. Hoping you make the tutorial!
Great video as always! Would be great if you can make a short video on chakra-ui as well, these two are definitely my favourites
This is why Chakra UI is so great to use, they don't provide a massive library of premade components (although it is pretty decently sized) but allow you to build your own stuff out of sensibly-defaulted components and props just like Tailwind. This is much easier than maintaining your own CSS (even with SCSS), especially when you're a fullstack dev.
Waiting for: "How to create amazing 100 seconds videos" video. Keep the amazing work!
How to create 100 seconds videos in 100 seconds
He has a tutorial on how he makes videos on his personal channel
just what I've been looking for, thank you for your work! Keep up!
easy to hear about new technology within 100 seconds only from this awesome channel...!
tailwind literally was everything i was looking for on a css utility framework
I was on a livestream when Adam got an idea to whip up bunch of utility classes in a loop using webpack and JavaScript and fast forward Tailwind was born
how much css should we learn before tailwind?
Finally, I just started learning Tailwind, great timing 🙌👌😀
As someone that merely kept hearing about it but never tried it, those were definitely 100 seconds well spent.
I swear Fireship always knows what we need at a quantum level
All that the world needs is more such 100-seconds videos...! Great stuff!!
Can you do JS async/await in 100 seconds please?
Edit: Found your 12 min video in async 👍🏻
Can't wait to watch your full Tailwind tutorial!
Tailwind is actually very easy to learn, i did similar framework for myself some time ago, but with just classes i need the most in my front
You are so getting to 10,000 likes, I need that tailwind tutorial.
and in less than 5hrs no less lol
This is awesomeness please give us more- I just remade my website with your NextJs course and tailwind for styling
Im working with Tailwind and this video just.... resume ALL in 100 secs. Amazing. Also I learn something new about prod and dev perfm. Thanks
I've never clicked like so quickly
I use TailwindCSS in production. Really flexible.
Same and if I have the choice I'm never going back
The best thing about your videos is that even if they are on a topic I have knowledge about, I ALWAYS learn something new. Didn't know about css @apply directive until now. Thanks Jeff!
There’s no such thing as @apply in CSS.. it was a proposal but the specification has been abandoned: “due to being generally a bad idea”.
Fireship is the real OG. No one can beat your style, presentation, background music and the best thing, your voice, which is something you can hear all day.
I never decided to learn a CSS framework like Bootstrap or Material UI because it just took me longer to get to my end result. I had to recustomize the elements anyway and the CSS3 seemed powerful enough to do what I wanted. But Tailwind CSS changes the game. This is for me exactly what a CSS framework should be in the age of CSS3. I would definitely add it to my stack.
how much css should we learn before tailwind?
Shout out to tailwind documentation. One of the best in business :-)
I disagree. They have got the order wrong
It's so unbelievably good I love it
Algolia's incredible documentation searching is just the cherry on top
Not specific to Tailwind but I just wanna say that your youtube channel is amazing. Thank you for all the hard work you put into your videos, they're always CLEAN!
@@user-tu6oh2op9s Reported
Brilliant. Short and sweet!
In my opinion, Tailwind really works best with JavaScript frameworks as you mentioned.
Using it with a conventional approach, with normal templates is a nightmare. And if you're gonna apply the directives to a class... you may as-well just write the CSS on your own.
Still, favorite CSS Framework by far.
Hi, how long did you work with Tailwind or how many projects did you start and finish with it to estimate your opinion?
?@@ghostkick267
This was a great quick explanation, thank you!
Whenever someone asks me to explain Tailwind I send them this video. Great explanation!
We need Nestjs + Angular because that might be iconic
here is the original version!!!!
Thanks! This video really helps me to understand what, why and how to use Tailwind CSS. I think Tailwind really shines when you use it with functional based component framework like you said in your video.
omg did i learn whole css utility in 100 seconds love it awesome keep up
Came here just so I can watch the true 100 second explanation, twice, and like the OG creator of the 100 second series.
DT! Waddap doe!!!!
Yes, we have got the real voice now 🔥
You are the first one who made Tailwind look promising to me! Thank you! I'll try it.
Your channel is a blessing for newbies.
Facts:
The reason these videos are so good is not just because of the awesome editing, but is also because too much time isn't spent on such a simple concept.
Exactly. If I'm learning a new topic, then I'd like a brief overview/summary first, before deciding if I want to delve into more
It's much easier to read and maintain HTML when the HTML is a semantic representation of the data (without any styling information).
All those Tailwind classes for styling in the HTML look like a maintenance nightmare (basically the same problem as Bootstrap --- enticing until you have to go back and make changes).
Thanks for guiding me thru many big hurdles. Now I can start trying out tailwind.
Wow! Really good summary. 👏
There is a huge and massive difference between you and naz (especially the voice pitch), Naz looks more like Naza
(or even Nasa)
wait there are two voices on the channel?
@@LeeWalton_1999 No I mean the one in Clever Programmer's video (they did tailwind in 100 seconds as well ) and it was honestly terrible
@@TechWithTaha Ahh thanks for clearing it up haha makes sense now :)
@@LeeWalton_1999 you're welcome hhhh
@@TechWithTaha are you Algerian?
Correction: with the new JIT (Just-in time) mode, your development size will be exact same low size of production. Checkout more on their website or the YT video they made.
Awesome video as always :)
Great content, as usual with your channel
feel like i learned so much in 100 seconds. Great job explaining!
Jeff be like: It became personal for me
Thanks for the video. I don’t like it so far, but I’m able to write my own CSS just perfectly fine. I guess this is for people which struggle with CSS. But I might be wrong on that.
Refreshing to find a comment from someone not kissing his #ss, thanks.
I recently used tailwind for a school project that I did last minute. It's nice when you need to code a responsive layout snip-snap, but it is 100% a css framework for people who hate css 😂. I prefer to use Sass in most cases.
I think that people who struggle with CSS actually wouldn't get much out of Tailwind since it often maps directly to actual CSS rules
You're the best! I'm just working with Tailwind and learned about @apply just from your video. Thank you!
I'd LOVE to see more explanation on the subject of Tailwind!!! :D
Okay let's get to 10k likes
CSS never "clicked" for me until I started using Tailwind. Great into!
Same
Same for me. Everyone should try it at least one.
Really?
Yep, in a way I learned css using tailwind
I hate tailwind
This how u really do it in 100sec, keep up the great work
Tailwind tutorial would be awesome! Don't love writing CSS/Sass and love the concept and ease of use for Tailwind.
I thought bootstrap was bad, but tailwind is its own dedicated hell.
- Team pure css (with sass mixins) forever. 🤣🤣
For real. The thought of trying to manage the css in this format gives me a fucking headache. Css ain’t hard y’all.
I love the utility concept, however, the implementation is awful. Even with the fake postCSS dependent “@apply” option. Also I find nothing more tedious than giant config/theme files that are never easy to maintain. While sass can suffer this too, I think the approach needs to be a base set of variables that can filter down to a greater theme through an actual design language vs tediously changing and managing every variable.
As an example: color themes. Maybe pick 1-3 primary colors and then have a full palette generated for use as variables. Can it be edited at all levels? Sure, but the power of just being able to change some basic design principles and build out an entire design document from that seems better in the end.
The greatest problem with that is people defaulting to similar designs and everything being a repeat of the bootstrap effect, however if the system can do enough to base a unique theme around a few high level variables, then it really can come down to the application of utility styles implemented in specific components vs generic ready-made components.
It’s not an easy problem given the nature of CSS, but tailwind just seems like a way to get things done without any understanding of what is being done, while making maintainability a nightmare all over again:
I tried bootstrap for a long time, but when I met tailwind, I had to break up with bootstrap. Tailwind is the best!
Yeah there we go, 4h and already 8.5k likes (including me, love your content) :D! Already looking forward for the full tutorial
I JUST LOVE FIRESHIP CONTENT !!!!!! The way you present information is astonishing.
I literally wrote "Look into tailwind" on this weeks to-do list YESTERDAY. HOW DOES HE DO THIS?!?
he built a spying app
using 10 different frameworks + firebase, of course
40 Likes so far. 9960 to go and we get our Beyond 100 seconds!
As always, great content! 😄
A Big fan. Best sitcom channel for developers.
“CSS is hard, design is hard, and naming your classes in the same way is virtually impossible”. Been doing all 3 ok and think TW is hot garbage so far. Designed for someone just out of a bootcamp perhaps. Open to changing my mind, good luck
Great for solo projects u can move way faster with tw. For team stuff not so good cuz readability.
Dont know about you but i can think of a "modal" "dialog" class that looks n behaves in 20 different ways.
A lot of customization cannot be possible in tailwind , In my internship , I used tailwind for the project. Many time I had to use custom CSS
Thank you so much for this video. Yesterday I was starting to develop a React web app and this tool is helping me a lot to create a responsive web without major effort
I love your work ! Straight to the class
It's a very useful tool but I'll reject it for the same reasons I reject Bootstrap and all the other similar frameworks; I just prefer using CSS. I love having granular control over my code. It also forces me to learn more about CSS, how rules are implemented and why they react the way they do. For me, the difference between using Tailwind vs vanilla CSS is the difference between being able to create a sword by learning how to blacksmith vs 3D printing one.
To be clear here, I'm not saying that it takes less skill to use or that you aren't a good developer if you use it - there are people lightyears ahead of my skills with CSS that use frameworks. I'm just saying I have a preference for vanilla CSS and don't much like the obfuscation. This is also only a "CSS thing" for me. I don't feel the same way about programming languages and frameworks.
Yeah I agree. I dont see tailwind as benefit. It feels like you are just inlining styles to html
I really hate things like tailwind or Bulma. CSS is just not that hard, transferable everywhere, and scales really nicely if you take a thoughtful approach, especially with something like sass. Tailwind code is harder to read and edit and just not worth it.
For me it saves a lot of time staying in the same context, also when working at companies, most of them used tailwind/bootstrap to make consistency really simple
I agree, for high scalable websites using bootstrap or tailwind just not worth it, but for "fast sites" that will not grow that large and dont have so much complexity, using tailwind saves time, so it's a matter of knowing when to use and when not to.
@@RodrigoSalesSilva So I was thinking about building a beautiful portfolio website for myself . And I searched and Google bought me to this video. So I can use Tailwind to build a small portfolio website right? I had used bootstrap quite a long time back . But I just want something new.
Finally!. I waiting this for a long time
Here comes the full length tutorial.... Way to go!
How TF is css hard. It amazes me how easy web development is. I think it's funny how web devs even go as far to call themselves engineers
IMO css is harder than JS.
@@arrowfunc3458 nothing about css, js or web development is difficult.
You don't even have to know any math or programming to do it
I`ll stick to CSS....
Heard
I just want to say, your videos sre realy useful and motivational! Thanks for making this masterpiece.
Thanks for the great content as usual. Really missing the "... and beyond" where you have time to explain why apply is bad and why the component strategy is so important
Thanks! That made my decision for the next project extremely easier!