56: Tailwind CSS, Headless UI, and Powerlifting with Adam Wathan

Robbie Wagner: [00:09] Hey everybody. Welcome to Whisky Web and Whatnot, your favorite podcast about Whiskey Web and Whatnot with myself, Robbie Wagner, my cohost, Charles William Carpenter III, as always. And our guest today is Adam Wathan. Is that correct?

Adam Wathan: [00:27] Wathan.

Robbie Wagner: [00:28] Wathan. Wathan. Sorry.

Chuck Carpenter: [00:30] Wathan.

Robbie Wagner: [00:32] Okay.

Chuck Carpenter: [00:32] And it depends on where you’re from, maybe.

Adam Wathan: [00:34] Yeah.

Robbie Wagner: [00:35] So if you want to give people a little intro into who you are and what you do.

Adam Wathan: [00:40] Yeah, sure. So I’m Adam. Probably most people at this point know me as the guy who created Tailwind CSS. So that’s kind of what I work on these days. We’ve got, like, a company that kind of works on that these days. There’s about seven and a half of us working on it and the sort of surrounding ecosystem full-time. So that’s kind of what I do. Work on a CSS framework, work on some tools around the CSS framework, work on some commercial templates around the CSS framework. And that keeps me pretty busy these days.

Chuck Carpenter: [01:11] Cool.

Robbie Wagner: [01:12] Sorry. There’s a stink bug that continues to try to climb on my microphone.

Adam Wathan: [01:16] Nice.

Chuck Carpenter: [01:17] Just wants to be a podcast guest.

Robbie Wagner: [01:19] Yeah. I’m assuming the seven and a half means someone works part-time and not that you have a half a person working.

Adam Wathan: [01:25] A half-person. Yeah, that’s right. Okay.

Chuck Carpenter: [01:29] Seems politically incorrect if that was how you’re describing a disabled person.

Robbie Wagner: [01:37] Yeah. So Adam does not drink, so we’re going to do well, he drinks, but not liquor, is what he said.

Chuck Carpenter: [01:44] Yes.

Robbie Wagner: [01:45] So we’re going to do a quick little we did a barrel pick of whiskey. We mentioned a couple of times. We’re going to do that real quick. Try that. And then, we’ll move on to talking more about Tailwind.

Adam Wathan: [01:54] That’s good.

Chuck Carpenter: [01:55] Yeah, we have this thing.

Adam Wathan: [01:57] Oh, nice.

Chuck Carpenter: [01:57] We did a barrel pick for the octopus on there. It’s a real miss, for you could have got one of these. This would have been the rye that turned you onto alcohol or onto hard liquor. Possibly do the traditional course pop. I didn’t hear yours, but I trust you did it.

Robbie Wagner: [02:15] Yeah, it wasn’t very poppy. I think because this has been open a while.

Chuck Carpenter: [02:22] I see. All right, so we have reviewed Sagamore Rye before, so this is our barrel pick. Some of the details about this barrel pick, 110 proof, age seven years. Their match bill is a blend of two straight rye match bills, and we’re lucky enough that this comes from the complex palette of Robert William Wagner. Since they sent you the samples and you get to pick, I just have to trust you.

Robbie Wagner: [02:49] Yes. So I tasted three and picked this one as the one I like the best. And if people are interested in trying it, the NFT is out there. We’ve had a couple of people buy one. So far, no one has bought the gold one yet, which is where you get the whiskey. So keep that in mind if you would like whiskey sent to you. Get the gold one. The Discord should be up in a day or two. I guess whenever you hear this, it will exist because these are behind.

Chuck Carpenter: [03:17] There you go.

Robbie Wagner: [03:18] But, yeah, let’s give it a try.

Chuck Carpenter: [03:20] All right. Smells a little mapley to me.

Robbie Wagner: [03:24] Get some apple on the smell.

Chuck Carpenter: [03:26] Oh, yeah. Caramel apple. There you go.

Robbie Wagner: [03:29] Yeah. Good fall flavor.

Chuck Carpenter: [03:33] Yeah. Got a little bit of that initially, and then you get some. What spices am I getting there? Maybe you can describe.

Robbie Wagner: [03:44] Maybe some cardamom.

Chuck Carpenter: [03:46] Oh, there you go. You’re improving.

Robbie Wagner: [03:49] Star anise.

Chuck Carpenter: [03:50] Your vocabulary, at least. Yeah. Something else in the 21 spice blend for, umami. Yeah, I would say the cardamom actually kind of strikes true for me.

Robbie Wagner: [04:01] Yeah. I mean, it’s got a little bit of, like, mulling spices to it, like continuing that cider theme. It’s like if you had a whiskey with some cider and spices, and you put, like, way more whiskey than the cider kind of has that going for it.

Chuck Carpenter: [04:17] Right. Sagamore really should be sponsoring us at this point, because every time we talk about them, we champion how delicious they are. The folks we’ve shared these bottles with have given stellar feedback. So your palate apparently is pretty good. There you go. With all the ice you put in there.

Robbie Wagner: [04:35] I don’t anymore. I’ve learned.

Chuck Carpenter: [04:38] You’re all growns up, and you growns up, and you growns up. Well, every time I have this, I like it more. I’m a big fan. It’s probably why I drink three bottles a week. Oops. Hopefully, we have some for the NFT people. I’m going to be biased here. I’m going to bump this one right into eight. This is an eight.

Robbie Wagner: [04:56] See, I feel like we can’t do that because, like.

Chuck Carpenter: [04:59] I’m doing it.

Robbie Wagner: [05:00] We picked it, and, like, we’re tooting our own horn a bit. Like, I don’t know that it is. My problem is I don’t know what an eight would be, so I’m afraid to get, like, push that bar up. But I do agree that I don’t think that I have any complaints about any of it. I think it’s, like, the right amount of alcohol, good flavors.

Chuck Carpenter: [05:17] Yeah.

