I didn't realize THIS about Tailwind...

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ก.ย. 2024
  • I've talked about Tailwind a lot on this channel. Was I wrong the whole time? Kinda.
    Link to the book: www.refactorin...
    ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
    Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links
    S/O Mir for the awesome edit 🙏

ความคิดเห็น • 298

  • @t3dotgg
    @t3dotgg  ปีที่แล้ว +250

    Things I forgot to mention:
    - I have been using tailwind every day for 2 years
    - I have dearly loved it since ~1 week into using it
    - I was about to buy the book before getting it gifted, I've wanted to read it FOREVER and the discount was incredible
    - I still don't like ChakraUI
    Carry on :)

    • @roobs456
      @roobs456 ปีที่แล้ว +7

      All my ChakraUI haters stand up

    • @TypedefDev
      @TypedefDev ปีที่แล้ว +13

      Whats wrong with ChakraUI

    • @roobs456
      @roobs456 ปีที่แล้ว +9

      @@TypedefDev The whole thing doesn't feel good to me. Turning jsx elements into react components. Having css properties as component props. Certain situations you need workarounds for e.g. overlays and it's a huge faff. Bad defaults (imo). It feels unintuitive. Everything about tailwind on the other hand feels intuitive and it's easy to customise.

    • @Michael-Martell
      @Michael-Martell ปีที่แล้ว

      What book?

    • @Michael-Martell
      @Michael-Martell ปีที่แล้ว

      Ahhh 1 minute I’m. Thanks. I’ll check it out.

  • @markogartnar5658
    @markogartnar5658 ปีที่แล้ว +532

    I noticed this when I accidentally made my app look not ugly.

    • @t3dotgg
      @t3dotgg  ปีที่แล้ว +86

      Tbh underrated comment

    • @Jangeroo
      @Jangeroo ปีที่แล้ว +6

      that was actually so funny and accurate at the same time

    • @faraonch
      @faraonch ปีที่แล้ว +6

      So true. It's just nice, right. "Look mum, I am a designer"

    • @dugger8439
      @dugger8439 ปีที่แล้ว +1

      this is so accurate. I couldn't understand how all this inline css i was writing was turning out better than any other design I've attempted.

  • @aaaaanh
    @aaaaanh ปีที่แล้ว +193

    Me writing some tailwind classes and then saw the title: 🫥 i’m in danger

    • @poke_champ
      @poke_champ ปีที่แล้ว +16

      don't be sheep. be you

    • @AnnCatsanndra
      @AnnCatsanndra ปีที่แล้ว +23

      @@poke_champ Being concerned about a potential shakeup of habits doesn't imply being a sheep in the sense of blindly following advice.
      I mean yeah, if the tools are working for them, there's no need to change up. But sometimes checking out fresh opinions can lead to improvements.

    • @BlacKlyExactly
      @BlacKlyExactly ปีที่แล้ว

      Same

    • @neatfastro
      @neatfastro ปีที่แล้ว

      Why? It shouldn't if it's sailing your ship?

    • @HenrikWassdahl
      @HenrikWassdahl ปีที่แล้ว +1

      @@neatfastro well can your ship fly and has dual reusable rockets?

  • @ehenoma7891
    @ehenoma7891 ปีที่แล้ว +98

    Tailwind has more than anything helped me to stay more motivated while working on frontends.
    Less switches between CSS and HTML files and generally an easier way to express the designs
    I need to implement. Even tho the full version of this book is a bit on the pricier side I still
    bought it cause the productivity gain from using tailwind more effectively and being more
    confident in designing good UIs (even without referencing mockups) is worth it.
    Thanks for telling us about it. ✌🏾

    • @martiananomaly
      @martiananomaly ปีที่แล้ว +4

      Can relate with the motivation part. It has helped me as well. The fact that I'm able to build prototypes so fast gives me immense pleasure and that futher fuels my motivation leading to a nice positive feedback loop.

    • @badpotato
      @badpotato ปีที่แล้ว

      tailwind is nice.

    • @twothreeoneoneseventwoonefour5
      @twothreeoneoneseventwoonefour5 ปีที่แล้ว +1

      What's with the wrapping dude. I have 4/3 screen and your manually wrapped lines look ugly here. I see a full line, and then you wrapped one single word to a new line, then again a full line in your comment, repeating.
      You should add responsiveness to your youtube comment lol. Generally never manually wrap youtube lines until you end the sentence/thought.
      (the time when you see someone is talking about css while failing at styling at the same time)

    • @ehenoma7891
      @ehenoma7891 ปีที่แล้ว +1

      @@twothreeoneoneseventwoonefour5 sorry
      I will change my wrapping style
      in the future to make it more
      compatible with different devices.
      UX is an important aspect of
      TH-cam comments.

    • @twothreeoneoneseventwoonefour5
      @twothreeoneoneseventwoonefour5 ปีที่แล้ว +2

      @@ehenoma7891 yeah, definitely
      do that
      it will certainly
      make you a better
      developer/
      designer.

  • @xxmythmakerxx
    @xxmythmakerxx ปีที่แล้ว +35

    one thing that dreaded me about frontend was the constant switch from js to css files but tailwind made frontend so much easier for me and even motivated me to get better at frontend to the point that now im more interested in designing than backend

  • @EvertJunior
    @EvertJunior ปีที่แล้ว +12

    Tailwind is one of the best things that happened in the web development. It literally feels like I'm drawing in Figma, there's no context switching, I draw a shape and immediately style it the way I want. It transformed responsive layouting from pain to joy, all while retaining the full creative control that is often taken away by popular UI libs. I can't wait to read this book.

  • @networkedsapien1229
    @networkedsapien1229 ปีที่แล้ว +23

    I'm new to Tailwind but it feels like a css cheat code ...I love it

    • @networkedsapien1229
      @networkedsapien1229 ปีที่แล้ว +6

      It makes styling faster for me..even adding dark mode was so easy but of course css still works

    • @raphaelgorbach1476
      @raphaelgorbach1476 ปีที่แล้ว +6

      @@ikilledthemoon Cause naming your CSS in a meaningful way is annoying

    • @parassharma7041
      @parassharma7041 ปีที่แล้ว

      @@ikilledthemoon same here I love using saas

  • @AlexanderCerutti
    @AlexanderCerutti ปีที่แล้ว +6

    I knew "Refactoring UI" as a TH-cam video series that came out a few years ago, but I didn't know it became a book and also that it was related to Tailwind so tightly! Very interesting to know. Thanks for your sharing, Theo!

  • @milosgrujic9118
    @milosgrujic9118 ปีที่แล้ว +1

    Moral of the story : "Dont try to be smart and just use what smarter people than you designed."

  • @marloeleven
    @marloeleven ปีที่แล้ว

    just found this out after I saw your other video about tailwind tips and tricks. Kind of unusual to me since I know you we're one of the early critics of it in twitter. IIRC you even started a discussion on how bad it is. I was your follower up until then, and now I will get back since I saw you get your sh** together :) . I got a lot of respect for people who own up to their faults. +1 subscribed again

  • @BrentMalice
    @BrentMalice 6 หลายเดือนก่อน

    edit: wow this has entire palletes and components anddddddd a bunch of information. ok im a tailwind simp now you were right.
    this is AMAZING! I'm trying to do both design, frontend, and backend as a family project for my dad and you and prime showing me svelte with rich have got me through the actual website, but its been such a struggle realizing all the lil art pieces.
    Realizing that my nav looked bad because my shadow was slightly too dark and slightly too long was so eye opening, just like seeing that mock discord UI with all those color pallets. i felt like iwas missing a bunch of info from the builders. gonna buy this asap

  • @brittneypostma
    @brittneypostma ปีที่แล้ว +5

    This is something I've been saying for awhile. It is such a good basis for building a design system. It isn't everything, but the fundamentals are already there for you.

  • @lukeweston1234
    @lukeweston1234 ปีที่แล้ว +38

    I’ve started creating design systems before the rest of my frontend(or after the initial prototype) and it’s incredibly helpful….I fear the day when Adobe makes Figma a subscription

  • @matthewevans3884
    @matthewevans3884 ปีที่แล้ว +9

    After trying it out on a mock project, decided to use Tailwind on a new work project and have absolutely loved it. I didn't expect it to actually increase my development speed, while also making everything look great. I initially thought, "It's basically just css in HTML, and it's ugly", but after giving it a try my opinion changed to "this is turbo mode for UI development".

  • @EddyVinck
    @EddyVinck ปีที่แล้ว +76

    I used to hate Tailwind, until I tried it
    Now I don’t want to use anything else

    • @jcs184
      @jcs184 ปีที่แล้ว +1

      Same here. I love to use it but at the same time hate the code it turns into.

    • @Davidlavieri
      @Davidlavieri ปีที่แล้ว +6

      Do you work for an actual company with an big product and at least 2-4 developers ? Most people i see liking tailwind are just solo-freelancers working on one-off projects, code, deliver and done. Tailwind trade off is maintenance, bad practices always work for solo-devs

    • @dealloc
      @dealloc ปีที่แล้ว +1

      @@Davidlavieri I am, and Tailwind is definately a life-saver when it comes to design systems. You can always define a UI library with CVA (class-variance-authority) and keep the freedom of customizing individual components for specific use-cases. There is much more maintenance in not having a design system, or completely custom design system. Tailwind makes defining a design system a lot easier and can be configured to fit your branding and application needs.

    • @krazymeanie
      @krazymeanie ปีที่แล้ว +2

      @@Davidlavieri Seems like you're looking in the wrong places. I implore you to take a look at the showcases on Tailwind's website and see for yourself just how many large companies (couple of them you wouldn't even believe used tailwind) are using tailwind in production. Not just solo devs. The reason it seems the more solo developers use it because they have the freedom to do so where alot of people have to use what their company wants them to use even if the person themselves love tailwind.

    • @f13775
      @f13775 ปีที่แล้ว

      @@Davidlavieri completely agree with you, css was separated from html for a reason, for years we agree that inline css is bad practice, horror in maintenance and usability, and now tailwind came and suggest writing each css property as a class names in html

  • @zeppelin2689
    @zeppelin2689 ปีที่แล้ว +10

    I used tailwind at a big company for 2 years. We dumped it for CSS modules and I have never been happier. The key values you showed like colors, spacing etc, can easily be stored as CSS variables. TSX/JSX is just so much more legible without 87 different little classes scattered throughout.

    • @wlockuz4467
      @wlockuz4467 ปีที่แล้ว +9

      You don't necessarily have to use the Tailwind classes inline, you can use the @apply directive to extract the style under a singular class name like "button" or "link" and use that class name to simplify your components.

    • @Davidlavieri
      @Davidlavieri ปีที่แล้ว +3

      agree, tailwind when used in a big product with multiple developers is only struggle, it doesn't help, this tool is for solo-freelancers working on one-off projects, code, deliver and done. Project that will never be maintained by themselves

    • @BesimHuskic
      @BesimHuskic ปีที่แล้ว

      @@wlockuz4467 SUre you could do that, but unless you are having some custom values that are specific to your units/colors/spacing. It is easier and cleaner to write out something like position:relative, than it is to use a bunch of modifiers. That's just my opinion. I don't need utility CSS to write css properties when composing classes.

  • @freyfrenzy
    @freyfrenzy 5 หลายเดือนก่อน

    Refactoring UI really is an amazing book! watching this video is making me want to read it again.

  • @PenguiinFPS
    @PenguiinFPS ปีที่แล้ว +1

    I gave Tailwind a try because of your video on it, and I absolutely love it. Already made a full project start to finish using it and I don't plan on going back to styled components anytime soon.

  • @auronedgevicks7739
    @auronedgevicks7739 ปีที่แล้ว +2

    Tailwind is like Visual Basic. Just because you can write a nice UI doesn't mean you understand CSS. For the sake of your own career as a front end dev, learn actual CSS, learn how the browser renders so you won't look like a fool when put on a non tailwind project/product.

  • @curiouslycory
    @curiouslycory ปีที่แล้ว +1

    Another banger. These really point out a lot of the reasons why I've been enjoying tailwind. I do still have a hard time with the className vomit, but have found some good solutions, and LOVE that I don't have to think about or make these decisions for a small app or startup.

  • @psyaviah
    @psyaviah ปีที่แล้ว +1

    Thanks for being so open and share your thinking process, that is something that should be encouraged more even I think. So props.
    We need to be critical, and you were, but you also spoke your mind on the thought process you had. Thanks.

  • @JoseLPimienta
    @JoseLPimienta ปีที่แล้ว

    I built a pretty comprehensive design system based on Tailwind. From Figma -> custom tool to extract the design tokens(colors, spacing, typography, etc) -> Library with design token values (flavors CSS vars, JSON, Typescript) -> React + Storybook.
    Loved the result and made my team very productive!

  • @justinlinn1810
    @justinlinn1810 ปีที่แล้ว +1

    My one sentence Tailwind pitch is “It’s a design system language that devs and designers can more effectively communicate though”. I use Storybook to build myself a design system for every project.

  • @johnmcway6120
    @johnmcway6120 ปีที่แล้ว

    as a backend developer learning frontend and ui/ux on the side this is exactly what i need. Having a lot of really hard work and desicions made for me and providing me with tools that locks me in the system that is super flexible and yet restrictive in all of the hard parts that i may never find time to figure out on my own.
    tailwind is beautiful

  • @erikslorenz
    @erikslorenz ปีที่แล้ว +1

    That's one of the main reasons I like it. Just keeps stuff consistent and then I don't sit there for a day trying to figure out the button border radius

  • @TheCodeDestroyer
    @TheCodeDestroyer 5 หลายเดือนก่อน

    One more thing you probably didn’t consider, using tailwind you will most likely produce the smallest CSS file you can, since every class is in most cases just one CSS prop and value and you usually reuse it hundreds of times throughout the code in the project you work on. It will only be 3 lines of CSS in most cases.
    While if you style stuff in CSS you will have so many duplicated CSS lines specially with padding, margin, background-color, color, border-radius, etc.

  • @skvllface
    @skvllface ปีที่แล้ว +1

    tailwind’s beautiful defaults aside, i appreciate this video so much as a designer who is used to non-designers undervaluing the thought and care taken in developing the parts of a design system for digital experiences 🥲 those two examples of color and spacing scales are taken for granted when done well and feel wrong when done poorly!

  • @michaelkhalsa
    @michaelkhalsa 8 หลายเดือนก่อน

    Tailwind rocks. I have only recently started using it, but would not go back. I also baught the book within a few days of using tailwind, because it is a commitment, to understand the reasoning and best practices, and of course learning.
    While i favor a tighter layout than the authors use, and i believe in first developing a general page template (much easier for agile presentation and to explore), the concept of developing first in grey scale was an eye opener.
    As a design system, their are a couple approaches. One is to use it out of the box with some customisation, such as additional breakpoints and colors. This is what i am currently doing.
    The other, is to set it up per project with only the breakpoints and colors for the project and per brand. I believe this is probably the better approach, as working with a set of constraints, itself forms the ui choices.
    For ref, i am a strong back end dev and architect, primarily using the .net/sql/azure stack, but also go, node, js,, etc., who also enjoys front end.

  • @NeglexisMusic
    @NeglexisMusic ปีที่แล้ว +12

    I know you've talked about it in some of your previous videos (mainly the one where the diagram in this video comes from), but I'm surprised that, if this is what made you like Tailwind, you're still not a fan of Chakra UI.
    When working in a React context, Chakra UI is always my main go-to library when it comes to styling. It is essentially Tailwind, but for React. From what I remember from your previous video on UI libraries, you thought of Chakra too much as a component library, whereas I mainly see it as an implementation of styled system (which in itself was an extension on styled components).
    Absolutely, Chakra UI isn't a full-fledged, feature-packed UI library where you can build insane apps out of the box. But it is a super solid basis for building your own design system upon. The building blocks it provides are so low-level that they don't lock you in but instead give you the necessary tools to style it as your own.
    If you've changed your mind on Tailwind, I suggest you give Chakra UI another chance. Especially if you're prepared to go in with the same "this is a basis I can build upon" mindset that you have with Tailwind.

    • @t3dotgg
      @t3dotgg  ปีที่แล้ว +3

      This is explicitly NOT what made me like tailwind, watch my CSS video to learn more about why I do :)

    • @NeglexisMusic
      @NeglexisMusic ปีที่แล้ว +7

      @@t3dotgg "...but what I didn't give Tailwind enough credit for (...) is how it provides building blocks for a good design system. Tailwind is way more a design system than I gave it credit for before." Those are your exact words from this video.
      I just think that, if you'd give Chakra another shot with that exact same mindset, your view of Chakra might make a 180 as well.
      I fully agree with your current preferred tech stack, I just think that Chakra would be the last good piece to make it even better ;)

    • @BryndilleYT
      @BryndilleYT ปีที่แล้ว

      @@NeglexisMusic Tailwind, imo, is actually a framework to implement coherent design systems in CSS. It has some constraints on what it CAN implement, but it's a great track to follow. I think that's what Theo meant when he said "how it provides building blocks for a good design system"

    • @t3dotgg
      @t3dotgg  ปีที่แล้ว +3

      I liked Tailwind because I could ignore the design system but and just do css. I dislike chakra because it forces me to learn their design system before I can do css.

    • @mareksedlacek9692
      @mareksedlacek9692 ปีที่แล้ว

      ​@@t3dotgg That is true for material-ui but not chakra-ui. What chakra-ui forces you to learn is styled-system, which is bit more than understanding tailwind config and cva but much much less than material-ui.

  • @RolandAyala
    @RolandAyala ปีที่แล้ว

    I recently swtiched from MUI to Tailwind, after one of your videos prompted me to give it a closer look. It was a great decision to switch (so thank you!), providing me with more creative freedom w/o needing to workaround framework solutions like MUI.

  • @Issvor
    @Issvor ปีที่แล้ว +13

    I recommend that anyone interesting in frontend development should read that book. I read it about a year ago and it has been an absolute game changer. I think the hierarchy topic they covered was probably the most eye opening, second being the colors. They hierarchy section explains that it's not jut size that determines hierarchy, but font weight, color, location, and a few other things with TONS of examples. And that's the best part of this book is that there are SO MANY practical examples of the design choices. They show you the "bad" design, explain what makes it bad, then they show you some better choice along with a "good" design and explain what makes it good. At the very least, pick up the two free chapters from the website. I've read this book three times already because it's so damn good

  • @Nonsense116
    @Nonsense116 ปีที่แล้ว

    I'm glad to hear you recommend refactoringui! I've been thinking about picking it up but I've never been too sure.

  • @dotsona07
    @dotsona07 ปีที่แล้ว +1

    I just got into tail wind and it has blown my mind. I'm a UI designer and I can totally see it as a design system. It's a great foundation for building apps and websites.

  • @BenGarnett1
    @BenGarnett1 ปีที่แล้ว +1

    Yes. Refactoring UI is awesome!
    "I know this looks terrible but I have no idea why"

  • @cabrerabywaters
    @cabrerabywaters ปีที่แล้ว

    Read the title and started typing: yarn remove tail...20 seconds into the video...ufff 😅 what a relief

  • @limitlesskode
    @limitlesskode ปีที่แล้ว

    Theo: You do not need to read the book
    Me: I definitely need to read the book

  • @kasopejohnson3831
    @kasopejohnson3831 6 หลายเดือนก่อน

    Thanks for sharing this perspective!

  •  ปีที่แล้ว

    Ok... j achète le livre. Or should I wait for a a sponsored link to support you? I rea;;y love Tialwind and this video is making me love it even more

  • @cvoges12
    @cvoges12 ปีที่แล้ว

    Subscribed after this realization. This was a huge awakening to how tailwind subtly makes you think about ui without making you adhere to some sort of opinions.

  • @MathinusG
    @MathinusG ปีที่แล้ว

    Great thanks. Looking forward to learning TW.

  • @pierrec.5932
    @pierrec.5932 ปีที่แล้ว +2

    Thanks Theo! You telling you were wrong about tailwind, I couldn't imagine it was not a positive communication on it 😂
    I've been using tailwind for 3 months and I love it so much. Combined with React it is so powerful.
    I was also wrong, it's far better than I initially thought, not exactly initially because my very first feeling about it was "WTF is that?".

  • @baka_baca
    @baka_baca ปีที่แล้ว +2

    Haha as someone that has some color vision issues, picking colors is one of my key challenges. Typically I calculate everything but it's great to know Tailwind has options to help me get to to a better spot (won't get me 100% of the way there but I'll take what I can get :))

  • @dan9948
    @dan9948 ปีที่แล้ว

    🤯 Thanks for sharing this!

  • @cherubin7th
    @cherubin7th ปีที่แล้ว +1

    I noticed, that somehow my styles with tailwind look better and I can't tell why. But it stopped looking like garbage as it was before with my css.

  • @Antebios
    @Antebios ปีที่แล้ว +1

    It was painful for me to start using Tailwind. And I mean recently like within the past 1-2 weeks. Now that I've dived into it I can see the power!!! There is so much for me to learn.😮

  • @ozkifovxvypyvp3574
    @ozkifovxvypyvp3574 ปีที่แล้ว

    Pity this isn't an affiliate link, as this sold me on the book. Thanks for making a video on it!

  • @tobiasjennerjahn8659
    @tobiasjennerjahn8659 ปีที่แล้ว

    Refactoring UI is an amazing book. It has basically completely redefined how I view UI. Honestly if people would just read this and disregard anything else about UI we would be significantly better off.
    If you can afford it easily, just buy it. It’s absolutely worth it.

  • @BlurryBit
    @BlurryBit ปีที่แล้ว +17

    Have been using tailwind for a year, and I must say, it is faaaaaaar better than raw css. 100% agreed with your opinion.😊

    • @Dan_1348
      @Dan_1348 ปีที่แล้ว

      What makes tailwind better than css? (I'm a React dev)

    • @derciojds
      @derciojds ปีที่แล้ว +2

      @@Dan_1348 tailwind is just a pre-written css

    • @BlurryBit
      @BlurryBit ปีที่แล้ว +1

      ​@@Dan_1348 you ultimately end up writing a lot less css.
      p.s. it is just a wrapper around normal css/scss like Dercio mentioned.
      As for example, a container could be represented as:
      .wrapper {
      @apply mx auto container;
      }
      instead of having to write all the values for all screen sizes.
      Then comes hover, active and media queries, which can simply be represented as classes.
      For example a button can be represented as :
      .button {
      @apply text-blue-500 rounded-xl text-white hover:text-blue-500 hover:bg-white md:flex hidden;
      }
      This is essentially the same as having to write
      .button {
      color: somehex;
      display:flex;
      border-radius: somevalue;
      background-color: somehex
      &:hover {
      color: somehex;
      background-color:somehex;
      }
      }
      @media screen and (max-width: somepxpx) {
      .button {
      display: none;
      }
      }
      ...etc...etc
      You would also be wrong to think it will be heavy, because tailwind supports tree shaking out of the box. So, only the classes you have used in the app will be included in the final build.
      Oh and not to mention, the color palette is pretty good as well. If you are not satisfied with the color (or something else), you can always extend the themes to your liking.
      Tailwind is revolutionary. Try it out, you will get hooked to it.

    • @Dan_1348
      @Dan_1348 ปีที่แล้ว

      @@BlurryBit Do you have to give elements classes, or can you use tags and the usual css selectors with @apply (e.g. button{@apply...} instead of .button{@apply...} ?

    • @BlurryBit
      @BlurryBit ปีที่แล้ว

      @@Dan_1348 it supports all of these options..
      - You can have these classes directly in your jsx.
      - You can have @apply on native elements like button (however, as you might know already, this will not work with module level css. It has to be global).
      - You can have @apply on classes, and so on.
      It will work exactly like how CSS/SCSS would work.

  • @appuser
    @appuser ปีที่แล้ว

    It's valid to see tailwind as a shorthand for css, but the default shorthands (specific shades of colours etc) are intentional decisions (the "design system" part). Tailwind oozes forethought, experience and well-tested-ness. Love it, love it, love it!

  • @GrizhlieCodes
    @GrizhlieCodes ปีที่แล้ว

    Thanks a ton for this video, I had no idea they wrote a book on this topic, will buy and read it now.

  • @JoelFunk
    @JoelFunk ปีที่แล้ว

    Great video! I’ve purchased a license to tailwindui because of your previous videos. I love TailwindCSS

  • @faizanahmed9304
    @faizanahmed9304 ปีที่แล้ว +2

    Thank you Theo for making us understand more about Tailwind.

  • @theklr
    @theklr ปีที่แล้ว

    I love Refactor UI. Definitely helped me level up in moving faster in developing a system faster and not over-engineer/over-design

  • @nikosmj1
    @nikosmj1 ปีที่แล้ว +1

    I found it way more complicated to memorise tailwind rather than css,your className always looks so big, i can't say i found tailwind very helpful it's just in-line css.
    Image if tailwind came before vanilla css and vanilla css was released 2 years ago.What everyone would say..? Let me guess..
    Oh now you can seperate your in-line styles to a different file and your ClassNames doesn't look so long anymore because you can define a name you want and style it with css.

  • @TheSaganic0
    @TheSaganic0 ปีที่แล้ว

    Been using tailwind in a new system at work for coming up to a year. It is indeed a game changer. We're now getting to the point where we've got a half-decent component library weare using to compose our application front-ends all with tailwind.

  • @marcioneto3016
    @marcioneto3016 ปีที่แล้ว

    Thanks for the recommendation, just bought the book and it looks fantastic.

  • @tedspens
    @tedspens ปีที่แล้ว +1

    I'm a big fan of Tailwind. Now I finally know why 😁😁

  • @XArthieX
    @XArthieX ปีที่แล้ว +1

    Tailwind applies CSS it doesn't write CSS.
    This is the biggest hurdle: people trying to write CSS with tailwind. It's the wrong mental model. The CSS has already been written. Just apply it and that's it.

  • @maxteer2800
    @maxteer2800 ปีที่แล้ว +1

    3:34, don't get demonitized my fren 🙏

  • @HiImKyle
    @HiImKyle ปีที่แล้ว +1

    I think it's a little expensive for my level, but maybe in the future.. Not everything can be accessible to everyone I suppose..

  • @moodynoob
    @moodynoob ปีที่แล้ว +7

    For a moment I thought the anti tailwind crowd got to you

  • @DanielAbernathy
    @DanielAbernathy ปีที่แล้ว

    "auto-completes you to the right place" if you already know the Tailwind-specific names for CSS properties... Just like a good IDE would already do for you when writing CSS.

  • @erickheredia8910
    @erickheredia8910 ปีที่แล้ว

    I tried tailwind 3 years ago and don't even bother using raw CSS anymore. I create custom classes with @apply and that's it. No more drama, total productivity from the get-go, and just fun designing apps with it.

  • @Ironication
    @Ironication ปีที่แล้ว +1

    I never really cared about Tailwind. Didn't like the idea. But the color design is really intriguing. Thanks Theo!

    • @BesimHuskic
      @BesimHuskic ปีที่แล้ว

      This sort of theory and research goes into any enterprise or large scale design system. Meaning when colors are picked, an LCH scale is created. It can be 5 or 10 unit base. From there you cna create contrast ratios. For instance as long as the colors are on the same gray scale, you can safely assume a difference of 50 units will pass AAA accessibility.
      Nothing new here, the book is simply sharing some of the concepts behind tailwind.

  • @hoaxzoea7782
    @hoaxzoea7782 ปีที่แล้ว

    2 things that completely change my life.
    Bitcoin and Tailwind.

  • @randerck2661
    @randerck2661 ปีที่แล้ว

    I feel like Tailwind is the second level from Bootstrap

  • @archmad
    @archmad ปีที่แล้ว

    i was a UX before i went to Frontend. It is true, it's not math for colors, it's a gut-feel. IE: 2 colors used side by side may mess up one or both colors, they may look good if used separately. Reason why just reversing colors as background and foreground will not work in most cases

  • @tomaszchmielnicki8676
    @tomaszchmielnicki8676 ปีที่แล้ว

    Besides providing a great design system and removing a lot of the overhead of working with traditional CSS, I feel like Tailwind forces you to structure your apps better. Because you're not separating your CSS from HTML anymore, you have to separate your components from each other which makes them super modular and improves the architecture of your entire app. The utility classes also make it so much easier to put together the reusable components and add things like spacing.

  • @atom6_
    @atom6_ ปีที่แล้ว

    Not sure where I found it (might have been a comment here or one of your videos), but Master CSS is also quite intriguing, it misses the predefined design system, but the syntax is somewhat similar to tailwind and the cdn lib is only 50KB - it is made for arbitrary values.

  • @stevepond14
    @stevepond14 ปีที่แล้ว

    So I was ready to hear you ditched TW for chakra, but yet you make TW seem even more coo

  • @suzuyah
    @suzuyah ปีที่แล้ว +1

    Cannot buy it from my country so had to pirate it. I'll buy it when I can tho for sure, cuz it's a freaking masterpiece 🗿 No 5 to 15 pages intro, straight to the point with explanations and good examples. Also, they have PDFs (additional content, I guess) with cool pre-made Color Palettes, Components and Font Recommendations, definitely worth checking out. Glad I followed most of the recommendations outlined before, but literally the first part about not having to design every small little freaking feature really opened my eyes.

    • @type3gaming851
      @type3gaming851 ปีที่แล้ว

      Yo i can't buy it too, help me where did you pirate it?

    • @suzuyah
      @suzuyah ปีที่แล้ว

      @@type3gaming851 I guess it's waaay to late now, but thanks to youtube for showing me the notification only rn
      I can upload it on google drive on something

    • @type3gaming851
      @type3gaming851 ปีที่แล้ว

      @@suzuyah yeah please do

    • @suzuyah
      @suzuyah ปีที่แล้ว +1

      @@type3gaming851 here you go drive.google.com/drive/folders/1jKuKB46bzdEY5LaJnr2_9kw4UXVo7uDb?usp=sharing

  • @emyowos
    @emyowos ปีที่แล้ว

    love the thumbnail

  • @pixelotetm
    @pixelotetm ปีที่แล้ว

    hahaha, Tailwindcss blocked you. bro your thumbnails are hilarious man ! I love It

  • @justafreak15able
    @justafreak15able ปีที่แล้ว

    I was so against tailwind cluttering up the HTML template. But now I might have another look at tailwind.

  • @aprilmintacpineda2713
    @aprilmintacpineda2713 ปีที่แล้ว

    Nice, didn't know this existed, thanks for the info, I just checked it out, it's quite expensive but I'll try to afford it as I think it's really good

  • @ItsRyanStudios
    @ItsRyanStudios ปีที่แล้ว

    This is awesome
    I'm inspired to learn tailwind now
    Can't wait to read the book

  • @st-jn2gk
    @st-jn2gk ปีที่แล้ว +1

    the dark roots on your hair make it look way way waaay better imo.

  • @ivan_dramaliev
    @ivan_dramaliev ปีที่แล้ว

    I use a slightly different semantic approach to naming my colors -- instead of having a 'lightness' dimension I use a 'contrast' dimension. So 'blue-light', or 'lime-darkest' become, for example, 'blue-mellow' and 'lime-punchy'. The exact (hex) value of those colors is then determined by the background they are used on using CSS variables. I.e. each background element sets the CSS variable values used by the different 'hue-contrast' color name combinations. This doesn't have to be limited to the regular dark and light mode backgrounds; for each such mode, additional backgrounds can be supported, e.g. 'dialog-dark' and 'dialog-white' for elements rendered in a dialog component, etc.
    Yeah, it takes a while to set up initially, especially if there are more base hues involved, but it pays off in not having to change the color name based on the dark/light mode or where the color is used. A 'blue-punchy' (or 'green-mellow, 'pink-subdued', etc.) color will always work the same way regardless of where it's used.

  • @MyALPHAguy
    @MyALPHAguy ปีที่แล้ว

    I don't like tailwind because I used to build things on the browser inspector tool, then all I had to do is copy the code from there and save it, that's how I used to build classes, apply grid systems, flexbox, and so on... nothing is easier than the inspector tool, I just have to type "center" and then all center properties show up, for flexblox, grid, and everything... the "intellisense tool" that comes in vscode is nowhere near close!

  • @danrichmond
    @danrichmond ปีที่แล้ว

    "If you're using Tailwind, You are still learning Tailwind" - new mantra

  • @scottlott3794
    @scottlott3794 ปีที่แล้ว +1

    I got it a few weeks ago, LOVE this book!

  • @kuldeepbhatt8475
    @kuldeepbhatt8475 ปีที่แล้ว

    Don't worry theo you've been wrong ample times. What is most important is that you have the ability to acknowledge and learn about it. It shows your intellectual honesty.

  • @ibrohimbahromov1931
    @ibrohimbahromov1931 ปีที่แล้ว

    You’re also missing the bundle size perspective.

  • @bikidas5473
    @bikidas5473 ปีที่แล้ว

    Tailwind really made me something like oh i can build any mockup UI!

  • @TheMarouuu
    @TheMarouuu ปีที่แล้ว

    Tailwind won't survive for more than 2 years. If that.

  • @Danielduel-
    @Danielduel- ปีที่แล้ว

    4:40 - ok, where do I pay?

  • @erstongreatman
    @erstongreatman ปีที่แล้ว

    Tailwind is interesting. My team seems pretty split on it. The senior devs see it as the same as any other framework like Bootstrap or MUI and the junior devs seem to love it. I can take it or leave it. I don't think I could give up Emotion for it and having both seems to be where I'm at.

  • @techne_
    @techne_ ปีที่แล้ว

    But the components from them. The bundle blows your mind. An helps them.

  • @TheMehranKhan
    @TheMehranKhan ปีที่แล้ว

    gut feel coloring, finally my skills are becoming useful.

  • @jepqmw
    @jepqmw ปีที่แล้ว

    writing tailwind in classes is huge pain but tailwind with twin.macro and styled-components is OP

  • @mibaatwork
    @mibaatwork ปีที่แล้ว

    Is there any way in tailwind css to obfuscate my css classes in html so no one can just copy my design from the page? I used sveltekit and vite.

  • @vanzed7539
    @vanzed7539 ปีที่แล้ว

    The design constraint is the one positive of tailwind, and it would soon disappear if CSS focused on enabling it better than - - var syntax does

  • @gregclarkreasons
    @gregclarkreasons ปีที่แล้ว

    Tailwind is one of the best things that's ever happened to front end.

  • @kusime7753
    @kusime7753 ปีที่แล้ว

    Maybe tailwind is a so called "experience of design",then abstract them into the utility class,so that also provide the possibility to build most of "Best Practice" 🤔

  • @fiordnord
    @fiordnord ปีที่แล้ว +5

    Clickbatey title but cool video anyways

  • @WilliamWelsh
    @WilliamWelsh ปีที่แล้ว

    luckily i got this book for free cause i got tailwind UI on black friday and it came with it, honestly wasn't going to read it but definitely going to now!

  • @inasuma8180
    @inasuma8180 ปีที่แล้ว +1

    Something I think would be worth addressing in a future video is what, exactly, a design system *is*.
    I work in design systems professionally and have for about 5 years. They're very complex and a singular library and/or strategy for writing styles is an extremely small scope in a design system.
    A slate of colors and typography is merely a deliverable in the context of a DS. The mode in which it's given, of course, is the strategy. These are by nature opinionated and each library provides differing levels of fidelity. I've seen some folks use RGBA, others HSLA, and others still standard ol' HEX for things like theming. Then libraries like tailwind to deliver it as part of a heightened developer experience.
    In any of the above cases, the deliverable is providing a design language, not a design system. The technical strategy is an extension of that.
    I think the confusion in terms, "design system" vs. "toolkit" vs. "design language" keeps design systems young and relatively misunderstood. I see people all the time in my employer's design system support chat say things like "this is a shared pattern/component/color palette therefore it belongs in the design system," not realizing the product & business goals that go into a DS and why something being "common" in a product isn't itself justification for calling something design system oriented.
    So, I just want to clarify from my professional/personal experience: a design system is a holistic way of providing design, including thinking & language, through some business & technical strategy. Those strategies include but aren't limited to: components, theming, UI patterns, documentation, and conversation.
    At the end of the day it's very easy to latch onto components, CSS, or UI toolkits and call them design systems, but I think that discounts the true value & meaning of those words.
    In your case, the answer here might be as simple as replacing "design system" with "design language" or "design toolkit." But the difference is important if only because of your platform. I love your content & this is NOT a criticism. You make great content and I learn tons & tons from you every time you upload/stream. Keep up the great work & let me know if you need/want someone in the industry to discuss more!

  • @billings512
    @billings512 ปีที่แล้ว +1

    Thanks Theo - Mac

  • @skyhigheagleer6
    @skyhigheagleer6 ปีที่แล้ว

    Developer realises designers have value

  • @MikeNugget
    @MikeNugget ปีที่แล้ว +1

    Ok , now it's time to say the same about Flutter 😂