Tailwind in 100 Seconds

  Рет қаралды 796,560

Fireship

Fireship

Күн бұрын

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/jaredcw...
🤓 Install the quiz app
iOS itunes.apple.c...
Android play.google.co...
🔥 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

Пікірлер: 988
@Fireship
@Fireship 3 жыл бұрын
We blew through 10K likes in no time 🤯 What is a challenging UI you'd like to see implemented with Tailwind?
@devtk
@devtk 3 жыл бұрын
how about a discord clone 🙃
@helderlimaletsgo
@helderlimaletsgo 3 жыл бұрын
A product browsing page with cart and dark and light mode
@myeljoud
@myeljoud 3 жыл бұрын
A responsive layout with state management (hover, focus …etc)
@felixpuscasu5625
@felixpuscasu5625 3 жыл бұрын
Anything that shows the usage of pseudo classes, and dark/light mode
@fabiankunz5619
@fabiankunz5619 3 жыл бұрын
a responsive navigation bar / menu
@TheCoderCoder
@TheCoderCoder 3 жыл бұрын
No one can out-Fireship Fireship 🤩
@bineetnaidu5146
@bineetnaidu5146 3 жыл бұрын
True
@codeaperture
@codeaperture 3 жыл бұрын
Legend 😭❤️
@mcp866
@mcp866 3 жыл бұрын
I feel like I'm missing out on something here
@themagneticguy
@themagneticguy 3 жыл бұрын
@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.
@mcp866
@mcp866 3 жыл бұрын
@@themagneticguy Oof, he _thinks_ he's being a clever programmer...
@stanstanstan
@stanstanstan 3 жыл бұрын
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.
@jhonbaptist1845
@jhonbaptist1845 2 жыл бұрын
Thanks! I'm just learning css and will follow your advice
@johnme60
@johnme60 Жыл бұрын
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.
@E-Nigma_
@E-Nigma_ Жыл бұрын
Thanks for the insight!
@WyzrdCat
@WyzrdCat Жыл бұрын
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.
@MobiusCoin
@MobiusCoin Жыл бұрын
​@@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.
@FlorinPop
@FlorinPop 3 жыл бұрын
Show them how it’s done! 👏 We stand by the Fireship!
@klutch4198
@klutch4198 3 жыл бұрын
🔥🔥🔥
@Aalok464
@Aalok464 3 жыл бұрын
Yes
@DesignCourse
@DesignCourse 3 жыл бұрын
Tailwind in 99 Seconds -- Taught by Jon Frok. Coming soon.
@lakshaysharma10
@lakshaysharma10 3 жыл бұрын
Marketing++
@SirDamatoIII
@SirDamatoIII 3 жыл бұрын
… or shameless plug.
@tahalyousfi
@tahalyousfi 3 жыл бұрын
And I'm doing a python requests in 4 minutes (should I be proud of this because it's longer ?) soon Inchaallah
@metamodern7648
@metamodern7648 3 жыл бұрын
Oh, Hi youtube guitar player. What are you doing here?
@flogginga_dead_horse4022
@flogginga_dead_horse4022 3 жыл бұрын
@@metamodern7648 You forgot large snake handler :P
@tahirsaeed99ts
@tahirsaeed99ts 3 жыл бұрын
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
@abdelhakimmhioul9711
@abdelhakimmhioul9711 3 жыл бұрын
TailwindCSS is awesome, the JIT Mode makes it shine more
@tigrankhachaturian8983
@tigrankhachaturian8983 3 жыл бұрын
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
@lonelybyte5881
@lonelybyte5881 3 жыл бұрын
@@tigrankhachaturian8983 That's what JIT fixes... Re-"compiling" the CSS takes ~50-100ms with JIT enabled (compared to 6-10 seconds on my machine)
@vora320
@vora320 3 жыл бұрын
@@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?
@kittymedusa3618
@kittymedusa3618 3 жыл бұрын
@@tigrankhachaturian8983 Tailwind JIT or WendiCSS already fixed this problem. You’re behind the times.
@tigrankhachaturian8983
@tigrankhachaturian8983 3 жыл бұрын
@@kittymedusa3618 I guess, last time I used tailwind it was 7 months ago.
@klutch4198
@klutch4198 3 жыл бұрын
The only channel that can deliver "100 seconds of...". Original Gangsta
@Asuuri
@Asuuri 3 жыл бұрын
No one can copy the beautiful style and the amazing way of storytelling from Jeff / Fireship!🔥🙌 Insane Video as always!
@nickang6647
@nickang6647 2 жыл бұрын
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!
@arpitbharti6245
@arpitbharti6245 3 жыл бұрын
Tailwinds biggest advantage is it makes me significantly more productive when writing styles. It's just much faster.
@outis99
@outis99 3 жыл бұрын
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
@bryanltobing
@bryanltobing 3 жыл бұрын
@@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..
@pierre3467
@pierre3467 3 жыл бұрын
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.
@AmxCsifier
@AmxCsifier 3 жыл бұрын
No context switching is what worked very well for me
@outis99
@outis99 3 жыл бұрын
@@bryanltobing Never seemed "too" long for me but I see your point
@simonswiss
@simonswiss 3 жыл бұрын
Holy moly this video was incredible! You addressed all the major concerns in such a concise, almost soothing way. Amazing stuff! 🎉🎉🎉
@xiuxiu624
@xiuxiu624 3 жыл бұрын
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
@codeSTACKr
@codeSTACKr 3 жыл бұрын
LOVE IT 😍
@mryechkin
@mryechkin 3 жыл бұрын
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
@devjourney99
@devjourney99 Жыл бұрын
but what about the long markup ?
@copsarebastards
@copsarebastards Жыл бұрын
@@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.
@sugoonese4024
@sugoonese4024 9 ай бұрын
​@@devjourney991:26 this apply thing helps abit i think to give it a seperate from html and deal with duplicate code (disclaimer idk Tailwind)
@CodyEngelCodes
@CodyEngelCodes 3 жыл бұрын
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*
@alfredoperez2420
@alfredoperez2420 3 жыл бұрын
"If we hit 10k likes, then will do Tailwind beyond 100 seconds..." 9 hrs since video published and has 11k 😎
@akshaykumarsharma
@akshaykumarsharma 3 жыл бұрын
Now its 15k
@cheshy2289
@cheshy2289 2 жыл бұрын
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.
@theworldismine7788
@theworldismine7788 Жыл бұрын
how much css should we learn before tailwind?
@iamnatis
@iamnatis 3 жыл бұрын
CSS classes should never describe how something looks. That was the whole point of the early days of moving away from and designs. Create simple HTML that can be changed just via CSS because CSS typically is easier to tweak than HTML is once in production.
@fatgolem69
@fatgolem69 3 жыл бұрын
Almost 800k subs Congrats in Advance Fireship
@ore_bear8045
@ore_bear8045 3 жыл бұрын
I have never encountered anyone with such an ability to synthesize knowledge, great work !
@LinkEX
@LinkEX 3 жыл бұрын
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.
@osmanidiazcruz1771
@osmanidiazcruz1771 3 жыл бұрын
Waiting for: "How to create amazing 100 seconds videos" video. Keep the amazing work!
@uziboozy4540
@uziboozy4540 3 жыл бұрын
How to create 100 seconds videos in 100 seconds
@cappuccinopapi3038
@cappuccinopapi3038 3 жыл бұрын
He has a tutorial on how he makes videos on his personal channel
@abhinav.sharma
@abhinav.sharma 3 жыл бұрын
I use TailwindCSS in production. Really flexible.
@IsThatNiek
@IsThatNiek 3 жыл бұрын
Same and if I have the choice I'm never going back
@garvitsingh6988
@garvitsingh6988 3 жыл бұрын
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.
@JohnyMorte
@JohnyMorte 3 жыл бұрын
Shout out to tailwind documentation. One of the best in business :-)
@muhammadharris4470
@muhammadharris4470 3 жыл бұрын
I disagree. They have got the order wrong
@h3ftymouse
@h3ftymouse 3 жыл бұрын
It's so unbelievably good I love it Algolia's incredible documentation searching is just the cherry on top
@JuanIGN95
@JuanIGN95 3 жыл бұрын
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
@demonicious_
@demonicious_ 3 жыл бұрын
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.
@ghostkick267
@ghostkick267 Жыл бұрын
Hi, how long did you work with Tailwind or how many projects did you start and finish with it to estimate your opinion?
@17-4-4
@17-4-4 Жыл бұрын
?@@ghostkick267
@kokiiito
@kokiiito 3 жыл бұрын
tailwind literally was everything i was looking for on a css utility framework
@mrZeeeee
@mrZeeeee 3 жыл бұрын
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
@theworldismine7788
@theworldismine7788 Жыл бұрын
how much css should we learn before tailwind?
@jacob.developer
@jacob.developer 3 жыл бұрын
Good stuff! I’d like to hear more about design systems.
@qweasdy-pc6ql
@qweasdy-pc6ql 2 жыл бұрын
These videos are so great and often fill perfectly the gap between what I read vs. my understanding. Thanks a lot!
@socketbyte5348
@socketbyte5348 3 жыл бұрын
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.
@hahabanero
@hahabanero 3 жыл бұрын
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
@bersK00
@bersK00 3 жыл бұрын
Guys, we gettin' a tailwind tutorial from the man himself with this kind of growth!
@HamidShaikh-hw2um
@HamidShaikh-hw2um 3 жыл бұрын
easy to hear about new technology within 100 seconds only from this awesome channel...!
@ChessFlix
@ChessFlix 3 жыл бұрын
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.
@4.0.4
@4.0.4 3 жыл бұрын
Isn't this against the whole concept of separating style and content? Like, there used to be a tag, and we don't do that anymore for a reason.
@EddyVinck
@EddyVinck 3 жыл бұрын
Finally, I just started learning Tailwind, great timing 🙌👌😀
@LinkEX
@LinkEX 3 жыл бұрын
As someone that merely kept hearing about it but never tried it, those were definitely 100 seconds well spent.
@klutch4198
@klutch4198 3 жыл бұрын
I swear Fireship always knows what we need at a quantum level
@m.minkov
@m.minkov 3 жыл бұрын
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!
@m.minkov
@m.minkov 3 жыл бұрын
@@user-tu6oh2op9s Reported
@ThePowerRanger
@ThePowerRanger 3 жыл бұрын
You are so getting to 10,000 likes, I need that tailwind tutorial.
@rhettmelton
@rhettmelton 3 жыл бұрын
and in less than 5hrs no less lol
@alexzahrai4703
@alexzahrai4703 6 ай бұрын
Whenever someone asks me to explain Tailwind I send them this video. Great explanation!
@DThompsonDev
@DThompsonDev 3 жыл бұрын
Came here just so I can watch the true 100 second explanation, twice, and like the OG creator of the 100 second series.
@klutch4198
@klutch4198 3 жыл бұрын
DT! Waddap doe!!!!
@MrSamkots
@MrSamkots 3 жыл бұрын
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 👍🏻
@SuboptimalEng
@SuboptimalEng 3 жыл бұрын
CSS never "clicked" for me until I started using Tailwind. Great into!
@modz9711
@modz9711 3 жыл бұрын
Same
@divyanshu3149
@divyanshu3149 3 жыл бұрын
Same for me. Everyone should try it at least one.
@patroclusTractors
@patroclusTractors 3 жыл бұрын
Really?
@naveennamani2
@naveennamani2 3 жыл бұрын
Yep, in a way I learned css using tailwind
@patroclusTractors
@patroclusTractors 3 жыл бұрын
I hate tailwind
@Krishnan172
@Krishnan172 3 жыл бұрын
You help us in knowing & catching up with the fast-paced tech world on the go. Without wasting time is a super plus point.!!
@mawu4511
@mawu4511 3 жыл бұрын
We definitively need a &Beyond video or full tutorial about tailwind. Great Video as always ! 🔥🔥🔥
@paulwhiterabbit
@paulwhiterabbit 3 жыл бұрын
I'm not a fan of inline styles since it is usually a workaround when there are conflicts. But if you can put CSS properties-like in class="", then you certainly can put them in style="". There's one feature that the vanilla CSS absolutely needs though, merging CSS rules like @apply. But if you're just gonna combine CSS properties-like, then the standard CSS rules already does that.
@bootlegbam
@bootlegbam 3 жыл бұрын
Amazingly concise. Love it!
@myeljoud
@myeljoud 3 жыл бұрын
This how u really do it in 100sec, keep up the great work
@iq0578
@iq0578 3 жыл бұрын
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.
@viv8870
@viv8870 3 жыл бұрын
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
@sidhantsrivastava7426
@sidhantsrivastava7426 3 жыл бұрын
I was just looking for good CSS frameworks. Fireship is the GOAT
@BobRossRightHand
@BobRossRightHand 3 жыл бұрын
Make sure to check out JIT if you're going with Tailwind, makes life easier
@tahalyousfi
@tahalyousfi 3 жыл бұрын
There is a huge and massive difference between you and naz (especially the voice pitch), Naz looks more like Naza (or even Nasa)
@LeeWalton_1999
@LeeWalton_1999 3 жыл бұрын
wait there are two voices on the channel?
@tahalyousfi
@tahalyousfi 3 жыл бұрын
@@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
@LeeWalton_1999
@LeeWalton_1999 3 жыл бұрын
@@tahalyousfi Ahh thanks for clearing it up haha makes sense now :)
@tahalyousfi
@tahalyousfi 3 жыл бұрын
@@LeeWalton_1999 you're welcome hhhh
@henrypowell3496
@henrypowell3496 3 жыл бұрын
@@tahalyousfi are you Algerian?
@levmedvedev
@levmedvedev Жыл бұрын
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 )
@AJ-1404
@AJ-1404 3 жыл бұрын
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 :)
@codeative
@codeative 3 жыл бұрын
"JIT" or just in time generation is the best in tailwind now and what makes it SMART and unique, as you can type dynamic class JIT like: - class="w-[762px] h-[918px] top-[-325px] right-[62px]" - class="grid-cols-[1fr 700px 2fr]" - class="text-[color:var(--mystery-var)]"
@sulejman2366
@sulejman2366 3 жыл бұрын
We need Nestjs + Angular because that might be iconic
@theoboldalex
@theoboldalex 3 жыл бұрын
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!
@talkdatrue
@talkdatrue 2 жыл бұрын
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”.
@AbhinavKulshreshtha
@AbhinavKulshreshtha 3 жыл бұрын
I thought bootstrap was bad, but tailwind is its own dedicated hell. - Team pure css (with sass mixins) forever. 🤣🤣
@Humpfinger
@Humpfinger 3 жыл бұрын
For real. The thought of trying to manage the css in this format gives me a fucking headache. Css ain’t hard y’all.
@BrianHayesOfficial
@BrianHayesOfficial 3 жыл бұрын
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:
@janosmarta8258
@janosmarta8258 3 жыл бұрын
Tailwind is in between css and bootstrap, its convenient as a convention between free creative design and controlled design. Install tailwind was a bit complicated however onto vite-react or vite-svelte frameworks but I know now the magic spells.:)
@DemPilafian
@DemPilafian 3 жыл бұрын
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).
@bk1507
@bk1507 3 жыл бұрын
I use tailwind at work. For me the big flaws is limitations of their API for css grid and animations, and it's hard doing any nested styles. Aside from that it's been a real pleasure to use.
@benjaminschneider
@benjaminschneider 3 жыл бұрын
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.
@lardosian
@lardosian 3 жыл бұрын
Refreshing to find a comment from someone not kissing his #ss, thanks.
@tpfang56
@tpfang56 3 жыл бұрын
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.
@forresthopkinsa
@forresthopkinsa 2 жыл бұрын
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
@thelastowitch
@thelastowitch 3 жыл бұрын
Your channel is a blessing for newbies.
@harshith_takkala
@harshith_takkala 3 жыл бұрын
Yes, we have got the real voice now 🔥
@RubberDentist
@RubberDentist 3 жыл бұрын
Tailwind tutorial would be awesome! Don't love writing CSS/Sass and love the concept and ease of use for Tailwind.
@braydoncoyer174
@braydoncoyer174 3 жыл бұрын
I've never clicked like so quickly
@paulkooffreh275
@paulkooffreh275 5 ай бұрын
Acevane the GOAT, that minor part was completely necessary
@soulninjadev
@soulninjadev 3 жыл бұрын
here is the original version!!!!
@khaledelhoushi8834
@khaledelhoushi8834 Жыл бұрын
I'd love it if you make a tailwind css tutorial. I really really need it. Please make it easy to understand and make it short.
@lukas.webdev
@lukas.webdev Жыл бұрын
I am currently working on a video about tailwind and I am probably going to post it this Friday... if you are interested in learning more about Tailwind CSS 😉
@lukas.webdev
@lukas.webdev Жыл бұрын
I just posted two videos about Tailwind CSS in 2023 - this should be exactly what you are looking for.😉
@v01c3
@v01c3 9 ай бұрын
“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
@superchargedchat
@superchargedchat 6 ай бұрын
Great for solo projects u can move way faster with tw. For team stuff not so good cuz readability.
@Wfmike
@Wfmike 6 ай бұрын
Dont know about you but i can think of a "modal" "dialog" class that looks n behaves in 20 different ways.
@crimsonderiv
@crimsonderiv 3 жыл бұрын
NO WAY the video I was waiting for dude. Great work as always 👍🏼
@WalterWoshid
@WalterWoshid 3 жыл бұрын
I tried bootstrap for a long time, but when I met tailwind, I had to break up with bootstrap. Tailwind is the best!
@shapelessed
@shapelessed 3 жыл бұрын
Maybe this channel isn't the go-to for supreme-level courses or tutorials, but certainly is the best place to easily make youself a list of technologies you wanna learn in a matter of minutes...
@rishabsharma5307
@rishabsharma5307 3 жыл бұрын
Jeff be like: It became personal for me
@kerimtim
@kerimtim 23 күн бұрын
Thank you man. Just swallowed the main concept of Tailwind
@srikanthac9458
@srikanthac9458 3 жыл бұрын
Okay let's get to 10k likes
@Gregorius421
@Gregorius421 3 жыл бұрын
1:23 @apply is a Tailwind specific directive. The CSS @apply was abandoned in 2017 and never worked with CSS classes, only custom properties. The two are often confused. @extend is what comes closest (also a dead proposal).
@GroudFrank
@GroudFrank 3 жыл бұрын
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.
@HekaFOF
@HekaFOF 3 жыл бұрын
Yeah I agree. I dont see tailwind as benefit. It feels like you are just inlining styles to html
@alibalba
@alibalba 3 жыл бұрын
I really enjoy these 100 seconds videos, thank you. Hoping you make the tutorial!
@tonymasse3887
@tonymasse3887 3 жыл бұрын
40 Likes so far. 9960 to go and we get our Beyond 100 seconds!
@mechaahcem1657
@mechaahcem1657 3 жыл бұрын
One of the best design tools i've ever used is chakra ui. It is so convenient to use ( for example with nextjs ). And as i'm an ex-wpf dev I got addicted to it very quickly
@kusayfarhan9943
@kusayfarhan9943 3 жыл бұрын
Tried Chakra ui briefly. Out of curiosity what do you use to cover for the missing controls from Chakra, for example date pickers, etc..
@bhupeshbhatt4334
@bhupeshbhatt4334 3 жыл бұрын
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
@alexander191297
@alexander191297 2 жыл бұрын
Tailwind plus Copilot plus SASS is just the most magical front end dev experience ever!!
@FlorianEagox
@FlorianEagox 3 жыл бұрын
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.
@BobRossRightHand
@BobRossRightHand 3 жыл бұрын
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
@RodrigoSalesSilva
@RodrigoSalesSilva 3 жыл бұрын
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.
@odorlessflavorless
@odorlessflavorless 3 жыл бұрын
@@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.
@VEOdev
@VEOdev Жыл бұрын
After looking for many CSS frameworks and tried many of them, I got hooked by styled components, for me it is just what I needed, no ugly html class no ugly looking files, clean and reusable code, combined with react components it is just heaven to work with specially someone like me coming from OOP background .
@bobaGogo
@bobaGogo 3 жыл бұрын
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
@arrowfunc3458
@arrowfunc3458 3 жыл бұрын
IMO css is harder than JS.
@bobaGogo
@bobaGogo 3 жыл бұрын
@@arrowfunc3458 nothing about css, js or web development is difficult. You don't even have to know any math or programming to do it
@faythe03
@faythe03 3 жыл бұрын
I love the concept behind Tailwind! I want to use it at work so much... The only thing I really need and Tailwind can't do is to generate separate CSS per page..
@GatoGordoSocialClub
@GatoGordoSocialClub 8 ай бұрын
I`ll stick to CSS....
@Chris-hb7xp
@Chris-hb7xp 4 ай бұрын
Heard
@dmdesigner_pg
@dmdesigner_pg 3 жыл бұрын
A Big fan. Best sitcom channel for developers.
@sadeepaalwis5938
@sadeepaalwis5938 3 жыл бұрын
omg did i learn whole css utility in 100 seconds love it awesome keep up
@yahayaoyinkansola8258
@yahayaoyinkansola8258 2 жыл бұрын
I have to admit, when you reached the part how tailwind is bundled, I was so shocked, that it would only compile what you used, so crazy!
@kevinhe8188
@kevinhe8188 Жыл бұрын
like your works buddy, really appreciated, keep going ! And happy new year
@jordancotter5885
@jordancotter5885 2 жыл бұрын
I'd recommend anybody trying a new tech watch Fireship's 100s video on it first. I tried tailwind, but it didn't go well because I didn't understand the fundamentals of it going well. I would have been so much better off taking these 100 seconds before starting. This vid is so good, he deserves a check from Tailwind for it. He addresses every single concern with Tailwind.
@mdkawsarislamyeasin4040
@mdkawsarislamyeasin4040 2 жыл бұрын
Right now I'm learning tailwinds even now I'm practicing it. And i saw you video 🥰 It's motivated for me
@maxjf1
@maxjf1 2 жыл бұрын
I absolutely hate in-line css disguised as class. It breaks entirely maintenance, even using componentization. But I would agree using tailwind with classes combined in one. I don't think I need helper class to do basic css, you avoid learning css to learn classes that in the end are just css. But having an design pattern of sizes and colors helps a lot
@SebastianWeinberg
@SebastianWeinberg 9 ай бұрын
Oh jeez! I take one look at classes like "text-center", "font-bold", and "text-green", and the first thing that goes through my mind is, "You just spent an inordinate amount of work to undermine the very reason why classes exist, in order to return to manually styling elements straight inside the HTML source, exactly like using the 'style' attribute - only less flexible and more convoluted." The whole god​dam​n *_point_* of CSS classes is to take the exact styling minutiae out of the HTML elements! What happens when the project owner decides at the last minute that green text just isn't right and everything has to be purple instead? You either have to go through all the elements in all the files that you annotated with "text-green", change them all to "text-purple", and hope you don't miss any or accidentally mess something up - or you have to edit the definition of "text-green" to produce purple text, thereby undermining the very existence of that class, and proving why you should have used a semantic name in the first place. This kind of silliness drove me nuts, when I worked in web-development, _10 years ago_ - and we're _still_ not past that?!
@mattmcgoo
@mattmcgoo 2 ай бұрын
Wow, I'm glad I finally found someone else that was thinking the same thing!
@sammy709
@sammy709 3 жыл бұрын
And once again, i started using tailwind like 2 days ago and now there's a video, you're reading my mind
@aaaaanh
@aaaaanh 3 жыл бұрын
Thanks for guiding me thru many big hurdles. Now I can start trying out tailwind.
@wykrytotrojana
@wykrytotrojana 3 жыл бұрын
I JUST LOVE FIRESHIP CONTENT !!!!!! The way you present information is astonishing.
@dukkcc2
@dukkcc2 Жыл бұрын
tailwind changed my life, this video made me discover it, thank you
@rafaelzasas9421
@rafaelzasas9421 3 жыл бұрын
This is awesomeness please give us more- I just remade my website with your NextJs course and tailwind for styling
PostCSS in 100 Seconds
2:13
Fireship
Рет қаралды 245 М.
Tailwind CSS is the worst…
3:55
Fireship
Рет қаралды 1,5 МЛН
Я сделала самое маленькое в мире мороженое!
00:43
Кушать Хочу
Рет қаралды 4,7 МЛН
Will A Basketball Boat Hold My Weight?
00:30
MrBeast
Рет қаралды 92 МЛН
Don't look down on anyone#devil  #lilith  #funny  #shorts
00:12
Devil Lilith
Рет қаралды 47 МЛН
小丑家的感情危机!#小丑#天使#家庭
00:15
家庭搞笑日记
Рет қаралды 33 МЛН
Do You Really Need Bootstrap or Tailwind?
8:28
Lama Dev
Рет қаралды 198 М.
Does Deno 2 really uncomplicate JavaScript?
8:55
Beyond Fireship
Рет қаралды 382 М.
10 regrets of experienced programmers
8:16
Fireship
Рет қаралды 1,4 МЛН
10 Tailwind Classes I Wish I Knew Earlier
13:31
Web Dev Simplified
Рет қаралды 189 М.
Should You Use Tailwind CSS?
7:47
Web Dev Simplified
Рет қаралды 357 М.
JavaScript Framework Tier List
40:57
Theo - t3․gg
Рет қаралды 352 М.
Learn TailwindCSS in 23 minutes
23:29
Smoljames
Рет қаралды 9 М.
How to OVER Engineer a Website // What is a Tech Stack?
11:20
Fireship
Рет қаралды 2,5 МЛН
The Easy Way to Design Top Tier Websites
11:54
Sajid
Рет қаралды 490 М.
I WISH I Knew These Tailwind Tips Earlier
9:15
Theo - t3․gg
Рет қаралды 191 М.
Я сделала самое маленькое в мире мороженое!
00:43
Кушать Хочу
Рет қаралды 4,7 МЛН