Robbie Wagner: [05:18] Let’s say it’s an eight. Why not? This could be our first one.

Chuck Carpenter: [05:20] Yeah. It’s got enough proof to be a little hug for me, but nothing too burning or painful. It has just a good round palette of flavors as we’ve described. I mean, for a rye, it’s just like, it’s not punch you in the face, but gives you a little bit of that spice. The price point normally would be pretty good, too, I think. Well, it was like $60 a bottle, give or take.

Robbie Wagner: [05:44] Yeah.

Chuck Carpenter: [05:45] All the things, it just checks the boxes for me. And so I’m going to say, like, hey, and even if we’re segmenting by type as a rye, this rye is great.

Robbie Wagner: [05:56] Yeah. I mean, the price point on this is a little higher just because we did the whole pick-it-ourselves thing. You can get other barrel picks from Sagamore, but keep in mind each barrel pick is much different. Like the other two that I tasted next to this one, one of them literally was like half-floating little pieces of black barrel. Like it was very smoky, very different. And then the other one was, I don’t know, more Scotchy. So this was my favorite.

Chuck Carpenter: [06:26] Oh, yeah. Okay, well, yeah, scotchy. Scotch. I think Adam would agree. I think he would say this is also even as someone 100%. Yeah, absolutely. This is Tailwind-endorsed. We’re going to put that on the bottles from here on out. And here, Tailwind endorsed Sagamore Rye from Whiskey Web and Whatnot.

Adam Wathan: [06:50] Cool.

Robbie Wagner: [06:51] So, yeah, let’s circle back. And for people who don’t know and haven’t been on the Internet in a while or something, tell people a little bit about what Tailwind is.

Adam Wathan: [07:01] Sure. So Tailwind is like we call it a utility-first CSS framework. So the idea is it lets you style things basically directly in your markup with little utility classes that just do one thing, like font bold to set the font weight, or BG black to change the background color or underline to add underlined things. So you end up just like composing a lot of these little single-purpose classes directly in your markup. Often there’s 15 of them on a single element to do what you want to do. And you kind of build everything that way. So you don’t really end up with any CSS that’s kind of project or content specific. It’s kind of flipped where you have this kind of pool of CSS that is kind of available at your disposal, and you sort of grab the classes you need to apply the styles you want instead of sort of the reverse workflow that I think is probably more common, or at least like how I used to work before I started doing things the way that I do with Tailwind, where you have some markup and then you needed to style it. So you open up a CSS file, kind of hook into that markup based on how it was structured or whatever data attributes you added, or custom classes you added or whatever, maybe with a little bit of nesting sprinkled in there to target the things that you want and just write the CSS that you need to style that bit. So, yeah, we first released it. I think it was Halloween 2017, was the first version, like 0.1.0. We’re on version three now. It’s grown a lot in popularity and in terms of kind of what it can do. And these days, the way that the whole thing works is it sort of scans your HTML files to detect what classes you’re using and just generates just the classes that you’re using based on what it finds. So you end up with, like, the smallest CSS possible based on what you’re using. And you can even do crazy stuff these days, like write classes that basically conjure up new CSS into existence. Like, say, you need to set the background color to some hyper-specific text code, but you don’t want to configure that as part of your sort of, like, design tokens for your site, because Tailwind is generally driven by this big sort of object that you put together. It’s like, here’s my color palette, here’s the font sizes. I want to use, stuff like that. Now you can even do weird stuff like BG dash, then square brackets, some hex code. And Tailwind will just be like, oh, you need a class that makes the text for that background, that exact random hex code. I will create it for you on the fly. So, yeah, it’s gotten pretty nuts in that sense, but that’s sort of like the shortest pitch for it, I guess. And I can talk more about the motivation or benefits or how to achieve certain things or whatever you guys are sort of interested in digging into.

Chuck Carpenter: [09:48] I want to know exactly that. So what was the problem that was occurring for you that you were like, hell with this, I’m doing this thing, and then got you down the path, to begin with?

