Tailwind Is Ugly Code But....

Tailwind the beauty of ugly code my guess is that this is going to be a raving review of Tailwind or maybe it's a hugely insulting or maybe it's neither I don't even know recently I tried out CSS framework Tailwind first off is it a framework how do we okay so when do you call something a framework or a library react keeps calling itself a library and then but it can only be it's supposed to be used in meta Frameworks where the what the hell happened to a framework Library meta framework feel like these people are taking a little bit too much uh that ketamine you know what I'm talking about a little too much micro dosing too much micro dosing is going on in the valley I'm I'm canceling the valley okay I'm canceling the trip to the valley we're all done okay uh recently I tried out the CSS framework Tailwind Tailwind is not new but I had put it off trying uh it's due to the visceral reaction of its syntax it is ugly now I know what you're thinking this is an atrocity what a horrible mess and you're right it's kind of ugly in fact it's just about impossible to think this is a good idea the first time you see it you have to actually try it the Tailwind docks so here's the funny part so I just want to State this explicitly at the beginning when I used to be creating websites for um you know for the internet back in the ie7 IE8 ie9 days effectively what I would do especially during the float days is I would do something like this left clear fix that would give me a float left clear fix and then I could say one-third and I had I have like all these things built in to be able to do like one third of the screen I had all these different things all built in I effectively created Tailwind before tailwind and my all my classes are all my divs would just be a series of classes to describe their style and just Bam Bam Bam Bam Bam right and just that's how I live my life so when I see Tailwind it doesn't actually feel like the worst idea ever this just feels like what I did 15 years ago you know uh the thing is a lot of people I know and respect in the JS front end World wax poetic about Tailwind in an attempt to understand why I decided to use Tailwind in a project the blog you're reading on this uh on this at least I write in July 2023 okay wow that's pretty new okay uh okay so we got some people here we got uh just a whole slew of people saying oh Tailwind I've been riding at the Tailwind is though the experience of setting up this blog and reading through all the Tailwind docs I found myself slowly but very surely coming around to the Tailwind way I'll attempt to list the revelations I have had through the process throughout the process in a series of articles in the first one I'll focus on perhaps the biggest benefit I found in Tailwind minimizing the mental and physical distance you need to travel to understand your code as I get deeper into my software engineering career I've realized an important aspect of what I consider good code is that it enables you to focus very tightly on the section you're working on without needing to jump around to other files or even scroll down the same one so in some sense this is obviously a very true statement I'm just not you know I think the whole front end world is just so that it's it it feels this way but perhaps we're way wrong about it perhaps my brain isn't as surprised it once was but every intermediate step I need to Traverse to understand the full extent of my code I'm looking at drastically uh increases the chance I'll make a mistake when I update it but this in some sense is true about Tailwind you have to know Tailwind before you can use Tailwind right you have to know the out of it and so it's like are you traveling less no you just know it perhaps but I still would prefer Tailwind over a bunch of custom CSS classes can we all be real here would you rather deal with Tom's CSS classes I mean he's a genius but would you want Tom CSS classes or would you want an agreed upon set of utility classes like which one do you want which which version of hell would you like I'm pretty sure we all know which version of hell you want you want Toms absolutely Tom he's a genius but can we get bootstrap back for instance a million helper functions extracted away May uh look and feel clean and modulized but if you constantly need to jump around in your Editor to check on the internals of one of those helper functions you are forcing your brain activity juggle more Concepts at once giving you less flops to come up with an elegant and quick solution to the problem you're trying to solve I know but I again I feel like you just kind of defeated yourself with this thing which is uh Tailwind you must know all of Tailwind there's no such thing as a series of utility classes that aren't as easily understandable it's just that it you have to spend the time learning them but I get I get the idea that you're trying to say which is once you know a system this is why I always argue learn a language just learn the actual language stop looking up things right when you sit there and you look up stuff over and over and over again you just defeat yourself stop being stupid learn your own language that is all you need to do and it makes life a thousand times easier people always have this thing like oh don't memorize something you don't need to look up or just don't memorize something you could look up you know in some sense you're right some sense but when it comes to something you use every day memorize that stop being a dummy just memorize it it's that easy all right I modern CSS is a powerful tool with the things like pseudo classes media container queries and animations and as a result there are non-trivial amounts of details uh about your component on site's Behavior or appearances yep blah blah blah oh I love this tweet people got all sorts of upset apparently because I zoomed in and this image happens to be taken from a potato Tailwind by the way um it's clear that this looks way cleaner than this but if you came back two years later this would be an exercise in pain this will probably you know you'll be able to get up to run pretty quick right here you'll kind of already know what you're doing so that's why I support it right Tailwinds inline styling logic may look ugly but what you see is what you get there's just enough abstraction that you're not effectively writing inline Styles but you also can understand what your markup is going to look like when uh while only looking at the markup okay so once you get into grid layout I feel like I I skill issue so hard uh because I don't do HTML that when I do HTML that every now and then I gr I dude I it takes me 9 000 refreshes it takes me literally 9 000 refreshes to get through it every single time uh the moment I'm just like okay I want I want an input box to grow with text that aligns in the center and then a little box that's like straight on one side but then curls out nicely on the other side so it looks like a nice clean you know once they start doing that all sudden it's just like I I just I just sit there and I just I just have to go through it over and over and over and over so stupid um I I literally make a grid layout once a year and every single time I make that grade grid layout I have to go oh no um the following is a rough version of the navigation bar at the top of this page we have a series of links components nav links that we want to show them next to each other on the big screens with collapsible menu on the mobile I assume this is a valid uh leptos in Rust right all right so there we go Yep this this clearly obviously they must have misnamed this uh this extension probably a Chad Jeopardy problem it probably is RS and this is rust going on right here because I can't I can't I can't read this um let's see there's nothing fairly complex about the logic here uh starting at the top div the class is uh hidden uh that means after the viewport gets beyond the small size uh default 640. ah 64. I haven't seen that term since I was playing Unreal Tournament back in 1998 or something like that the div becomes hidden AKA hide the collapsing version of the menu when we don't need it we also add a bit of top padding to balance the vertical alignment bit with padding one five yeah beneath it we have a UL tag uh with the class hidden on it meaning that it starts hidden and then smithlex uh unhides the div when we cross that small size of the threshold by displaying the display flicks okay there we go yeah that makes sense easy peasy uh the traditional way we can create all this Logic the traditional way too see I'd never do this so that's the thing I don't like to do this is pretty much me back in the IE days is don't do this because this makes your life horrible because then you have to remember all the stupid stuff you have to do every single time right and then you have this thing and then you have this thing the HTML looks cleaner and the CSS doesn't look bad however imagine you're new to a code base or have been uh away for a while and you want to know what the heck yeah this is exact argument that I was just I was just making it looks it looks absolutely nicer this looks absolutely nicer than this 100 on that team but this you can guess what's happening this you got to use your you got to start you got to start searching you gotta get that RG out baby uh let's see uh in theory you could and should make it easier with components but that's more verbosity and chances for things to get out of sync when updates happen besides you'll still need to go to CSS to verify the details not explicitly laid out in the components in the Tailwind version the styles for the element are right there yep uh that's I think what he means by uh like proximity which is proximity Is you can see what's being applied where you don't have to understand the underlying implementation I can totally buy that I could buy that does it scale I was initially concerned uh that using so many classes in Tailwind would become unwieldy and difficult to manage as a project grows however in my experience so far with the grain of salt that my experience is new in the project not crusty with layers of added features this has not been the case there aren't really that many ways to style an element so in reality you seem to hit an upper ceiling of complexity yeah reasonable reasonable okay I think this is a great argument for why I think this is the standard argument people need to make which is which one do you want do you want to come back to something you wrote yourself a year ago or do you want to come back to something that you've continued to use over and over again in many different projects it's as simple as that so yes I would rather do that don't you think Tailwind is just the new bootstrap and will fade away in the end uh less uh the reason why I think because bootstrap also had a bunch of CSS right bootstrap enforced styling it enforced a lot of things and so what you'll end up having with bootstrap is that you'll end up having a whole like load of of things that you everything looks the same that uses bootstrap you can see every single site that uses bootstrap because they all look the same because they're all enforced to look the same it's different than tail when Tailwind kind of lets you be your own unique flower I think you know I think you know the name is the head winogen headwindogen headwindogen we need CSS on the back end

Channel: ThePrimeTime

Views: 90,529

Keywords: programming, computer, software, software engineer, software engineering, program, development, developing, developer, developers, web design, web developer, web development, programmer humor, humor, memes, software memes, engineer, engineering, Regex, regexs, regexes, netflix, vscode, vscode engineer, vscode plugins, Lenovo, customer service

Id: t-eR4hA7obg

Length: 10min 49sec (649 seconds)

Published: Sun Jul 09 2023