My Tailwind Journey 

😂😂😂

😂😂

And I want to love someone as much as Theo hates Insomnia

Same here

Same here as well

Right now I just hate that I have to learn it. I feel so drained.

​@@Sammi84 Update?

@@martiananomaly I ended up in a project where I needed to use a component library that uses Tailwind, so I ended up having to learn Tailwind. It took a few hours of work to understand, and a few days to get used to, but I was immediately productive, and after a little while I was very productive. Writing styles in Tailwind is extremely fast. I still find places here and there where I prefer to just use a bit of vanilla css, and sometimes I come back to an element that has a wall of classes that I have to read slowly, but honestly that doesn't feel much different than reading a wall of vanilla css. Maybe a little better as Tailwind is less verbose. Bottom line is that for the most part Tailwind does what it promises.

Would be better if it was just standard

Exactly... Tailwind is great for SPA frameworks like React/Vue. But outside the JS front-end world, vanilla CSS is great enough especially with all the modern flex/grid/media improvements.

Unfortunately the truth of the matter is vanilla css doesnt scale as tailwind does

Tailwind pairs well with component model in modern ui frameworks, repetition is mitigated here - just reuse components

Scoped css is a standard in most css solutions though.

@@_y7ya That's fine if you can guarantee the scoped css is in the same file and is sequentially listed in the files. When I have 20, 200, 2000 lines or different files to go to find where things are cascading from it becomes a nightmare to debug or even see the design intent if it's an anti pattern going on.

@@InkFPS Not necessarily this is something editors can help with (vscode by default for example). I use tailwind as a first-choice but when forced to use something like styled-components for example I always have the styles in a different file. cmd+click on the component immediately takes me to the exact styling used.

Why is that needed? I think HTML+CSS colocation makes sense especially in tailwind format. It's very obnoxious requiring 2 files (html, css) just to edit 1 element. You have to look at the browser to see the element, the html to see the structure, the css to style it. 2 windows is exponentially more manageable than 3.

Co-location is very important, no argument there. I'm talking about abstraction. In the same way Tailwind abstracts regular CSS into a set of reusable style classes, I think its useful to abstract those reusable classes into a theme. e.g. instead of bg-slate-800 you would have bg-primary and use that on your components. Then when you need to change the primary color of your theme, you just update it once, instead of trawling through the codebase to update all the instances. You can do this stuff using Tailwind but afaik it's frowned upon.

@@_y7ya You don't need 3 windows for that.

@@MisterConscio 3 tabs is what I meant to say

why?

Was thinking the same... then, started asking myself why I think "clean code" (or other patterns) is a holy grail. I don't get payed by "cleaningness" of my code, my code is not faster if its "clean", does it make me faster? So, back to square one... let's first define goals, and let's pick tools to achieve those, later. Let's question patterns and tools based on our goals, not because they may be popular or "cool". Currently my main goals are: 1) speed of development, 2) fast/optimized apps, 3) ease of maintenace (future me or my coworkers). Once I did that, I changed a lot of popular patterns and tools I used before. Tailwind fits into this too, ticks all 3 boxes better than anything else I tried.

I feel like if you don't know CSS that well, then yeah, learning Tailwind would be tough. If you do know CSS, it wouldn't make too much sense to me why it would be difficult to grasp.

@@MirkoVukusic I would argue that #3 `Ease of Maintenance` is not a box ticked. Plenty of devs are not versed in the Tailwind universe and moving everyone to it to satisfy what I would argue are non-existent needs, is costing a lot more than the benefits. Furthermore, a lot of teams are "fullstack" devs, meaning they're pretty much all backend experts that can render a button in React... 🙄 Making them switch to anything that isn't a "pure" CSS syntax (I'd include SASS, LESS and CSS Modules) is pure folly. I would also add #4 `Ease of migration` and Tailwind fails that one big time. Any framework does fail this one eventually, those framework classes go the way of the dodo once the next "cool" framework drops. Don't get me wrong, I can see how beautiful Tailwind can be in some contexts and it definitely has plenty of great benefits. But I firmly believe those benefits are not leaps and bound further than other solutions like CSS modules or even just plain CSS. In fact, I would argue they're pretty much negligeable in the greater scheme of things. Add to this that Tailwind also has major downsides beside the ones I mentioned earlier, it's definitely not all rosy in Tailwind land...