Adam Wathan: [10:00] Yeah, I guess CSS had just been like a battle for a long time, just trying to always look for that silver bullet that felt like it was going to give me sort of a maintainable code base where I felt like I could come back to things and know how to make changes or even know how to do something right in the first place. Like, I tried so many different things. I tried, you know, the sort of pure semantic approach where you try to put as few styling-related bits of information into your markup as possible and then just sort of write whatever CSS was necessary to sort of hook into it in whatever way you could sort of imagine kind of like the old CSS Zen Garden sort of thing. And then I just found that no matter what I did, everything slowly just spiraled out of control and you sort of lose track of what changes were saved to make. And every time you needed to style something new, you never really knew if there was something you could reuse that had already been used somewhere else. So you end up trying to create these little safe corners in the CSS file for yourself with really specific names like profile, page header, avatar wrapper. Okay, that’s not going to conflict with anything else anyone else has done. And your CSS just kind of grows and grows and grows. And CSS that’s not even being used anymore is still in there because no one knows if it’s safe to delete or not because the relationship between the markup and the CSS is very complicated. Like, oh, this end child div child selector thing on this class, is that used anywhere? Well, I know the class is still used, but is there anywhere where there’s actually two children anymore, or so do I still need this? Do I not need this? And no one really looks at it or maintains it. You just have this append-only style sheets world that I think a lot of us have seen, where you just end up with a 700-kilobyte CSS file basically at the end of the day on a big project, and everyone’s afraid to sort of touch it or refactor it. What I kind of found for me as I was really getting obsessed with this problem. I just remember it was probably 2013 where I just kind of had this moment where I felt like I’m going to figure out how to write my style sheets in a way that I feel confident in. Where I feel like I can build what I want to build. That I can maintain things and make changes when I need to make changes. And that’s when I really started digging deep into all the content out there I could really find. And there’s this blog post by Nicholas Gallagher I think worked at Twitter at the time. He’s the guy who created Normalized CSS originally, which is pretty OG CSS reset kind of from back in the day. And he wrote this big blog post about it’s called About HTML Semantics and Front End Architecture. And he really makes the case for using sort of presentational class names and goes really deep into and explains kind of all these benefits. And basically, just at the end of the day, the whole thing ends with him. Basically, the quote is something like, if you want to be able to keep your CSS simple and maintainable, like, you have to accept that you’re going to have to do a lot of work composing things in the HTML instead. And that it’s better because, like, most people feel like, really confident and sure themselves when they’re just making little changes in the HTML file, even if the HTML file is messy. But almost no one feels confident, like, going in and making changes to this nasty, complex CSS file where everything’s global and targeting God knows what and God knows what pages. So that was, like, really interesting for me. And that kind of changed my whole thinking about, like, even stuff like Bootstrap. I remember when I first started using Bootstrap, I felt this, like, compulsion to not want Bootstrap classes in my HTML. I wanted to use their design components and stuff like that, but I wanted to figure out ways to use them as, like, mix-ins so I could mix in a button into like a specific button tag and not actually pollute my HTML by putting, like, a BTN class somewhere. You know, once I read that article by Nicholas Gallagher, I felt like it kind of like gave me permission to do this thing that we’ve been told for so long was wrong and actually sort of experiment with it. And I just started using things like Bootstrap on projects and just like not worrying about that sort of dogmatic purity element anymore. And lo and behold, it was actually just really productive and fun. Just like adding like one of the classes in Bootstrap is was like cols two to make something like two columns wide, that’s like totally evil if you are looking at CSS best practices or whatever because you’re writing a class that specifies how something should look instead of what something is. So I just said to hell with it and started doing embracing that, and everything kind of got easier and easier. And then, one day, I was working on a new project, and Bootstrap I think I just released Bootstrap Four or just started beta in Bootstrap Four, and they were switching from laaS to SaaS. And I really liked laaS as a CSS preprocessor, and I didn’t really like SaaS and I had to decide like. Okay. Do I want to just keep using Bootstrap? Which is a great tool that I love. And just bite the bullet and use SaaS instead of laaS, or do I care more about laaS than I do using Bootstrap? And I decided I want to keep using laaS. And it also just felt like a fun challenge, just like right on my CSS, totally from scratch for a change, instead of starting with Bootstrap and making customizations and stuff like that. So I kind of just started from nothing and wrote a CSS for this project from scratch using that same sort of like mentality of trying to write in my head. I was thinking of it as a library-style CSS. What CSS can I write that doesn’t really know how I’m going to use it, it only knows about itself, like, okay, so there’s like some cards, there’s some buttons, there’s some grid stuff, whatever, but it doesn’t know that there’s like a subscribe to newsletter button on the site, you know what I mean? Or anything like that. So I tried to build that all up in this way where the CSS was very decoupled from the HTML, which I think is very different from how we would have done things in the past. Normally your HTML would be like very specifically crafted for this HTML, and it would only work with that HTML you’ve written for that site. Instead, you have this HTML that has a bunch of references to existing CSS. So I built that site, and it was productive. And then the next site that I wanted to work on, I decided to just grab all that CSS and bring it over as a starting point. And I did that from project to project to project. And I started noticing that the only things that really survived every port were the things that were lower and lower level. So something like a class that adds margin left to something that’s like useful in every project, but a button might look different in every project, so I had to delete it and create a new one every single time. So it’s kind of like every new project. This original CSS thing was going through like another filter, you know what I mean, until what was left was just these low-level utilities. And I started just building things more and more with just the really primitive stuff and composing it together in my markup. So in the past, I might have had one class that turned something info a flex container and centered everything over time. I started having a class that added the display value for flex and then another class that like set the align-items value and stuff like that. And that’s like just like the natural progression that happened as I was just like trying to pay attention to what are the things that are most reusable, what are the things that don’t seem to change from project to project? So I was having a lot of luck with that, but no real intention of turning into a library or anything like that. And then I was doing a bunch of these live streams where I was building this SaaS idea that I had. And in my mind, sort of the draw was going to be like I was doing a bunch of test-driven development stuff with Laravel, which is sort of the back-end framework that I was using, and building a bunch of cool UI stuff with Vue at the time. And I thought that’s what people would be interested in seeing. But all the questions and all the comments in the chat and stuff on all the live streams was just, like, what is the CSS? I’ve never seen anything like this before, or where can I get this to try it on my projects? And it didn’t even occur to me that this would be something that people were interested in. So based on how much feedback I was getting on that stuff, I decided, hey, maybe I’ll just, like, turn this into a little open source thing since I’m porting it around from project to project anyways. And around that time, a friend of mine, Jonathan Rennick, was working on a redesign of his project and was curious to try it on his project. And I thought, oh, this is kind of a cool forcing function for figuring out how can we make one code base that’s useful in two projects. Because up until now, I thought it would be copying and pasting in and editing at every time. Like, what abstractions do we need to create, what sort of level of customisation do we need to support? Whatever. So I worked pretty closely with him on that to sort of figure out how to extract something from it that would actually be useful on multiple projects. That you could pull in as an actual dependency, and yeah, we kind of spent a few months hacking on that for fun and evenings and weekends sort of thing, and then a few months later, we put out like the first version of it. So that’s sort of the history about, I guess, and how we got there, and yeah, so I don’t know, I can give you guys a chance to get a word in, but yeah.

Robbie Wagner: [19:52] Yeah. I don’t remember what Chuck had asked originally. Were you saying why did you make it? I guess that’s what you asked.

