My Tailwind Journey
Вставка
- Опубліковано 9 жов 2023
- 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
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 🙏 - Наука та технологія
I want to love someone as much as Theo loves Tailwind
😂😂😂
😂😂
And I want to love someone as much as Theo hates Insomnia
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.
Same here
Same here as well
Everyone hates Tailwind before learning it properly and love it after. Same with TypeScript. I cannot go back anymore.
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.
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!
Damn your videos are so insightful and inspirational. I‘m glad that I finally started to follow you. Thanks, and keep it up!
love your video, now I want to learn more about that thing called tailwind. RefactoringUI sounds interesting too, gonna check this out
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.
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.
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.
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.
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.
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.
Reading the Refactoring UI book was a great insight for me as a backend dev.
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!
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.
I love it too, but I still have a hard time scanning horizontally, even with the sort extension. I would like an extension that maybe does some color coordination and also vertical formatting on dev
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
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
I like tailwind cause everything is a class so u can target them with the classList and styling is super fast once u get used to it.
I can't actually remember how I first got into contact with tailwind, but it also helped understand css better
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 ❤
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.
I have to admit, as a web dev background since 2009 (well schooled on web dev in 2007) when I first saw tailwind, I was very upset and didn't like it at all, but when I was pushed to try it in 2019, I fell in love with it. It was clear that I didn't easily want to adopt to it at first, thinking it was going against all the best practices that I've engraved in my developer heart. However, because of Tailwind making my workflow at least 10 times faster with Vue JS, I ended up getting a ton of work done.
Timi here 👋
I love your videos man
I start using tailwindcss since tailwindcss 1.9.0, that time their playground just a plain html not nextjs, that time I just hard to adapt, but v2 came out it blow me away when that jit compiler introduce
I got into tailwind cause someone used it in a course and not gonna lie, I loved it within 5 minutes.
Radix seems to get overlooked in lots of these videos and on Twitter/X. There is no shadcn without Radix right? Where is the love for the Radix creators! Not saying anything against shadcn - just an observation. Tailwind already gets plenty of love.
i have to begin learning to get used with tailwind
You've convinced me
I need to be able to override styling in real time, so the cascade is crucial.
Had a very similar experience coming to Tailwind.
is there a good way to switch from styled components to tailwind in a big code database without a headache?
im very curious about tailwind alternatives... they all promise a lot but i wonder if they are worth it
Love tailwind content
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...
Your skin looks much better Theo
0:51 is the “Salient” template from Tailwind Pro. Did you work on this directly?
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...
Don't hate Tailwind, neither Bootstrap, but saying it's superior or that you CAN'T do anything without it just make me wonder how good are your skills.
Always had the impression Tailwind was a solution for how bad React handle styles in general, because CSS in JS or css modules are for sure not good ones.
I sincerely don't feel its hard doing long term maintenance with vanilla CSS, unless the person who did it's just bad on doing styles organization.
But the things that i most dislike about Tailwind is writing dozens of class names on a single html attribute, it just makes things hard to read for me, also,
relying on others plugins to "mask" this just tell me this is not the best way to do it.
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.
What is this tailwind typography plugin you speak of? Is it only meant for blogs?
One thing that scares me about Tailwind is the repetition of class names in your markup leading into larger HTML files. Is it a valid concern?
I myself am a vanilla CSS enjoyer. I use PicoCSS for small projects and CSS modules for larger ones. Lately I have been trying out vanilla-extract and I love it.
Tailwind pairs well with component model in modern ui frameworks, repetition is mitigated here - just reuse components
Does using tailwind reduce maintainability for long term project?
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.
the way he talks about tailwind makes me wonder, would tailwind just be redundant in smth like svelte? after all the styles are local to each component
Theo, the reason I haven’t loved Tailwind is because I am an old school CSS guy, and I was promised I would love Bootstrap. But I hated it so much. 😂 Giving Tailwind a full on “try.”
didnt know shad now is at vercel so cool
As someone who mostly uses svelte without tailwind idk why I'm here but still a great video
Really liked the video - still don't understand why it's more maintainable and readable than Chakra UI that allows us to give each UI piece it's exact css props
I gave tailwind a few shots now. I never get the hang of it. I start to lose interest really quickly when my HTML is full of classnames. It feels so... cluttered and that gives me a dirty feeling. I see the advandages, and I really want to like it. But just the looks of it really puts me off, it might be elegant, but it does not look that way. And that pretty much never made me dive really deep into it, and therefore never learning how to make a thing look good. It just feels way more easier with scss to get a good looking result for me. I know that I will give it a try again in the future, it's just.. idk. I feel I will get discouraged again rather quickly and not get to the point where it clicks for me.
I also noticed every single Svelte UI kit is tailwind, or the 1 usin' SASS. guess i should stop bein lazy and learn it better now.
I agree with his points about tailwind.. I don´t buy the mvc part. React has changed the way we used to think about separating state from the view, and with virtual dom it was possible to do that, we actually could do the same thing using some template system like mustache, but it was slow. MVC is still here, React component is a controller, jsx returned is the view, and we delegate model to something like redux, context etc.
That "separation of concerns" thing they sold in Rethinking Best practices talk was not a good argument...
i've been out of the loop for years tailwind helped me understand grid and flex. my first encounter with them was in tailwind. since i know how grid and flex works in tailwind, i know what css to find when doing vanilla css. tailwind stops you from writing css is fake news.
New editor?
bootstrap still best because it has core component js which can be integrated in any js framework and tailwind does not have core js components like modal or accordion
Love your contents more than you love tailwind
I'm a backend engineer with no understanding / instinct for design, so going from "here's a barebones form with a shitty table" to "this looks like a real website" seems like a monumental task, even for a hello world application
Is that the MKBHD plugin👀👀
My moment of falling in love with tailwind came when I saw their arbitrary syntax. Otherwise my journey was similar.
My feeling about these CSS libraries is that they become a crutch keeping people from really understanding how to write good CSS. For me that crutch was once Bootstrap, but when v4 took forever to drop, I decided to move on to vanilla css. I get very similar vibes with Tailwind, but on a nuclear level with the ridiculous amount of utility classes that you need to string together. It's basically a syntax that you need to learn. The fact that Theo needed a cheatsheet speaks volumes. Sorry, I'm def open-minded, but Tailwind is a step backwards. No one will convince me otherwise. Theo… love the videos, though!
Tailwind feels like learning a framework that a workaholic colleague made in his spare time. I'm actually using (and learning) it right now for a project, but this is the absolute worst experience. It's every clean coder's nightmare. It conflicts with everything I hold dear as a developer. Separation of markup/style, clean readable html, not learning a syntax marked for deprecation. The worst one yet is that tailwind is forcing me back to regular html, while pug-notation is my goto way to write templates. Tailwind could maybe be worth it if it's able to generate css from writing a Cause that is exactly what it is doing: treating classes as style and style as classes. I agree with most that it's a big-time anti-pattern and shouldn't be adopted just because it's popular.
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.
that's a nice shirt
I use SASS by the way.
Woa
Tailwind is great.
BUT
I still think you need a layer of theme level abstraction between your styles and your HTML.
Not that you can't do that with Tailwind, but it's kinda against the it's design philosophy... unless I'm missing something crucial..
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
Nobody here buys you hated tailwind at the beginning
Mantine!
tailwind > rust
Stylex. That's all I have to say.
Do you still recommend Refactoring UI today?
$99 for a PDF book (not even a Kindle format!) just seems insane, but maybe it's worth it?
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.
Tailwind is such a game changer.
tailwind is dirt
Beware! According to the thumbnail it's Teo the bootstrap user that talked to us in this video...
I cannot see myself writing frontend code without tailwind...
At some point, Theo will have enough video thumbnails of himself making different facial expressions that he’ll just have to send his script to an LLM that’s been trained on them and then the generative AI will create the appropriate image, including logos and the appropriate face. Maybe that’s already happened?
👍
Isn't Daisy UI the next logical step?
Ok sure, but what if you work at a creative-focused agency with very opinionated designers?
My team members hate tailwind without even trying it. Just by seeing the syntax, they think its bootstrap. Oddly they love SCSS and werid ass names for hundred thousand variables that controls god knows what.
At some point people just don't want to learn anything new... no matter how good the new thing is.
Same boat here but with styled-components :(
first
6:50 What's holding me back from using Tailwind is the implementation complexity of its tooling. Tailwind may be a great idea, but it has too many dependencies for the very simple thing that it does. I may consider using it in a larger project, where I may gain enough to pay back Tailwind complexity. But for smaller project Tailwind tooling is simply overkill.
Release the squirrel from your face! Let it live in the forest where it belongs!
Tailwind is akin to using AI art, just prompting for styles writing by somebody else and claiming you did it yourself. Guess this is the future now. Make no mistake, am going to use it simply to be a good team player but it's sad time to be a developer.
i love ur videos theo but please drink some water before so I don't have to hear the mouth noises 🫶
i hate bootstrap
a
b
c@@Daniel-su4ml
Poor theo won't see 60. He aged 20 years in one year. What a magician. this is what following javascript framework does to you kids!
Tailwind is the shittiest stuff you can add to your project or most of these css alternatives are..
Go with vanilla CSS.
why?
Both bootstrap and tailwind sucks
His Failwind addiction is really bad by now. His pitiful remaining circle of friends should urgently think about an intervention.
It is tailwind not fail wind