I didn't realize THIS about Tailwind...

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 🙏

[@t3dotgg]

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]

All my ChakraUI haters stand up

[@TypedefDev]

Whats wrong with ChakraUI

[@roobs456]

@@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]

What book?

[@Michael-Martell]

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

[@markogartnar5658]

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

[@t3dotgg]

Tbh underrated comment

[@Jangeroo]

that was actually so funny and accurate at the same time

[@faraonch]

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

[@dugger8439]

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]

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

[@poke_champ]

don't be sheep. be you

[@AnnCatsanndra]

@@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]

Same

[@neatfastro]

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

[@HenrikWassdahl]

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

[@ehenoma7891]

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]

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]

tailwind is nice.

[@twothreeoneoneseventwoonefour5]

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]

@@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 KZbin comments.

[@twothreeoneoneseventwoonefour5]

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

[@xxmythmakerxx]

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

[@networkedsapien1229]

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

[@networkedsapien1229]

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

[@raphaelgorbach1476]

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

[@parassharma7041]

@@ikilledthemoon same here I love using saas

[@EvertJunior]

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.

[@psyaviah]

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.

[@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]

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

[@milosgrujic9118]

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

[@EddyVinck]

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

[@jcs184]

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

[@Davidlavieri]

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]

@@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]

@@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]

@@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

[@NeglexisMusic]

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]

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

[@NeglexisMusic]

@@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]

@@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]

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]

​@@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.

[@AlexanderCerutti]

I knew "Refactoring UI" as a KZbin 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!

[@matthewevans3884]

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".

[@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

[@zeppelin2689]

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]

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]

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]

@@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.

[@lukewestondev]

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

[@ΣτάθηςΣταθόπουλος-σ7ρ]

The secret ingredient is "stealing". (or being a student 👀)

[@brittneypostma]

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.

[@michaelkhalsa]

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.

[@erikslorenz]

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

[@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!

[@freyfrenzy]

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

[@limitlesskode]

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

[@curiouslycory]

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.

[@justinlinn1810]

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.

[@PenguiinFPS]

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.

[@dotsona07]

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.

[@TheCodeDestroyer]

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]

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!

[@Nonsense116]

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

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

[@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.

[@auronedgevicks7739]

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.

[@iiNoorbd]

💯

[@nikosmj1]

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.

[@Antebios]

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.😮

[@GrizhlieCodes]

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

[@ozkifovxvypyvp3574]

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

[@JoelFunk]

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

[@Issvor]

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

[@FaizanAnwerAli]

Can you give me access please

[@danrichmond]

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

[@cherubin7th]

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.

[@dan9948]

🤯 Thanks for sharing this!

[@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.

[@FatalFriction]

The books is kinda expensive tho, is it worth the price?

[@kasopejohnson3831]

Thanks for sharing this perspective!

[@cabrerabywaters]

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

[@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.

[@MathinusG]

Great thanks. Looking forward to learning TW.

[@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.

[@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.

[@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.

[@moodynoob]

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

[@t3dotgg]

Not possible

[@erickheredia8910]

@@t3dotgg preach

[@HiImKyle]

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

[@baka_baca]

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 :))

[@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.

[@hoaxzoea7782]

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

[@theklr]

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

[@justafreak15able]

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

[@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!

[@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

[@BenGarnett1]

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

[@BlurryBit]

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]

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

[@derciojds]

@@Dan_1348 tailwind is just a pre-written css

[@BlurryBit]

​@@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]

@@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]

@@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.

[@st-jn2gk]

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

[@martiananomaly]

indeed it does

[@t3dotgg]

:’)

[@faizanahmed9304]

Thank you Theo for making us understand more about Tailwind.

[@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.

[@maxteer2800]

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

[@bikidas5473]

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

[@pierrec.5932]

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?".

[@XArthieX]

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.

[@gregclarkreasons]

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

[@marcioneto3016]

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

[@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.

[@pixelotetm]

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

[@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!

[@tedspens]

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

[@henry-the-dog-and-steve]

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

[@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!

[@skyhigheagleer6]

Developer realises designers have value

[@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.

[@ItsRyanStudios]

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

[@belst_]

I've tried using tailwind a few times but it never worked for me. I use a lot of data driven classes and so on and since they are all dynamic, tailwind will never create the unused classes which are actually needed. I guess it's mostly because of the kind of tools I write

[@randerck2661]

I feel like Tailwind is the second level from Bootstrap

[@billings512]

Thanks Theo - Mac

[@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

[@Ironication]

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

[@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.

[@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" 🤔

[@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.

[@inasuma8180]

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!

[@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.

[@TheMehranKhan]

gut feel coloring, finally my skills are becoming useful.

[@jepqmw]

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

[@ibrohimbahromov1931]

You’re also missing the bundle size perspective.

[@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

[@pensums]

TL;DW : I was wrong about Tailwind. It's better!

[@ElPolemista]

have you check open-props?

[@dpaulflavius]

The entire video made you look like you've been sued by Tailwind and not actually felt in love with it =))

[@MikeNugget]

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

[@miwhcyvybaksjd]

Future video: I Was Wrong About TypeScript

[@t3dotgg]

This one is actually in the works ;)

[@miwhcyvybaksjd]

@@t3dotgg Haha. Brilliant!

[@thelinuxlich]

Continuation in 2023: I was wrong about MasterCSS

[@atom6_]

this looks pretty cool, although I think the verbosity of tailwind "connects" more in people's brain. will take some time to "master".