Chuck Carpenter: [20:00] I mean, you could paraphrase, I suppose. Yeah, just like what was the problem set that you ran into that you were like, alright, I’m going to try this path, and I think I did get that answered. Yeah. It does start to make me kind of think back to so when I started doing things on the web, we were using tables for layout, and a lot of inline styles to be explicit within whatever cell or you’re dealing with there. And in a way, it kind of feels like shorthand to inline styles, but then gives you here’s your toolset, and it’s consistent because you’re using classes, and you’re not writing it out and getting a little crazy with all that. It’s probably a lot more readable. But it does feel a little bit I don’t know how you feel about that comment. But a little bit like going back to inline styles and saying explicitly here on this element in HTML, and we’ve actually started talking a bunch in this podcast. I know you’re an avid listener about like HTML kind of did it right. And it’s a good tool. Right. And CSS explicit to that, like, hey, that’s another attribute.

Adam Wathan: [21:04] Sure.

Chuck Carpenter: [21:05] And it’s very readable. I can actually see those parallels. It’s probably not a popular opinion, but I mean, the reality is, is that maybe it was a good way of doing things or, you know, one possible way, there wasn’t the wrong way, and we lost a sense of that.

Adam Wathan: [21:20] Sorry, that inline styles were a good way of doing things.

Chuck Carpenter: [21:23] Could be, right? If you think about it right. Like these classes, these class names in line to the element being very explicit to what you’re doing and makes it more readable to what that element is getting.

Adam Wathan: [21:35] It’s all like colocated, right? Like you kind of look in one spot and sort of understand, you don’t have to jump around to try and get the full picture, basically.

Chuck Carpenter: [21:43] Yeah. And so, like you were saying, ml dash two is very readable versus margin-left, blah blah, blah.

Adam Wathan: [21:51] Yeah, it’s debatable, I’m sure, but it’s a little more terse so it doesn’t get quite as hairy.

Chuck Carpenter: [21:57] Right, yeah.

Adam Wathan: [21:58] I think the first thing to think about there is just, a lot of people do have that reaction. Like, oh, Tailwind is just inline styles, and the reality is like yeah, that’s basically right. The problem is a lot of people, when they say that, they’re kind of saying it with this implicit part to it, and inline styles are bad. And I would say that the real issues with inline styles are not like what most people think are the issues, which is, oh well, you are putting everything in one place, and you’re not separating your concerns and some more of these idealistic values. To me, the real issues with inline styles that necessitate me creating something like Tailwind are its technical limitations, which is how do I change the background color of something on hover with an inline style? You can’t. There’s no pseudoclasses in inline styles. How do I change the layout at a different breakpoint inline style? You can’t because there’s no media queries in inline styles, and before, we had CSS variables everywhere. How do I have a single source of truth for, like, my color palette or whatever? You couldn’t. Now you can with CSS variables, which is great. So that’s like no longer a thing. So a lot of people or not, I wouldn’t say it’s like a super common thing that comes up, but I’ve seen discussions before come up where people have said, especially people who work on the CSS specs and stuff, what improvements could be made to CSS that would make you not need a tool like Tailwind anymore. And the problem is like the improvements are not to CSS. The improvement is the style attribute in HTML, like make the style attribute better, and then we won’t need Tailwind, you know. It’d be more verbose, for sure. But those are the main problems that Tailwind is ultimately trying to solve is giving inline style superpowers. It’s not like inline styles are evil, it’s like inline styles are awesome. Let’s make them super awesome. That’s kind of like the mentality. So you have to sort of to even have a conversation. I guess you first have to be willing to suspend your disbelief that maybe inline styles are not as bad as what you’ve been told. But yeah, to me, Tailwind is basically inline styles with a bunch of extra power bolted on. It’s not like, oh, inline styles suck, and you shouldn’t do inline styles. But Tailwind is okay, it’s like Tailwind is inline styles, plus they were good. Let’s make them great. That’s sort of the attitude I have about it, anyways.

Chuck Carpenter: [24:33] Yeah, well, I think it’s just like the so we’ve been polluting our markup with JavaScript now for a little while too. So I mean, there’s already some of these.

Adam Wathan: [24:43] Yeah, 100%.

Chuck Carpenter: [24:44] Potential regressions there, right?

Adam Wathan: [24:46] That’s a good analogy. Like do you remember when people used to talk about unobtrusive JavaScript back in the day where it’s like? Okay. How can I target this element and attach some behavior to it without you ever being able to tell just by looking at the HTML that I’m attaching the JavaScript to it?

Chuck Carpenter: [25:01] Yup.

Adam Wathan: [25:01] And that to me is like. The same argument as. Like. They really trying to separate your CSS or trying to not let your CSS leak into your HTML at all. But we’ve all sort of, I mean, we all I’m sure there’s a lot of people who are still who would still disagree, but it’s definitely not that controversial anymore to have an on-click handler on an element in your React JSX or in your Vue component or using Stimulus or whatever else. It seems like pretty, I would say, like, the consensus, in general, seems to be that putting an event handler on an element directly in the markup is like the easiest way to understand how things are working and build that thing in a way that’s maintainable. And I think what we do with CSS is really just like the same thing, just for styles.

Chuck Carpenter: [25:52] I think we’re having this conversation too, like, 15 20 years beyond where the concerns being addressed at that time and the push for that separation of concerns was a bit different. Right, it was the browser isn’t doing a great job in accessibility, and if you do inline styles, then you’re overriding potential user preferences that could be required for accessibility purposes. Right. Like, one of the big things was, oh, you do that, and now the user can be creating their own CSS, which I doubt that happens hardly anymore because there’s a lot of technology there. Hardware is faster, there’s assistive software. There are all of these different things that are sort of addressing those problems now. And it’s why we’re having the conversations around, do we need single-page apps anymore. I mean, maybe they’re still okay, but maybe also server responses are really good, and server-generated sites actually aren’t a horrible thing. So approach that as a potential option there. Multi-page apps are now a thing again.