@@thethirdrace5107 , it's interesting how people can have completely opposite experiences, with the same thing. First.. learning curve... I really don't understand it, Tailwind was the fastest tool implemented ever. Was saving time already on the first project. So simple with using docs as a reference and configuring IDE to show you pure CSS classes for each tw tag. You talk about full stack developers... I'm the one, and those are exactly who I think benefit the most (I always thought guys focused on UI design prefer pure CSS). I do agree its not leaps and bounds above CSS modules or similar, but in my opinion it is a few steps (haven't migrated to CSS modules from pure CSS, but did it with tailwind). However I disagree it is negligable compared to pure CSS. It is leaps an bounds ahead of it for me. Migration? Don't really care, not on my priorities list. We get payed for it, it's the reality of Web development, and it's never too often to be a problem. 4-5 years is a minimum and that's more than enough in my use case. I really don't know here are those huge differences of opinions coming from. My only idea is that you haven't really done a full project or two for some time in tailwind. Some benefits become visible slowly, in time, when you have those "a-haa" moments and interchange between tailwind and pure css projects. Give it a chance (and time). I also hated it at start.

@@MirkoVukusic It's nice to see someone who can actually argue without trashing the other side. Thanks for your reply! It's indeed very interesting to see people having very diverging experiences with the same product. From what I could gather from your reply, it looks like it can be explained with what our priorities are. You seem perfectly fine with having a cheat sheet on the side for the syntax while I would find it a big waste of time and much slower since I'm already familiar with CSS syntax. You find that it helps you close the gap because you're heavily invested on the backend and it's easier for you to reason about. While on my side it adds a new abstraction layer that requires translations for everyday CSS techniques. It speeds you up while slowing me down. It's like if I wrote backend code in Typescript while most backend devs use Java in the team. They will be slowed down for me to be faster. Not always worth the trade-off... You want as much performance from your CSS as you can get. I don't because I know 50KB of CSS is infinitely faster than 50KB of JS. No matter what, I have about 1000 things to optimise before I even dream to consider CSS performance... Don't get me wrong, I do want things to be performant and I take great care to always code something that will be better than good enough. Unless someone can prove to me I could save 200ms on loading page performance by using a solution like Tailwind instead of well architected CSS modules, I don't see it as a priority. I'm not using Tailwind for different reasons. Migration is not part of your priority list while it's always on my mind. Backend development tend to change a lot less in term of technologies. Frontend moves at breakneck pace. I'm not running after the latest fad, but there's so much going on and things change much faster than on the backend side. Most of the frontend code you will write today will be in rewritten in another tech in 5 to 10 years. It's reality. Not having this on your list of priorities would be madness for frontend. Maybe I'm completely wrong, but I do feel people that really buy into Tailwind are struggling with CSS architecture and syntax. I've seen my fair share of absolutely trash CSS in projects, mostly because people still architect their CSS like 10 years ago. And tutorials are absolutely abysmal on the subject, it's like they're teaching you the alphabet and expect you to drop a college essay at the end 🤡. On that particular point, Tailwind definitely lifts developers up. It offers guardrails that makes it easy to maintain the course without hanging yourself with the generous rope that pure CSS is 😅. I do believe it explains why it's so popular, it prevents the basic errors that people struggle with, although it does have many downsides when you push the analysis much further. It's all a trade-off, like many things in tech.

Same boat here but with styled-components :(

fun fact, adam said once they kinda regret adding @apply

@@c11l i know. But i still love it, it’s perfect for vue styled components

@@hugazo you’re doing tailwind in styled components? 😂

@@c11l vue components for an inherited project

b

c@@Daniel-su4ml

You can find it pirated online.

@@h3nry_t122, I asked if it was worth it, not how to steal it.

Yeah, I’ve seen it recommended, but I’ve been stung by ebooks and courses before that have carried hefty price tags. Theo likes it, so maybe? 🤷‍♂️

I bought a package so got the book. From a perspective of an full stack developer, and not much of a designer, book is well worth it. For people into UI design... not sure, maybe not so much new stuff for them. But for developers doing UIs and want to make few steps closer to UI designers, its a good book.

It is tailwind not fail wind