My Tailwind Journey

I didn't have the smoothest experience getting started with Tailwind. Thankfully that didn't stop me from loving it. Hopefully the lessons from my experience help y'all love it too

S/O Mir for the awesome edit 🙏

[Sherloqui]

I want to love someone as much as Theo loves Tailwind

[romeorichardson]

My story is basically the same, went from traditional CSS, to Styled Components, was stuck on that for a while because I loved the idea of writing CSS with JS, then one day I decided to see what all the Tailwind hype was about and now I can't see myself using anything else... willingly at least.

[NorteXGame]

Everyone hates Tailwind before learning it properly and love it after. Same with TypeScript. I cannot go back anymore.

[brkdnmz]

Bootstrap was the library that gave me hope when I was a complete stranger to styling: all those vanilla CSS properties... They truly scared me. Bootstrap (and its documentation) helped me a lot about "understanding" CSS (and a bit of JS). However, I had been feeling a bit too constrained: "Okay, um... how about changing the style of this button juust a little bit?" Yeah, I liked Bootstrap but I haven't ever loved it. I felt miserable since I didn't have enough CSS knowledge to style stuff myself, and so Bootstrap was my only choice. Time passed, I learned React and practiced CSS using various React UI libraries... The feeling of being constrained didn't go away, though. After a while, I met Tailwind. At first, I was too scared of it because of "too detailed" classes. But these classes were what I've ever desired -- I could design any element however I want! It's just that I had to struggle a lot to learn about Tailwind. It wasn't about Tailwind actually, but more about the vanilla CSS itself. I'd been so afraid to learn CSS that I couldn't get used to Tailwind. So, I gave a chance to Tailwind to let it teach me CSS while I use its classes (thanks, Chrome's DevTools!). What a chance I gave that was... Tailwind became my savior and made me love styling. And now, I don't ever feel in need of any other CSS library. Thank you Tailwind, you are the reason I love frontend. I watch how people like Theo talk about how nice Tailwind is, just to have fun. I couldn't be happier watching my savior become more popular every day.

The fact that my very first comment to Theo's content is about praising Tailwind is just awesome.

Thanks for even more awesome content, Theo!

[TheBestEpicProGamer]

Damn your videos are so insightful and inspirational. I‘m glad that I finally started to follow you. Thanks, and keep it up!

[githoweb]

Thanks for sharing your experience. I liked your honesty in this video 👍. I started myself my Tailwind journey (just because i may have to, and being curious about reasons which made half of the dev love it and half hate it 😄). Of course, i have the same feeling about it as everyone about it in the beginning (i try to think against my "good practices" etc). So i'm interested in people telling how they experience it (as long as they're not just fanboys who discover classic CSS possibilities via Tailwind without explaining the real interest in it for people who already master css, scss etc...). As anything else, i feel it's a solution for some kind of context, the type of project, or the type of company you work in.

[ScottMaday]

Bootstrap was my favorite component library until I wanted to add my own customizations. For anyone who loves component libraries and also loves tailwind, I couldn't recommend daisyui enough. You get all the freedom of tailwind with all the convenience of a component library.

[hleet]

love your video, now I want to learn more about that thing called tailwind. RefactoringUI sounds interesting too, gonna check this out

[hugazo]

For me, using tailwind on an inherited project just starting fresh on the company, forced me to change my understanding on ui components and how Vue components use tailwind, been loving it and the @apply directory is just beautiful. Great channel and greetings

[Burtannia]

Reading the Refactoring UI book was a great insight for me as a backend dev.

[Stoney_Eagle]

I found myself fighting bootstrap margins and paddings a lot, that made switching to tailwind an easy decision. I now add margins and paddings instead of working against the system to get rid of them.

My friend was very stubborn holding on to bootstrap, and didn't like tailwind at all, until I convinced him to use it for one week (just try it for one week buddy, trust me. You need more than 1 hour to see the benefit), he now doesn't look back and loves it too.

Tailwind is the freedom of plain css but with guiderails to make a good looking site easy.

[InkFPS]

Class name hell when debugging CSS bugs that should take 10mins to resolve but ends up taking an hour due to inherited cascading class names found in twenty different locations in one or more .css files. It was a revelation to begin using Tailwind and finding all the benefits it provided.

[martiananomaly]

Tailwind is probably the most important tool to me in frontend. More than Typescript (barely), React, Next or honestly the node ecosystem as well. Tailwind ❤

[HaraldEngels]

What was a game-changer for me is the possibility to define with Tailwind CSS the amount of Atomic CSS which I want and deliver a CSS file which contains only the used styles. Therefore I can always have a mixed approach between conventional, global or project-independent CSS rules building and CSS customization/adaptation with Tailwind (in HTML so that I see what I get with a customization directly in the HTML code). And yes, the book you mentioned is great. I can highly recommend it for creating an OK design as a non-designer.

[sereyvathanakkhorn]

My initial impression with Tailwind is pretty much the same. Everything is chaotic; and it challenged my fundamental understanding of keeping my HTML as clean and as readable as possible. I was never good at CSS in the first place, so obviously, the solution is to avoid dealing with it and opt into using library like Bootstrap. But after taking a serious look into what Tailwind is, I shift my mindset 180 degree. I can't see myself doing front-end without using Tailwind anymore.

[philippmerk]

ive used it for 1.5 years. it helped me to develop a better understanding for the usage of design tokens. Ive build my own design system with plain css variables... Since you cant nest expressions in tw like: sm(:hover:bg-red-500, :focus:bg-blue-500) and so on i think css is much smoother and less redundant. Ive also integrated a css property sorter for better maintenance and readability. I really like having this separation and being able to reuse my css modules or global css classes in some rare cases. Another advantage is that your jsx is less bloated. But if you want to stick with tw i would really recommend to not use generic tokens like blue-500 but rather create your own semantic tokens, e.g. bg-primary, bg-primary-hover, bg-primary-active.... Take a look at the radix color system, which explains in detail how to create a semantic system for your colors...

[flipperiflop]

Really insightful video, I also find it hard to learn a new technology when I've learned something else - to go back to the beginner state can sometimes be really frustrating.

[ruaidhrilumsden]

I NEED Tailwind. It makes dev work so much better that I introduced it to our large react project at work - even though I have to use a "tw-" prefix to avoid conflict with Bootstrap!

[ewwitsantonio]

I just started learning Tailwind and Next.js a couple days ago. I'm at 1:59 in the video, PAUSE. Yes! So funny. Earlier today I was writing out some quick docs on *why* I decided to choose my tech stack for a personal project that includes Tailwind... and my words were:

"I finally drank the Kool-aid... and I liked it.
At first glance, Tailwind looked like a nightmare version of Bootstrap and I wanted nothing to do with it. But I finally gave it a real chance, and I was wrong. For me, it is really nice to work..."

And the Typography plugin with 'prose' and easy dark mode toggling all made me decide to stick with it for my next couple projects. Ok... continuing the video...

[gigabit]

Mobile dev here! Hated web, didn't know why, and then I met Tailwind and suddenly web did not seem so bad, to the point I started doing more and more and now it's just part of the experience.

Tailwind creators have a post on medium about couple of concepts they discuss in their book. It made me a better front end when thinking about styling go check it out.