Adam Wathan: [26:52] Yeah. And there’s a lot of hybrid approaches, and people are trying to find ways to get the best of both worlds and exploring a lot of things there. Yeah, I do think that there is, like, the history of the web is interesting there, right? When you’re serving documents, and you want people to be able to have, like, well, this is how I prefer documents to look when I look at them in the browser. This is how I prefer them to look. Being able to have, like, a user-provided style sheet and treat the source as this, like, untouchable thing makes a lot of sense, I think, trying to apply that same workflow to the sorts of things that we build a lot of time now, like applications like Riverside that we’re looking at right now. This is totally different than reading an article or something. And I still see, like, the value in being able to write your own style sheet to tweak things. People do that all the time with really popular sites. There’s like some Chrome extension that’s really popular for that where. You can even download stuff that people are like, oh, I want to hide all the promoted tweets on Twitter. So here’s a style sheet you can throw in to do that. That’s still pretty cool. But you also have to, like, weigh the needs of the people building the software and their ability to actually keep maintaining it and develop new features and move at any sort of reasonable velocity without things slowing down. So that might be in conflict with the ability to easily totally change things from the outside with a user-provided style sheet. The Tailwind sites, they introduce a lot of friction if you’re trying to edit the styles of a Tailwind from the outside that way. So they’re sort of at odds with each other in a sense, I think. But that doesn’t mean that it’s not important to be able to do that as, like, the actual developer. I definitely think a lot of things to build on the web now. It’s important to look at the patterns and stuff that work for more from building, like, desktop applications, than it does for styling documents. I always, like, laugh when I think about even, like, going back to, like, when I was in college, building stuff like wind forms and stuff, remembering what the UI was like for that. You’d, like, drag a button into the thing, and you’d click the button, and the little properties panel would come up, and you would, like, edit the color of the button. It was attached to the button, the text that was in the button, and the color of the button were like two properties that were right on top of each other in the same window, and no one ever had any complaints about that in those environments. It totally makes sense. But when you try to introduce that type of stuff on the web and thinking about the text in the button and the color of the button being defined in the same place. All of a sudden, people start kind of having this allergic reaction to it because it feels like. Oh. You’re mixing styling and content. But for an application. It just doesn’t really feel the same. So I don’t know. It’s one of those things, too, where it’s even hard to even articulate the actual benefits of it. I think Tailwind is fairly unique in how extreme your initial impression of it tends to be from the outside versus the impression you have of it when you’ve actually used it to build something. I can’t say I’ve been exposed to many other things where you hate it so much before you try it and love it so much after you do.

Robbie Wagner: [30:25] Yeah, it’s very polarizing. On Twitter, there’s like, people either love it a ton or hate it, and I don’t really understand why people hate it. Like, in my opinion, one of the hardest things is naming things. So, like, having to come up with a class name for every little thing and then put styles on that and then, okay, maybe I have thousands of class names in my app, and half of those have, like, display flex. Well, it’s not a huge saving, but like, if I have a utility for that, I can save, you know, however many bytes that is. If you multiply that times all of the things, it just seems like a no-brainer.

Chuck Carpenter: [31:04] I think it’s usually based on how invested someone is, in an opinion. If they went down heavy the BEM path or Atomic CSS or whatever, they love the use styles hook, whatever, they’ve just really bought into a way of thinking and then something that’s in opposition to that.

Adam Wathan: [31:25] Yeah.

Chuck Carpenter: [31:26] Then, you know, they’re like, no, no, no, I made the right choice. And that’s, I would guess, most of the time because I think it’s, like you said, there’s a lot of context in making those decisions. And for me, I like going to Tailwind UI and doing copy-paste, make a couple of tweaks, and have a thing because I don’t like to do a lot of UI work. I want to do the other functional aspects. Yeah, this is great. Straightforward. Boom. Done it. If I was working for a university and maybe have like a documents database or something like that and was like, taking in things in that context, maybe you’d feel differently about that, and maybe you’d want user flexibility and how they take in really deep, heavy, long-form content like that. I don’t know.

Adam Wathan: [32:13] Yeah, you have to think about what your problems are that you need to solve, for sure. Even in Tailwind sites, you often have some element where you can’t just get your hands dirty in the HTML and do stuff. Like if you’re building a blog, maybe your blog posts come from, like, Markdown, and you’re not going to just, like, throw tons of classes in the Markdown. So you need to figure out a way to say, like, okay, there’s this black box that gets injected in the middle of the page, and I need to style that from the outside. I can’t just, like, go into it and start, like, adding classes to things, and that’s totally fine. You know, that’s a constraint for certain things, and you work with it, and you do the best you can to, like, make that good. You know, that’s like, the Tailwind documentation is like, that we have to, like, style an H2, and we can’t just put the class name on the H2. We have to do it from, like, a parent, so we have like a one div with, like, some sort of class on it that has all this knowledge about everything that could be inside it and targets it, and that’s great and works fine in that situation. I would hate to have that constraint for a whole site to feel like I’m never allowed to just put things directly on things. To me, that’s like a last resort, but yeah, I agree that I think a lot of the visceral reactions that people have are just often driven by, like, I’m not even interested in giving this a chance. I’m happy with what works for me, and that’s totally fine. I have no issues with anyone being happy with anything that they’re doing. It’s great. Yeah. If there’s another point I wanted to respond to, but I can’t remember it, so maybe if it comes to me, we’ll just get there.

Chuck Carpenter: [33:52] Yeah. Feel free to interject at whatever point. No big deal. Yeah. I just think that in engineering community, there is somewhat of like a fan-person mentality. You kind of get involved in your thing. I think Robbie would say that’s why React is pervasive because just was well marketed for a long time, not because it’s the best.

Robbie Wagner: [34:19] Yeah, I was going to mention that earlier. A lot of things to keep in mind when you’re building anything is that whoever’s loudest at the time is going to be very hard to go against. There’s going to be a lot of people going one way and doing things a certain way, and that’s going to be what we say is saying inline styles is bad was like a thing for a long time, and there were reasons and the same for anything. There are reasons, but those things might not be real reasons five years after that or even a year after that. Like, things go quick, so don’t hear one thing and then go, okay, this is the way it is. I’m never changing it. You got to be open to going with the flow, and maybe there’s better ways to do it that conflict with some of those old ideologies.

