Should You Use Tailwind CSS?

Поділитися
Вставка
  • Опубліковано 14 чер 2024
  • Tailwind CSS is the most popular utility CSS framework, but should you use it? In this video I talk about what Tailwind CSS is, when it is useful, and if you should use it instead of Bootstrap or normal CSS.
    📚 Materials/References:
    Learn CSS Today Course: courses.webdevsimplified.com/...
    🌎 Find Me Here:
    My Blog: blog.webdevsimplified.com
    My Courses: courses.webdevsimplified.com
    Patreon: / webdevsimplified
    Twitter: / devsimplified
    Discord: / discord
    GitHub: github.com/WebDevSimplified
    CodePen: codepen.io/WebDevSimplified
    ⏱️ Timestamps:
    00:00 - Introduction
    00:19 - What Is Tailwind?
    01:31 - Tailwind Gives Flexibility
    02:35 - Adhoc Styles
    03:46 - Tailwind Imposes Design Limitations
    04:41 - Tailwind Is Easy To Customize
    05:43 - Tailwind Negatives
    #TailwindCSS #WDS #Tailwind

КОМЕНТАРІ • 801

  • @evansgate
    @evansgate 3 роки тому +86

    First project I got autonomy over I both introduced React and Tailwind CSS to our tech stack. I had little to no experience with both, and after a few months I can say I’d gladly work with both again in a heartbeat. I was always fairly good with CSS, so that helped

    • @rayanall7333
      @rayanall7333 Рік тому

      Where did u learn react ?

    • @degenyakuza
      @degenyakuza Рік тому +5

      @@rayanall7333 by building projects you don’t need to learn react you need to understand the vanilla javascript and es6 then you’re ready to go with the documentation of react.

  • @kettenbach
    @kettenbach 3 роки тому +690

    I built Kyle's hair using only CSS ☝️😀

    • @shreyas.jadhav
      @shreyas.jadhav 3 роки тому +24

      Can you share?

    • @avelinoparedes8786
      @avelinoparedes8786 3 роки тому +14

      LMFAO 🤣🤣🤣

    • @mareboinaravi5272
      @mareboinaravi5272 3 роки тому +35

      Kyle's was like:- concentrate on content not my Hair, lol😂

    • @Xaminn
      @Xaminn 3 роки тому +6

      Damn. I was gonna say he truly got hit by the Tailwind.

    • @Gailon1000
      @Gailon1000 3 роки тому +1

      impossible

  • @adityashukla7849
    @adityashukla7849 3 роки тому +119

    Bro you're like Google. You just drop the thing I'm thinking about and always at the right time.

    • @MR-su4di
      @MR-su4di 3 роки тому +6

      Unpopular opinion Kyle works for google in speach recognition depratment

    • @bobDotJS
      @bobDotJS 3 роки тому +2

      I was literally just searching vue-tailwind when I got the notification

    • @heyyounotyouyou3761
      @heyyounotyouyou3761 3 роки тому +1

      Maybe you both get the same recommendations

    • @The_SSS
      @The_SSS 3 роки тому +1

      Ikr! He made this video right when I was thinking about using Tailwind

    • @sougataghar1179
      @sougataghar1179 3 роки тому +1

      Same . I just got a job and they want me to learn tw

  • @MsMaciek
    @MsMaciek 3 роки тому +15

    I really like your videos. I remember when I started programming in NodeJS. I was thinking of zoom/discord clone for school (by using WebRTC or smth) so they don't have to use bad optimalized microsoft teams. Recently I watched your video about login/register page in nodejs. That all helped me to learn nodejs a lot. Thanks for your great videos, i wish you more subscribers.

  • @AlleyDev
    @AlleyDev 3 роки тому +12

    I built my last react project with tailwind and once I got used to it, I found it fantastic. So quick to get things styled.

  • @ZubairAhmed1024
    @ZubairAhmed1024 3 роки тому +251

    I would recommend :
    1. master CSS and Flexbox
    2. get used to a component-based framework (eg. React)
    3. make your life easier with Tailwind to create your components

    • @abdulazeezolanrewaju843
      @abdulazeezolanrewaju843 3 роки тому +13

      As for React, i pick ChakraUI in place of Tailwind

    • @ZubairAhmed1024
      @ZubairAhmed1024 3 роки тому +5

      @@abdulazeezolanrewaju843 oh yeah I built my blog with that. It's sweet! But even that is a layer above tailwind. If I'm not mistaken.

    • @husler7424
      @husler7424 3 роки тому

      @@abdulazeezolanrewaju843 is ChakraUI more powerful than Tailwind for React?

    • @abdulazeezolanrewaju843
      @abdulazeezolanrewaju843 3 роки тому +3

      @@husler7424 For me Yes, in the React World. you can also give it a try :)

    • @abdulazeezolanrewaju843
      @abdulazeezolanrewaju843 3 роки тому

      @@ZubairAhmed1024 Yep!!

  • @flikkr
    @flikkr 3 роки тому +10

    The timing couldn't be better, I literally just started looking into Tailwind tonight!

    • @generationwolves
      @generationwolves 3 роки тому +3

      Check out The Net Ninja's Tailwind playlist. It's a great jumping on point.

  • @BrantK147
    @BrantK147 2 роки тому +10

    Hey Kyle, what do you think about Material UI? I think learning that and Tailwind CSS would be ideal. One gives you the possibility to customize as much as you want, the other gives the ability to design a UI on the fly.

  • @tomi.mocnik
    @tomi.mocnik 3 роки тому +3

    Started using it couple days back (coming from vuetify and material UI) and I just love it. The speed I can build the UI is shockingly fast.

  • @etiennebruines467
    @etiennebruines467 3 роки тому +3

    I like using the apply-directive to create my own button-classes using Tailwind. I tried using Vue-Components to achieve the same, but that just does not work well beyond buttons. This way I can still stick to the classes defined by Tailwind, but "combine" them into my own .button or .input classes to ensure uniformity across the app.

  • @corbbing
    @corbbing Рік тому +2

    This was a great video, and it helped me understand exactly what Tailwind was really about. I rarely like videos or leave comments thanking people, but I did on this one.

  • @DanielWitch
    @DanielWitch 3 роки тому +1

    Nice video! I’ve been using tailwind for a side project recently and I fell in love with it. I was looking for something NOT bootstrap and material UI is just not my thing.

  • @re.liable
    @re.liable Рік тому +13

    Maybe I'll eventually take a look at Tailwind, but I'm more used to "component" libraries, so I kinda want to stick with Bootstrap for now. Its utility classes have also been sufficient for me so far. I want the project to compile with only the needed classes though, I think there's a tooling for that.

    • @khangle6872
      @khangle6872 Рік тому +2

      Bootstrap doesnt have css purging OR tree-shaking. And most tool that does it usually doesnt play well with bootstrap

  • @andrillaf
    @andrillaf 3 роки тому +7

    I didn’t realize there was something like this! I didn’t enjoy Bootstrap, so I actually went and made my own presents css, in the same way Tailwind works. This helps a ton!

  • @autocosm
    @autocosm 2 роки тому +72

    I hear so much about "not having to worry about design" and "keeping CSS small" and "composition over inheritance." Taken to their extreme, these concerns are adverse to design. I see why utility-first is great for full-stack devs on small projects or awkward rebels frustrated by less control, but it's a huge issue when devs try to introduce this to the tech stack of a years-old enterprise project that multiple hands touch.

    • @eugenereim456
      @eugenereim456 2 роки тому +17

      Actually Tailwind CSS have jit and can be easily added to already existing projects. You can quickly find guides for that.

    • @Kayzewolf
      @Kayzewolf 2 роки тому +7

      @@eugenereim456 But when it's just CSS properties as classes, what's the point?

    • @p11v
      @p11v 2 роки тому +2

      @@Kayzewolf Design system components

    • @chimerablack4913
      @chimerablack4913 2 роки тому +14

      @@Kayzewolf built in media queries, enforcing consistency in layout and spacing, and less actual code to write. You can see examples on their website where in raw css it would be 20 lines, whereas in tailwind its 4 lins of html and a few classes.

    • @khangle6872
      @khangle6872 Рік тому +4

      @@Kayzewolf you dont want to search for 50 css file to find out exactly what is applied to the one random div

  • @sprtlife6261
    @sprtlife6261 Рік тому

    Great and simple explanation. Exactly what I was looking for. Thanks!

  • @alimaxion2005
    @alimaxion2005 3 роки тому +11

    The main point he mentioned "if you are not good at CSS" tailwind will look awkward to you

  • @silentblackhole
    @silentblackhole 2 роки тому

    Great to the point video. Thanks man!

  • @tripphouse8165
    @tripphouse8165 Рік тому

    Very informative video! thanks Kyle!

  • @PeterSedesse
    @PeterSedesse 2 роки тому +53

    Tailwind is for people who don't know what the C stands for in CSS.

  • @zakuguriin4521
    @zakuguriin4521 Рік тому +11

    Tailwind 3.1 seems pretty legit. Being able to use the square brackets to modify your own custom css is really powerful. It was a feature in one of the older versions, but required you to put a special "jit" feature in your configuration file.
    Now it's built in. If the default value of the padding defaults are exactly what you need you can just do p-[1.2rem] and it will work. You can also create custom classes for things that will be used more than once by using an '@layer components' import in the CSS file below the Tailwind imports and then @apply after you class delcaration.
    @layer components {
    .myClass {
    @apply p-5 h-10 mx-[50px]
    }
    }

    • @wrux
      @wrux Рік тому +1

      But why write that in a style sheet when you can just use regular styling. I think margin-inline: 50px is way more readable and does the same thing.

    • @wrux
      @wrux Рік тому

      ​@@ronaldtorres3366 But what benefit does a long line of @apply statements have over regular CSS? Especially when using the [] syntax as it's not even consuming any design tokens. It's just using Tailwind for the sake of using Tailwind, which isn't a great way to work.
      IMO, it ends up creating a codebase with a higher technical debt and with really gross git history. All of the git diff in commits will be on a single line, as apposed to having 1 CSS rule per line and seeing the commit changes much easier.

  • @nastygambler2522
    @nastygambler2522 3 роки тому +1

    you are reading my mind thank you so much !!!!!🔥🔥

  • @madeyeQ
    @madeyeQ 2 роки тому +14

    Mostly I prefer to write my own css as all these libraries have way more stuff in them than what I need.
    But I do use both bootstrap and tailwind css from time to time.

    • @eugenereim456
      @eugenereim456 2 роки тому +2

      Tailwind comes with integrated postcss plugin that allows you remove all unused classes and your css file can be less than 50kb

    • @liquidrider
      @liquidrider Рік тому

      ​@@eugenereim456 there have been ways to do that way before tailwind. Using tailwind adds more CSS than it removes because you can't shorthand tailwind. (try margin:0 auto)

  • @naomipham7533
    @naomipham7533 Рік тому

    Very informative video. Thank you!

  • @andyackon2743
    @andyackon2743 Рік тому

    first time watching a video of you talking with emotions and am happy to see that i watch the whole things smiling...

  • @philipgolding8199
    @philipgolding8199 2 роки тому +8

    i tried a css challenge and the hard part wasn't deciding which properties to use but how to name the divs and tailwind solves that problem and i loved it.

    • @Maleficarum999
      @Maleficarum999 Рік тому

      I'm always amazed that there are stratum of people who have such a limited imagination that they can't come up with random arbitrary names.

    • @jason_v12345
      @jason_v12345 Рік тому

      @@Maleficarum999 Seriously. Worst case scenario, just call it wrapper. Need two? Outer and inner wrapper. But honestly anyone who struggles with thinking of appropriate abstractions is probably not very good at software design. That's what software design IS.

  • @ArifRahmanHakimCethol
    @ArifRahmanHakimCethol 2 роки тому

    Hi, thanks for clear explanation. I want to ask one question, if i already use one ui framework, let's say bootstrap or material ui, can i combine all of those ui framework with tailwind? what is your opinion?

  • @irlonterblanche1639
    @irlonterblanche1639 2 роки тому +1

    Great video Kyle. I've been using Bootstrap, but it sounds like Tailwind is the way to go for my needs. Thanks!

  • @codeclubhub5290
    @codeclubhub5290 2 роки тому

    Kyle, your content is fabulous!

  • @mamtaagarwal1009
    @mamtaagarwal1009 3 роки тому +6

    You don't have to copy paste the styles. You can have a custom class suppose btn.

  • @whyredvince
    @whyredvince 2 роки тому

    Good level headed and unbiased advice

  • @abhinandankhilari9729
    @abhinandankhilari9729 3 роки тому +25

    Got one doubt. If Tailwind is a utility-based CSS framework which means one CSS class per property, how it is different from writing plain CSS inline styles?

    • @yegorzakharov8514
      @yegorzakharov8514 2 роки тому +5

      if you look into it, it offers more, specifically its a design system which you define. Plus, its not inline styles, theyre actual CSS class declerations.

    • @thanhnguyenhoai2727
      @thanhnguyenhoai2727 2 роки тому +2

      consistency, says you have new members in the team, if they already know Tailwindcss classes, it will be easier for them to get started

    • @thanhnguyenhoai2727
      @thanhnguyenhoai2727 2 роки тому +1

      because Tailwindcss offers the same toolset for all users, easier for every one to understand what classes others are using mean without having to surf through the css files

    • @NN-qj4sk
      @NN-qj4sk 2 роки тому

      @@Forien it's a lil faster

    • @amansagar4948
      @amansagar4948 2 роки тому +2

      a dev mostly start avoiding design or architechture fatigue and also decision fatigue, for me vanilla css creates the former one, suppose you've two divs which share some common styling like border or flex, in css you get a choice to just include the common styling once, and that's where the design fatigue comes, now ive to look at the whole fking code to try to optimize the best minimal css which is fking pain, in tailwind you use flex property in both the divs seperately, more work but more clarity, also when you start styling a div, it gives you more perspective about the children elements and you basically starts imagining better how the site will look, you get better at css altogether

  • @ErShikharChauhan
    @ErShikharChauhan Рік тому +1

    You make things start making sense.. 👏

  • @sreekumarmenon
    @sreekumarmenon 3 роки тому +8

    I did my last 2 projects in Tailwind CSS and is very productive! I was able to finish the project very fast and also I now enjoy styling.

    • @Carnivore69
      @Carnivore69 2 роки тому +6

      Here's hoping no one besides you ever needs to work on it.

    • @genteka5106
      @genteka5106 2 роки тому +2

      How big is your 2 projects?

    • @sreekumarmenon
      @sreekumarmenon 2 роки тому +1

      (tech stack- next.js, tailwind, react-query, prisma, postgres)

    • @genteka5106
      @genteka5106 2 роки тому +2

      @@sreekumarmenon I mean how long these two took to complete, and how big the amount of users the app serves

    • @sreekumarmenon
      @sreekumarmenon 2 роки тому

      @@genteka5106 I had posted this info, looks like youtube deleted it because i had linked to the app. it is a medium sized project that took couple of months . not sure how the number of users impact the choice of CSS framework.

  • @80Vikram
    @80Vikram 3 роки тому

    Great video, thanks for your efforts. God bless you

  • @marcolancellotti8114
    @marcolancellotti8114 Рік тому +39

    When I started programming, I was told about the importance of "separation of concerns". Never use style inline in HTML, because it had to be clean and fully separated from CSS. Well, Tailwind is more or less like inline style on the tags. But wasn't that a bad thing?

    • @___jd
      @___jd Рік тому +6

      Agreed, utility class frameworks are trash

    • @sagarkhadka8326
      @sagarkhadka8326 Рік тому +1

      @@___jd Ok sir

    • @giorgiotran4850
      @giorgiotran4850 Рік тому +7

      I think tailwind can be useful when you're using something like React, where emphasis is on reusability of components. I wouldn't really see myself using it with vanilla JS though since it can get messy.
      EDIT: I realized that he talked about what I wrote towards the end. I should've finished watching the video before commenting...

    • @marcolancellotti8114
      @marcolancellotti8114 Рік тому +1

      @@giorgiotran4850 yes, I agree with that and I understand but still, remember that there are other ways to scope components style (i.e. Vue' scoped style). However, I didn't want to criticize Tailwind, it was a sincere doubt.

    • @dynerushd7517
      @dynerushd7517 Рік тому +6

      I have worked with and without tailwind for a some time, and oh man is it useful. If you know what you are doing, tailwind gives the ability to instantly know the structure and style of a component just by looking at it (the class naming is done great). It gives you an easy file (tailwind.config.js) to theme your whole web app. And gives you the ability to really customize your styling, "unlike bootstrap" with custom values. Going with the flexibility of having both (HTML, CSS) in one file (or component) makes your life easier. Instead of switching files between HTML and CSS or scrolling up and down the document like with (styled components), tailwind lets you focus on the element itself and once you get to know the framework, makes iteration incredibly fast. I recommend tailwind to almost anyone in frontend web dev, since I haven't seen any downsides to using it. Saying it looks messy is just not having the understanding to read what the classes are doing.

  • @TheMetalMag
    @TheMetalMag 3 роки тому

    thank you for another enlightening video

  • @codeaccuna
    @codeaccuna 3 роки тому +2

    Just In Time compiler coming in hot to add edge cases without bulding all directives, all pseudoclass utilities and maaaaad speed. People be complaining about the extra markup; yet, they do not realize the massive flexibility. Plus anything tailwind labs touches is gold. Headless UI and heroicons are great examples

  • @rizanmohomed8029
    @rizanmohomed8029 3 роки тому +7

    👌
    We can create component class like `.btn` in tailwind css also

  • @tim_t
    @tim_t 3 роки тому +8

    Best thing I love about Tailwind is that it lets me do SFC in React. No more context-switching between a JS file and a CSS file.

    • @aaronrothwell7615
      @aaronrothwell7615 2 роки тому +2

      Which is why i like svelte, its all in one file; html, js and css :D

    • @blazi_0
      @blazi_0 2 роки тому

      I agree 👍

    • @blazi_0
      @blazi_0 2 роки тому

      @@aaronrothwell7615 I'm react developer and sevelt looks so wired to me lol 😂

    • @Manas-co8wl
      @Manas-co8wl 6 місяців тому

      @@aaronrothwell7615 Fellow svelter! Svelte + Tailwindcss is such a powerhouse it should be industry standard at this point. Although.. with svelte, what with css being scoped to a siongle page and all, the problems of native css itself is mitigated, so much so that I actually could do away with Tailwind in some occasions.
      I don't know. Maybe it's just Svelte that's the real MVP here.

  • @MrAwesomeBart
    @MrAwesomeBart 2 роки тому

    You had my curiosity. But now you have my attention.

  • @victorlongon
    @victorlongon 2 роки тому +1

    Tailwind is good, i had the same skepticism before and after using i changed that, but tailwind has a thing that it does not work too great with dynamic props for instance, for that something like styled components is a better approach. I am between these 2. Tailwind is easier to prototype things quickly and very scalable, while css in js is more ergonomic

  • @BartMolkenboer
    @BartMolkenboer Рік тому +19

    TailwindCSS is the best update on CSS libraries I have seen in the last years. This is just pure art and after using it for 2 projects now I am entirely in love with it. ♥

    • @mmadictos5356
      @mmadictos5356 Рік тому

      tailwindcss sucks! pure bullshit and dirty code.
      Imagine the situation when you see lines and lines of crap mixed with logic when working with tsx or jsx. besides having to put classes to everything.
      To this day nothing is better or faster to write than scss.

    • @TheRealPingu
      @TheRealPingu Рік тому

      ​@@mmadictos5356 tailwind is soo clear

  • @therigglet3548
    @therigglet3548 2 роки тому +7

    What I don't understand is, if each Tailwind class is like using a CSS property then why not just write CSS?

    • @stevenalexander6262
      @stevenalexander6262 2 роки тому

      it's shorter and faster to do? Don't know honestly, I'm quite new

    • @imagiro1
      @imagiro1 2 роки тому +3

      The one advantage is, that you are able to easily change _everything_ with a certain property (like a 10px margin) in one go. Imagine, your designer tells you, that all 10px-margins should now be 12px. Or you want to create a responsive layout, where (controlled via media queries) for a certain screen size all 10px-margins should be 7px.
      Tailwind (and similar) adds another layer of abstraction and allows you to think about the exact design later after building the structure of your website by adjusting the actual values of the tailwind classes.
      But of course there are other ways to get the same result. You can use something like sass that offers various ways to accomplish the same (variables, mixins), or plain css variables.
      Also there are downsides of using generic css-classes. Of course your HTML becomes more complex and less readable. Having 10 classes in each element instead of maybe 1-2 bloats your HTML. Otoh you immediately get an idea what an element might look like just from looking at the list of classes it uses.
      In the end, tailwind (or the general idea of using generic css-classes) has advantages and disadvantages, like basically everything. It depends on the actual use case. If you want build a website with a very specific design, it might make more sense to write your own specialized set of classes, and/or use something like sass to combine those classes into the classes you will actually use in your elements.
      If you want just a quick site where the exact look does not matter so much, you can use bootstrap. If you want a more generic approach, or the classes bootstrap provides are not sufficient enough (because bootstrap doesn't have all the elements you need) tailwind might be the perfect solution.

    • @therigglet3548
      @therigglet3548 2 роки тому +1

      @@imagiro1 Thanks for taking the time to explain the above. It's made everything a lot clearer!

  • @flo_dev
    @flo_dev 2 роки тому +7

    I love Tailwind CSS but sometimes it makes my component "heavy" to read since you have a long list of class though the div and then my eyes mixing" these big lines of CSS classes with the component logic. The way I found to separate the workflow of component with the styling is to implement and add a scss module to my component (with the @apply func) and then have styling and component logic in two separate ways. This way I can work on my function without having my eye reading the Tailwind classes inside the component

    • @FaizanAnwerAli
      @FaizanAnwerAli 2 роки тому +1

      Then what's the point of using apply directive in CSS file when you can write css directly in CSS file.

    • @flo_dev
      @flo_dev 2 роки тому

      @@FaizanAnwerAli then you did not really understand what Tailwind CSS is about. It’s not only writing utilities inside the html but it’s all about productivity and time saving by simplifying your life with CSS. I don’t remember be able to deal with responsiveness so easily that tailwind does with a simply md:class rather than writing classic CSS. Grid management is also another subject where tailwind will help you earn some time

    • @FaizanAnwerAli
      @FaizanAnwerAli 2 роки тому +2

      @@flo_dev last month I wasted more time with tailwind than I actually do without it. It's useless

    • @kinstar
      @kinstar Рік тому

      @@FaizanAnwerAli 😅

  • @valentineemmanuel6337
    @valentineemmanuel6337 2 роки тому

    I think you can also define specific spacing with bootstrap

  • @vgnxjhd3447
    @vgnxjhd3447 2 роки тому

    Bro I dig your whole channel, you helped me a lot of times. But what I want to see now is you playing that jackson! I've also got one. Cheers :)

  • @kelvinonkundi270
    @kelvinonkundi270 3 роки тому

    nice content i watch all the ads to help simplify the web

  • @closertothecosmos3519
    @closertothecosmos3519 2 роки тому

    I'm a beginner (but i have pretty good knowledge of css) - would you rather use tailwind or vanilla css which i currently use and would you recommend for me to start using tailwind over vanilla css?

  • @bozoclown36
    @bozoclown36 2 роки тому

    great video. you told me everything I wanted to know + no bs

  • @shashwatpal8626
    @shashwatpal8626 3 роки тому +2

    Just used Tailwind in my recent project and I admit it's really addictive and awesome

  • @shanahjrsuping7344
    @shanahjrsuping7344 3 роки тому +1

    Bootstrap has utilities classes for doing this. I have been using them quite a bit. It may not be as in depth as tail wind but it goes quite alot.

  • @4321rpraveen
    @4321rpraveen 3 роки тому +1

    Sir how does it fit with material design..
    I read the bootstrap is not supported unless u use mdbbootstrap

  • @nitin-code-comedy
    @nitin-code-comedy 3 роки тому +33

    Pure css is always the best. Sass makes it much easier.

    • @tanzimibthesam5861
      @tanzimibthesam5861 3 роки тому

      Lol loops inside CSS thanks

    • @KillerKyuubi
      @KillerKyuubi 3 роки тому +1

      @@eotikurac not really

    • @gonzalobruna7154
      @gonzalobruna7154 Рік тому +2

      I have a huge project made with scss, and it's totally a pain. sometimes a class is used in multiple components and if you delete one component you are not sure if you need to delete the scss because you might delete something important that will completely destroy other components, pretty difficult tho.

  • @jptavas
    @jptavas 3 роки тому +1

    To the point. Thank you.

  • @joanapaulasoliveira
    @joanapaulasoliveira 3 роки тому +3

    I love tailwind. Custom CSS plus tailwind is all I ever need.

  • @AndreMury
    @AndreMury 2 роки тому +12

    I understand that Tailwind has some features that bootstrap doesn't. But I've been using bootstrap for several years and if you don't want, you don't need to use the built-in components because you can use only the classes just like Tailwind. The component library of bootstrap is a flexible library that's easily overridable. I totally prefer to write some CSS rules instead of having 5 lines of class names in each div.

    • @nikyabodigital
      @nikyabodigital Рік тому +1

      Tailwind pretty ez to learn also there's tailwind config where you can literally define css rules.
      For example you can set h1 to have certain classes engraved in it so you don't have to write everything. Literally righting just (no classes) will load your defined rules.
      Also tailwind can be used with native css which means they have same flexibility level vs bootstrap. Also hover states focus and element states. Really simple in tailwind.

    • @AndreMury
      @AndreMury Рік тому +2

      @@nikyabodigital You don't need tailwind to write css rules to tags. My point is that whoever made this video, never actually used bootstrap.

    • @AndreMury
      @AndreMury Рік тому

      @@JackyPup People today are getting mad with consolidated tools that have more than 2 yrs old, and all I see are buggy apps everywhere 😂

  • @NNNedlog
    @NNNedlog 2 роки тому

    Thanks a lot Kyle

  • @sricharandonkada6611
    @sricharandonkada6611 3 роки тому +14

    Please compare tailwind vs custom CSS classes

    • @MaxTheFireCat
      @MaxTheFireCat 3 роки тому

      Its very similar but a lot easier to use

    • @ZubairAhmed1024
      @ZubairAhmed1024 3 роки тому +1

      Soto easier to work with and alot harder to look at 😂

  • @magpinybo7524
    @magpinybo7524 3 роки тому +1

    It will take me time to change but am still stuck with MDB. Good content 👍

  • @rickyraihana5683
    @rickyraihana5683 3 роки тому +3

    I just use tailwind for 3 months ago... it's amazing

  • @masterpo1465
    @masterpo1465 3 роки тому +49

    Why don't you make tailwind CSS tutorial.. we are interested in it.

    • @babakfp
      @babakfp 3 роки тому

      You don't know CSS

    • @marcorieser
      @marcorieser 3 роки тому +1

      The docs are very good and they also have a good channel here: ua-cam.com/channels/Oe-8z68tgw9ioqVvYM4ddQ.html

    • @gadgetboyplaysmc
      @gadgetboyplaysmc 2 роки тому

      No need for tutorials actually. If you know CSS, you can easily grasp Tailwind in a day.

    • @Carnivore69
      @Carnivore69 2 роки тому +1

      Anyone that understands CSS will grasp Tailwind in 5 minutes... and then not use it :)

  • @cyberprompt
    @cyberprompt 2 роки тому

    I wrote the same thing using jQuery back in maybe 2013. We used it on only one large project farmed out to a 3rd party. My Boss didn't like it but I thought it was a cool idea. Called it Stylizr as many plugins for jQ had that kind of name convention. Also a huge processing overhead looking at every element with the class of "stylizr" and then parsing out all the other shorthand to replace with longhand "style" information the browser could use. Also, completely non-reusable. Great if you don't want to open multiple files or scroll to your section but that's about it.

  • @jonjino
    @jonjino 3 роки тому +1

    across frontend, backend and data engineering tailwind is probably the best framework I've ever used. highly and well opinionated while allowing full control and flexibility.

  • @pixel7038
    @pixel7038 2 роки тому

    What can we use for dev tools extensions to save time? I used it all the time to change css properties quickly. Whats the workaround for this?

  • @jakemorales7949
    @jakemorales7949 2 роки тому +2

    Great video! Can you make a video on how you customized the fonts?

    • @ozten
      @ozten 2 роки тому

      That would be cool! There are some good details at tailwindcss.com/docs/font-family#font-families on replacing the 3 default font family values sans, serif, and mono with your own or defining new family names like display / body.

  • @souvikkundu
    @souvikkundu 2 роки тому

    Thank you 👍

  • @pixelkiller67
    @pixelkiller67 3 роки тому

    thanks very well explained

  • @Carnivore69
    @Carnivore69 2 роки тому +1

    When I write reusable components with/without a js framework, I use semantic markup and rarely need more than 1 class on the parent element. It's called UI consistency.

  • @tesla1772
    @tesla1772 3 роки тому

    It wiil be awesome if you make a series on tailwind css from beginner to advance stuff

  • @kristopherlawson3893
    @kristopherlawson3893 3 роки тому +8

    First Kyle I've seen without a hole in his wall.

  • @constantine9074
    @constantine9074 Рік тому

    you really helped me !!!! I'm going with Bootstrap " This Time" ...(I'm a noob at the moment)

  • @sherothkar5809
    @sherothkar5809 Рік тому

    Which component library can we use for tailwind css ? Or we need to create components using tailwind css plz help me

  • @kladdelic
    @kladdelic Рік тому +5

    Over my time as a web developer, which is a decade now, I tried many flavors of CSS. Started vanilla, got into Bootstrap, both 2013/2014, then Foundation with BEM and SCSS around 2016. In early 2018, I stumbled upon Tailwind for the first time. And yeah, got the same prejudices as many: too many classes, looked hard to learn, bloated CSS file etc. Really thought it wouldn't get anywhere.
    Later that year, around September, I watched some Laracasts and Jeffrey building some project with it. I rethought, and tried it out on some designs. What a game changer it was! As a WordPress custom theme dev, it still integrated neatly. Have been using it ever since, and never been looking back. No writing too much custom CSS, no time-consuming naming of classes. Happy Tailwind user, essentially. 🙂

  • @tolkien11
    @tolkien11 3 роки тому +1

    Dude could you please make a tailwind tutorial series where you make components? I would love to see that!

    • @JEsterCW
      @JEsterCW 3 роки тому

      learn css so you will be able to do that, kekw

  • @jamisonr
    @jamisonr 2 роки тому +64

    For older developers, as in having been a developer since the mid 90s, I can say when CSS came out we became conditioned to avoid things like "names" and "functionality" as part of the name...like text-red is just a no-no because you can't then change the color to blue...So ok you can have text-blue as well, but at that point, I still fail to see the point. I'd rather just write the css myself (scss actually, which makes several of these issues easier). I'm starting a new project so I thought I'd at least see what tailwind is about, but I can't get past the very essence of what it does because it clashes with 20+ years of not doing that! Though to be honest, I'm quite ingrained in boostrap because it made sense to me when it came out. I understood what it was trying to do while adhering to those principals older developers had developed.

    • @NickOlkhovik
      @NickOlkhovik 2 роки тому +10

      You can specify (and you should) your design system colors like "primary-button-color" or "main-color" and so on.

    • @lmanson10
      @lmanson10 2 роки тому +15

      Couldn't agree more. Just ended a Node.js Express Mongo course, my first year at studying programming, all with JS. I can't imagine using a CSS framework that just turns css properties or a mix of them into predefined classes. Makes no sense for me, just master CSS and learn how to reuse classes or combine them and that's it.

    • @fuhoo5836
      @fuhoo5836 2 роки тому +4

      "new" is tragically seen as better unfortunately...

    • @Btechdom
      @Btechdom 2 роки тому +1

      Part of being a developer these days is frustratingly forgetting about the stuff ingrained that you weren't suppose to, that you are encouraged to do now smh.

    • @llothar68
      @llothar68 2 роки тому +3

      It’s not the first time the IT industry was wrong about something for 20 years before learning from failures. I only say waterfall model and itanium (very long instruction sets architecture) and mainframes

  • @JohanDG7
    @JohanDG7 2 роки тому

    boostrap: btn-primary bg-dark
    To make the btn-primary a defined darker color?
    I dont see the big difference :o
    pl-7 m-0 etc also exists in bootstrap?

  • @jotasenator
    @jotasenator 3 роки тому

    hey ...you told me you will and you did it...nice to have your opinion

  • @haukurorsson833
    @haukurorsson833 2 роки тому +2

    Funny how times change. Not so long ago, web devs focused on clean markup with no uneccessary classes/ids. Set a class/id to the parent and style all sub elements using child selectors etc. There was even a term for developers which over-used divs and classes - they had "divitis" and "classitis" ! :-)

  • @mimosveta
    @mimosveta 3 роки тому +1

    But. if I have to go into html and add a class to an element just to do a padding on that element, how's that different than doing inline css? wouldn't I still have to go back into html and change each occurrence of the class, just to change the padding?

    • @delulu6969
      @delulu6969 3 роки тому

      Inline styling has higher specificity. With utility classes, you're even able to extract the classes to your own named class. There's no issue with specificity. With Tailwind, you don't think of how to 'change' the padding, but you think of how to set the initial padding. Tailwind comes with its own CSS reset. Plus, people who use Tailwind are usually working with a framework. All classes are scoped to a particular component. To change something, you just open your component file and change everything there. No need to go to and from from stylesheets and component files.

  • @ramasabajo5360
    @ramasabajo5360 2 роки тому

    6:43 - Use can just create your own classes in your input css file and then @apply tailwind to it. for example a .btn class that has a line of tailwind classes.

  • @dewalian6489
    @dewalian6489 3 роки тому +2

    I never use bootstrap and always make my own css because its just a template and its a pain to edit it. I never heard of tailwind before i watch this video, and now i really want to learn this. From what i heard from you in this video, tailwind is basically shorter + easier inline css, which is what i need.

    • @weaver3636
      @weaver3636 3 роки тому +2

      Kinda in the same boat. I prefer doing it the traditional way since I could use the practice anyway.

  • @WarframeCrunch
    @WarframeCrunch Рік тому

    I don't know what tailwind css have, but using bootstrap and coding with classes and creating my own css styles I realized that Bootstrap is very good for creating container and in columns content, it would take a lot of time to write it on my own so bootstrap have some good stuff, but if it comes to writing something that will be presented on the site more than once, it's better to write your own CSS code.
    Because for example if you use 8 the same buttons and everywhere you added class="px-4 py-2 bg-blue bg-lightblue-hover d-inline-block mx-auto transition-0_3s border-around-5"
    then client or you will want to change to a different style, then you have to edit it 8 times or copy paste and find all places where you used the same button.
    But if you wrote your own code where you added only primary-button, you just edit styling of that class and it changes in all 8 places.
    The only classes I like to use separatly is mx-auto, everywhere I put in buttons display: inline-block to they are automaticly moved to left, so mx-auto adds margin left and right auto so the button is in center and class ml-auto makes button going to right side of container.

  • @stevenharder308
    @stevenharder308 Рік тому

    Tailwind with React or vanilla JS = chef's kiss. I haven't had much luck getting the JIT features to work well with other libraries/frameworks, but the classes are almost worth it on their own.

  • @j4nch
    @j4nch 3 роки тому +2

    I like the options it allows, but still, I've some concerns. There are some things that are repeated accross differents components(typically some primary/secondary colors). I've the impression that for each component I will have to specify that I want some orange color for the action button, for the header, some cards, ... and the day I need a different shade, I will have to change it everywhere. How is this adressed? This is typically an issue with color theme, especially since those day we have to make one dark and light version for every app.
    Also, even if I've a Vue app behind, there are some UX concepts(like ONE primary Call to Action button, and other secondary buttons, which should be differentiated, and it feels like I should implement myself a button with 3-4 variation that change half of the styles. Seems to be a lot of pain even for a component as small as a button.
    Also, it seems there are no extra components like datepicker, searchbox, ... Does this mean that everybody redo the same things over and over?

  • @yulianaalbisu5207
    @yulianaalbisu5207 3 роки тому

    The reason I'm loving programming

  • @watchernode6138
    @watchernode6138 Рік тому +2

    I think it depends on use case, tailwind is good for component based js frameworks. If you change tailwind classes for one re-used component, it works well. But, if you are coding a landing page or some server side rendered template, where the html block u write isn't repeated. You are better of with boostrap Or foundation.
    You know why jquery is used most? Theme developers of WordPress, shopify, magento, Drupal, etc use jquery. Jquery gives max backwards compatibility. They also use bootstrap in theme development.

    • @coderlicious6565
      @coderlicious6565 Рік тому

      shopify uses jquery for themes? I understand that its uses Remix ( react ) now.

  • @Merlinke91
    @Merlinke91 2 роки тому +1

    Can you use Tailwind CSS with React Bootstrap? I have already a project with React Bootstrap, but its just looks awfull, so I want a littlebit better design w Tailwind.

  • @JenuelDev
    @JenuelDev 3 роки тому +3

    What I like about tailwind or the windicss, is that it makes my css files optimized... especially that tailwind uses JIT mode that only grabs the css classes that you need which makes my css files smaller.

  • @purushottamkumar1704
    @purushottamkumar1704 3 роки тому +1

    What's your views on material ui for react

  • @younjojny
    @younjojny 2 роки тому

    For plain CSS, HTML & JS you can create a class for a reuses set of tailwind classes.

  • @TonyW86
    @TonyW86 3 роки тому

    I've not used tailwind bare in mind but.. how can you apply different themes with tailwind, so I could have a lot of components and use them in a different projects, I want to apply a theme (different colours, sizes etc) depending on the site they're on. I would currently use sass with variables, and just change the variables to change primary button colour, site padding etc etc. In a small app or site changing them at component level would be ok, but on massive site this would be painful. Even if variables were used, and if I do that I might as well use normal CSS (sass), create classes with well defined mixins and variables which would give greater control.

  • @oldgsteel
    @oldgsteel 2 роки тому

    I try tailwind and i love it 💪🏽 is so easy

  • @piyushaggarwal5207
    @piyushaggarwal5207 2 роки тому

    is there anything like SASS to avoid repetition in CSS if I don't use in React

  • @ducksquidbat8315
    @ducksquidbat8315 2 роки тому +17

    Tailwind is great until you need to do a massive change to your codebase.
    We used tailwind in my last company and it caused a big headache when we wanted to use the same components with a different styling system whilst maintaining the old one.
    I like tailwind but that was such a pain that I avoid it now

    • @blazi_0
      @blazi_0 2 роки тому

      Comeon bro it must not be that hard . I know tailwind code looks massive sometimes but not that bad .
      Maybe I didn't work at any company before and don't know what do u mean by that
      Can u explain what was the hard part about tailwind ?

    • @nguyenhanh9479
      @nguyenhanh9479 2 роки тому +3

      you could say the same with pure css

    • @IAMTHEMUSK
      @IAMTHEMUSK 2 роки тому +3

      That sounds like a problem in your code not due to tailwind

    • @archmad
      @archmad 2 роки тому

      in your component, you should place a prop that can modify the styling, if you are using React

  • @pankajravi9146
    @pankajravi9146 3 роки тому

    hmm, ill use it in my next website development !!

  • @animanaut
    @animanaut Рік тому

    not a webdev but now i know what the fuss is all about. thx. btw this compostional pattern is well established in other industries like games with ECS where your "object" is really just the sum of all your components. there is no real object anymore. just like a "button" that is just the compositional sum of all its classes in your example

  • @nader_makram
    @nader_makram 3 роки тому +6

    first of all, great video.
    At 6:42 tailwind actually have a solution for this, you can make one class combining several classes and use that one instead.

    • @shawnlee6775
      @shawnlee6775 3 роки тому

      Yeah you can use that with Tailwind installed as a npm module with @apply -classes.

    • @ToddDunning
      @ToddDunning 3 роки тому

      Yes but by that time I've already called a predefined Bootstrap class and it's done.

    • @precumfrank7597
      @precumfrank7597 3 роки тому

      @@ToddDunning ...which looks like shit. That's fine in some cases though, but if you're making a public website you don't want it to look like every other bootstrap site.

    • @Yaqins
      @Yaqins 3 роки тому

      @@precumfrank7597 you do realize that you can change all the value over the Sass file right? If you don't want/like the default theme of BS, you can customize it without having to re-writing the whole framework.

  • @heidji
    @heidji Рік тому

    thats why I love MUI for type safety

  • @sapindersingh1165
    @sapindersingh1165 3 роки тому

    I’m using styled-components cuz I’ve been heavily working with react for the past few months. Do you think I need to learn Tailwind?

    • @Fachuro
      @Fachuro 2 роки тому +1

      No - styled-components is more powerful, and will allow you more flexibility without putting 500 classes on each node in your project because people essentially try to write each css property as a class...