Adam Wathan: [35:03] Yeah.

Chuck Carpenter: [35:05] Yeah. Just ask the questions sometimes. Why is it still relevant? Since I’m older than the internet, I’ve seen those phases. Sometimes I can sit back and be like, actually, okay, yeah, I was on board with that for a little while. I’m not sure I am anymore.

Adam Watha: [35:23] Yeah.

Robbie Wagner: [35:24] So pivoting slightly. Can you talk a little bit about Headless UI and how that fits in with Tailwind?

Adam Wathan: [35:32] Yeah, sure. So Headless UI is like, I don’t know what our tagline for it is these days, but it basically tries to be an unstyled kind of behavior focus component library. So trying to build things like a drop-down or a modal dialogue or even like a toggle or something is a lot more involved than you’d think when you want to handle all the accessibility cases and concerns that you should probably be worried about, like making sure you can open a menu button and hit up and down to navigate the options sort of stuff. Or making sure that when you’re in a dialogue and you hit tab, like focus circles back to the beginning of the dialogue, and you can’t just like tap out of the dialogue without a closing sort of thing. There’s a lot of trickiness there, or even just like adding ARIA attributes to the right things and managing, like, what the value of ARIA active descendants should be on a list box as you navigate and hover over different items and stuff. So historically, if you wanted to just not be concerned with all that stuff, you’d want to pull in some existing library. Like Select2 is like a one that we’ve probably all seen in the wild that handles all that stuff for you generally well, but also kind of comes with a bunch of styling. Usually, it was all kind of just one package, and if you wanted to sort of customize it to make it match the rest of your projects that didn’t just look like this third-party sort of widget, you have to write all this sort of custom CSS. And I think that’s generally okay. But we kind of found when we were building sites with Tailwind that wasn’t that sort of forced you out of this workflow, styling things in your markup, because I can’t just, like, add whatever classes I want to all of the individual spans and divs and whatever that Select2 is going to generate because that’s kind of internal to select too. So we thought it’d be cool to try and build a library that tries to handle all of the keyboard stuff, all of the ARIA attribute stuff, all of the state management stuff, and everything, but gives you full control over what elements are rendered unless you add classes to them. So the motivation really was to create like a very Tailwind-compatible set of UI components where you can style them however you want and sort of like decouple the styling from all of the complex interactions so that stuff can be maintained by the library and bugs can be fixed there, and you can just pull them in and not think about them yourself or have to worry about how it all works but still be in total control of the styling. So we have a library for React, another library for Vue, and one of the main motivations for doing it in the first place is we have this commercial product, Tailwind UI, which is like a big website of component examples and templates built with Tailwind. And that’s sort of like the product that basically funds all the open-source stuff. People buy that, and that gives us what we need to be able to pay the team to work on all the open-source stuff. And when we first released it, we didn’t have anything like Headless UI, so it felt like we were pretty limited in what we could add. It was hard to add really interactive examples because, how are we going to write the JavaScript? Are we just kind of like, okay, we need to make like a dialogue? Are we just going to write 600 lines of JavaScript and just give that to you to pull into your project to maintain yourself? That kind of sucks, especially if we need to fix a bug in it. How you find out about that?

Chuck Carpenter: [39:02] Yup.

Adam Wathan: [39:02] So we wanted to figure out a way how can we like wrap all the stuff up into a library so that we can add interactive examples to Tailwind UI where the only thing that’s in the Tailwind UI example is like the markup and the styling-related stuff, and all that complexity is tucked away in this dependency. So that’s sort of like the motivation for that. So we can add dialogues, we could add drop downs, we could add combo boxes and radio groups and tabs and stuff like that. So we released that. I think like it was probably April 2021 was the first release of that stuff, and it’s become like a really cool tool. It’s a really good companion for Tailwind. So it’s cool that we’ve been able to sort of do that. And these days, we sort of like drive out new stuff for that by just working on commercial templates and stuff, which is kind of proven to be like a pretty fun workflow. We have the designers cook up something really cool. We try to build up a Tailwind, we find some things that we can’t do. So we add new features to Tailwind to be able to do it. Or there’s some interaction that we need to figure out how to support. We add new features to Headless UI to do it. So the commercial stuff has been like a good way for us to sort of dog food our own tools and find real-world kind of things that are too hard to do with them that we can figure out ways to make easier. So it’s a cool sort of feedback loop there, and that’s kind of what kind of keeps his busiest company all the time really is just like being in some part of that loop, basically. So like August and September, July, August. We did a lot of work on Tailwind UI, we released a bunch of templates, and now this month, we’ve been working on like a Tailwind 3.2 release with a bunch of stuff that we feel would have been nice to have based on what we learned from building on that stuff. And then, at the end of the year, we’ll probably swing back over to designing and building stuff, and then after that, probably swing back to improving the open source stuff based on what we learned from that. So yeah, that’s kind of where Headless UI came from and kind of how it works. But I can answer any specific questions you have or anything. For sure.

Robbie Wagner: [41:09] Yeah, I guess related to you said there’s React and Vue support currently. Is there anything planned as the next thing to support, like SolidJS with Lit JS?

Chuck Carpenter: [41:22] Exactly where I was going.

Robbie Wagner: [41:23] Insert hype framework here, JS.

Adam Wathan: [41:27] It’s like an enormous amount of work to support even one. So I’m not sure what the future is there. I think there’s like a community-maintained Svelte one, which is cool to see that someone tried to take those API decisions to do it that way. I know. Like Caleb Porzio’s work on an Alpine.js version of Headless UI 2. I think that’s probably the only realistic way that’s going to happen is for people to just sort of be inspired by those APIs and sort of maintain what they want that solves sort of the same problem and borrows as much or as little as they want from that stuff. It’s tough because, as a company, we’re only, like I said, seven and a half people and we use React for everything just because that’s what everyone knows, and that’s what we’ve historically used. So even the Vue stuff, in a lot of ways, is like a bit of a burden to maintain because we just don’t use it ourselves, you know, which is not a situation I really love being in. I prefer to be like really using the stuff that we’re maintaining ourselves. Otherwise, how can we know if it’s really any good? So there’s no concrete plans for adding new libraries that support other frameworks if we ever kind of get the SolidJS bug or something and start using it for everything ourselves. I think that is why for SolidJS will just will itself into existence out of us desperately wanting it. But until then, I think it’s better for the community to sort of handle that stuff because just too resource-constrained, really. At the end of the day.

Robbie Wagner: [43:10] That’s fair.

Chuck Carpenter: [43:11] So it is open source then. Headless UI is open source. And if someone wanted to contribute a package for their.

Adam Wathan: [43:16] Totally.

Chuck Carpenter: [43:17] Flavor, totally cool.

Adam Wathan: [43:18] Yeah, probably it would be better to just do it in your own repo. Open source is tough, man. It’s all just like drive-by contributions, you know what I mean, where it’s like, okay, here’s a big feature. Enjoy maintaining it for the rest of your life. Once it comes in, you’re kind of responsible for it. It’s like someone dropping a baby off at your front door a lot of the time. So we try to be careful about sort of taking that stuff on and be very deliberate about the stuff that we take on. So we do end up encouraging people to kind of keep stuff in their own repositories, in their own projects a lot of time, just so that it’s clear, like, who’s maintaining it. But yeah, it’s open source in the sense that you can go and study all the internals and contribute patches and stuff to the Vue and React packages and probably forking. It doesn’t make sense to make like a SolidJS version out of a fork, necessarily, since it’s a different framework. But yeah, you could totally just dig in there and sort of get as much inspiration, or whatever you want to call it, as needed to sort of put together something that solves those problems in the most SolidJS-y way possible.

Robbie Wagner: [44:33] That’s fair. So let’s pivot to a little bit of what not here. Tell us about your powerlifting career.

Adam Wathan: [44:41] Yeah. So. I mean. I got it into Powerlifting when I was. Like. Probably like 21 or something like that. Just because I was trying to get into exercising, and I never really was able to stick with it when the goal was just like to exercise for the sake of exercising. But eventually stumbled across, like, some materials online about strength training, and then it was like, oh this is like the missing keywords that I needed. Not like home gym workout or whatever. And kind of got into a bunch of that stuff and kind of got bit by the bug of just measuring progress and like how much weight you’re lifting. Instead of, like, how much better you look in the mirror or something. Because it’s just like so much more measurable. It’s like a number on a piece of paper. Like, I bench pressed this last week, and I bench press this this week. And for me, anyways, like, that type of like, measurable progress is, like, super addictive and motivating. So I kind of kicked off, like, a long obsession with that stuff to the point where, you know, within like, four or five years, I was competing in the national powerlifting competitions, and I won the last one I did, which was like, 2013 in my weight class, which is pretty exciting. Then I kind of got like a bad nagging back injury that sort of plagued me ever since then, and haven’t been able to do it at the competitive level, but it’s something that I still follow closely. And now that at least I’ve got sort of a habit of training, I don’t really need the same seeing those numbers go up to kind of keep me doing it. It’s just like, you’re doing it for so long, you do it now because it’s a habit, thankfully. So I’m glad I’ve been able to do that. But, yeah, that’s, like, a big thing for me outside of the web development part of my life, for sure.

Chuck Carpenter: [46:28] Do you have a set up at home, or do you go to a gym?

Adam Wathan: [46:32] Yeah, I have, like, a garage gym that I kind of built together at a different stuff over the years, which has been good, except in the in the wintertime it’s pretty rough, but in the summertime, it’s rough too. Like, actually, right now, it’s like the absolute golden time of year. It’s like a cool 60 degrees outside or whatever where and you’re in there, and the perfect weather for working out in the garage. But yeah, cool.

Chuck Carpenter: [47:00] I’m in Phoenix. It’s still hot here in the garage.

Adam Wathan: [47:03] So yeah, I think it’s hot in Phoenix forever, right?

Robbie Wagner: [47:06] It’s hot all the time.

Chuck Carpenter: [47:07] Yeah, sort of.

Adam Wathan: [47:08] We’ve always kind of talked about maybe visiting Arizona one day because it seems like a cool spot, which is like a very different sort of scenery to check out than what we’re used to. Just like cool desert rocks and awesome kind of stuff to see. So I kind of have it in, like, my weather app on my phone, and once in a while, I’m just kind of like, oh, it’s miserable here. I wonder what it’s like in these spots. And, dude, Phoenix. It’s a hot place. That’s what I’ve learned.

Chuck Carpenter: [47:36] Yeah, but it’s different because the humidity is way lower. I lived in DC for seven years and grew up in the Cincinnati area, so I’ve dealt with humidity before. And when you see 90 here, it’s not like 90 in a swamp or something.

Adam Wathan: [47:50] Yeah, but when you see, like, 120, that feels like it’s still hot.

Chuck Carpenter: [47:56] The other misnomer, it is very hot, but we have pools and air conditioning, so it’s all tolerable. But also, a lot of people will just, like, take off and go San Diego in 6 hours or something. Or you can just drive a couple of hours up north. The elevation is way higher, and so it gets cooler there too. You can ski. Actually, what we do in the winter is when there’s snow up north, we can drive up north, let the kids play in the snow for a couple of hours, and then drive back down and just wear T-shirts. So it’s kind of a win-win.

Adam Wathan: [48:26] Yeah. That’s cool.

Chuck Carpenter: [48:27] Yeah. Two-thirds of the state is actually a much higher elevation. Like, mountains here go as much as 11,000-foot elevation, I think is like the biggest one here. So you’re like 7000 ft above sea level other than the desert. So the desert is like the other third. There’s like Phoenix and Tucson, the most populous cities. That’s why we’re kind of known that way. But actually, most of the state isn’t.

Adam Wathan: [48:51] Very cool.

Chuck Carpenter: [48:52] Kind of like the fun fact there is. You get the best of both worlds.

Adam Wathan: [48:55] Very cool. Yeah. We’ll have to make it up that way sometime, for sure. Definitely seems like a spot worth seeing.

Chuck Carpenter: [49:01] Yeah, I think it’s pretty. I like desert landscape personally. Like, the Saguaro cactus grows here, nowhere else in the world, and being able to see that is pretty nice. I’m not sure where you’re at. I didn’t stalk you that much.

Adam Wathan: [49:15] I’m outside of Toronto, like an hour outside of Toronto.

Chuck Carpenter: [49:19] Oh, yes. That’s why you’re so polite. That makes sense.

Adam Wathan: [49:23] Basically, live in Buffalo weather.

Chuck Carpenter: [49:25] Yeah. I used to work for a company called Acquia out of Boston, but most of my teams were in Toronto, and so it would always be nice traveling to Toronto. And I did it in January one time. Never again the rest of my life. I was staying in a hotel that was like two blocks from the office, and it was the most miserable experience I’ve ever had in my life. Maybe that’s a desert-dwelling thing. I don’t know what it was. I was like, why am I here? This isn’t happening ever again. Boston is like a beach compared to this right now.

Adam Wathan: [49:56] That’s funny. Yeah, it gets pretty cold. Hot in the summer, cold in the winter. We try to just get the hell out of here a few times in the winter. Like going to Florida next month and then going on a trip in the spring or February.

Chuck Carpenter: [50:12] Hopefully, the town you’re going to is still there.

Adam Wathan: [50:15] Yeah, just Orlando. Just doing the.

Chuck Carpenter: [50:17] Oh, yeah. Disney thing?

Adam Wathan: [50:18] Going with the kids. Yeah, I think we’re doing Universal this time.

Chuck Carpenter: [50:22] Nice. How old are your kids?

Adam Wathan: [50:24] Five and a year and a half.

Chuck Carpenter: [50:27] Okay. We’re in kind of similar boat. Three and six for me. So what sage-like, fatherly advice would you give Robbie as a newer dad?

Adam Wathan: [50:36] I don’t know

Chuck Carpenter: [50:38] Just keep surviving. Good luck.

Adam Wathan: [50:40] I don’t really have it. Just survive. Just survive. Yeah. Honestly, that’s it. No one can prepare you for, like, how much your life changes after you have kids. It’s just literally impossible. If you told me, like, whenever I see someone complaining that they don’t have any time to do what they want to do, but they don’t have kids, what are you even talking about? I feel like I would have landed on Mars by now in my own self-made rocket if I didn’t have kids.

Chuck Carpenter: [51:11] For sure.

Adam Wathan: [51:11] It is a life-changing thing, but it’s good.

Chuck Carpenter: [51:15] Yeah.

Robbie Wagner: [51:15] Well, Elon Musk does that. He has rockets, but he doesn’t pay attention to his kids.

Adam Wathan: [51:19] I don’t know if he really has kids the same way.

Robbie Wagner: [51:22] He doesn’t do anything with them. So that’s how he gets around it.

Chuck Carpenter: [51:25] Yeah. I mean, he can spend time with them, but he can also, like, he has a maid and a nanny, I’m sure, and cooks and just everything else. Like all the other conveniences that you have to do. He’s not getting up with them in the morning and making them breakfast.

Adam Wathan: [51:39] I don’t think he even lives in the same house as any of them.

Robbie Wagner: [51:42] No. Yeah, he’s got a weird setup. I haven’t read into all of it, but he has kids with three or four different women.

Adam Wathan: [51:50] He’s got, like, eight or nine kids, right?

Chuck Carpenter: [51:53] There’s a lot.

Adam Wathan: [51:54] Yeah.

Robbie Wagner: [51:54] And they were, like, all on purpose at the same time. There’s no real relationships there. I’m not really sure how it works. It’s just like, hey, you guys want to have kids? And they’re like, okay.

Chuck Carpenter: [52:02] Yeah.

Adam Wathan: [52:03] Just so you know, though, I’m going to be making rockets most of the time.

Robbie Wagner: [52:08] Yeah, I’ll send you a lot of money. Don’t worry about it.

Adam Wathan: [52:11] Yeah, exactly.

Chuck Carpenter: [52:13] Don’t worry. I’ll send you a robot. We’ll take care of you in part knowledge.

Adam Wathan: [52:18] Cool. I got to go get going here, guys, because it’s a dinner time for me. But this was fun. Glad we got to do this and catch up. Yeah.

Robbie Wagner: [52:28] Is there anything you want to plug before we end here?

Adam Wathan: [52:30] Not really have Tailwind, which we talked about enough, I think, so probably good on that front.

Robbie Wagner: [52:38] Fair enough.

Chuck Carpenter: [52:38] You’re kind of associated with it at this point.

Adam Wathan: [52:40] Yes, I’m wearing it literally Tailwind merchandise. It’s business expense, so.

Chuck Carpenter: [52:46] Which you can purchase for $19.95 on.

Adam Wathan: [52:51] Yeah.

Chuck Carpenter: [52:51] It seems underpriced.

Adam Wathan: [52:53] Cool.

Robbie Wagner: [52:53] Well, yeah. Thanks for coming on. Thanks, everybody, for listening. If you liked it, please subscribe, and we’ll catch you next time.

Adam Wathan: [52:58] Awesome. Thanks, guys.

Chuck Carpenter: [53:00] Boom. Boom, boom. Thanks for listening to Whiskey Web and whatnot. This podcast is brought to you Ship Shape, and produced by Podcast Royale. If you like this episode, consider sharing it with a friend or two and leave us a rating, maybe a review, as long as it’s good.

Robbie Wagner: [53:19] You can subscribe to future episodes on Apple, Spotify, or wherever you get your podcasts. For more info about Ship Shape and this show, check out our website shipshape.io.