Kent: Hello everybody, I'm so excited to be joined by my friend Simon. How you doing Simon?

Simon: I'm doing great, how are you doing?

Kent: I'm awesome and I am really excited to have you come to Utah in April for Epic WebConf. So I want everybody to get to know you and just to hype up the event and look forward to meeting you. So can you give us an introduction to yourself?

Simon: All right, so I'm Simon. I used to be a school teacher and passionate about teaching. Then I pivoted into web development. I thought I was starting from the ground up, but pretty quickly realized that I can teach web developers just like I teach students. And long story short, I ended up going back to teaching as a dev role advocate content creator. It led me to work for Tailwind Labs as the main video person making, which led me... achieve one of my dreams, which is teach the thing I like the most in CSS, Tailwind CSS, and teach it to a really large audience. And I'm really excited to be, like you said, coming to Utah and be able to talk about my passion about Tailwind CSS, which might be different than some other people, the angle they attack it from.

Kent: Hmm, yeah, one of the things that I really appreciate about what you teach with Tailwind, which by the way, anybody who has been using Tailwind in the last couple of years has definitely seen one of your videos. So

Simon: It's likely

Kent: thank you for

Simon: yes.

Kent: all of those. But what I really like about your approach for teaching CSS is that first of all, you're not just teaching Tailwind, you're teaching CSS in the process, but you do a really good job of explaining why we're doing things a certain way. A lot of times it's easy to say, okay, and now we're gonna do display block and we're gonna do gap or whatever. But you first, like it's not just magical stuff that you're doing, you're first gonna explain, why are we doing display block instead of display inline or flax or whatever? And so, and you'd like actually show, like this is what would happen if we did it this way that you would, that you might think we should do it that way, but this is why we're not gonna do it that way. And now let's do it this other way. I guess that's maybe a natural thing that comes to you from your experience in education.

Simon: It's probably some traits from my teaching background and just my own philosophy about how I learn things. I like to understand little concepts and why certain things work a certain way. So I try to teach it the way I would understand it better. And I like that you notice that for me, Tailwind is just a tool to use CSS. It's not just Tailwind is not a different thing. it's CSS and then it has a certain subset of properties that you can use with quick access and so when I teach Tailwind, I really teach CSS, which is the thing that I love.

Kent: Mm-hmm, yeah. I think that Tailwind is, well, it's certainly my favorite way to use CSS. And as opposed to something like Bootstrap where it really abstracted CSS away from you, Tailwind really does a good job of embracing the CSS and exposing that to you in a way that, for me, is more palatable. Like, I don't have to be jumping between these different files and between... like having to come up with a good name for this class and like

Simon: Mm-hmm.

Kent: all of that stuff. So it is, yeah, definitely a breath of fresh air for the last couple of years.

Simon: Nice.

Kent: So what are you planning on speaking about at Epic Web Comp? Can you give us like just no spoilers or anything, I guess, but like

Simon: Ha

Kent: your

Simon: ha!

Kent: high level idea of what you're planning on talking about?

Simon: Yes, so it's a slightly different approach. Not necessarily different, but I'm not going to dive into code too much, but I want to talk about how I myself perceive Tailwind CSS as a design tool, as much as a developer tool. And through my career working with designers and myself, I sort of sit in this straddle between design and front-end. You know, there's people completely at the back of the backend and then front of the backend and then... And I'm very close to the UI and design and dev. And I think Tailwind has that magical capabilities of bringing designers and developers to work in the same mental model, which is really incredible. And, uh, Yeah, I want to demonstrate why that's the case, what makes Tailwinds unique in that aspect compared to other CSS methodologies and show a few examples of designers I've worked with. They didn't write code or just a little bit of HTML CSS. And through Tailwind, I was able to empower them to build really, really cool UIs and contribute to code bases. And that's something really exciting to me.

Kent: Yeah, I like that a lot. There are definitely people of varying skill levels and also interests. And the, but the thing is that if you focus 100% of your time and attention only on one layer of the stack, then it really limits the amount of things that you're able to accomplish on your own. So you just like for whether it's side projects or an app idea that you have, if you're just so pigeonholed into just a specific area, I'm just a designer, or I'm just a backend dev, then you're just super limited. So from what it sounds like, you're really trying to find ways to help people broaden their skill set, whether they be, I'm primarily a frontend dev, you're gonna help them get closer to the design side, or I'm primarily a designer, you're gonna get them closer to coding. Is that

Simon: That's right.

Kent: sound, yeah.

Simon: It facilitates this bridge between cros And I've heard you and Brian Florence and Michael Jackson mentioned a few times that if you learn remix, you accidentally trick yourself into learning servers and learning the web platform.

Kent: Mm-hmm.

Simon: And I see Tailwind in a similar way. If you use Tailwind, you... just because of the rapid workflow and prototyping abilities, you accidentally teach yourself how to design because you spent hours in this. mental model, which is rapid iteration in the browser. And this is how you get good at design. You just design stuff on your computer.

Kent: Mm.

Simon: And so I like that it takes developers closer to the design and UI skills. And it also takes designers into this, like the gateway towards writing code and seeing it in browser instead of a design tool.

Kent: Yeah, yeah, and the browser is really a powerful tool, right? So I shared an announcement of different speakers for the conference and stuff, and then I mentioned that I don't use a tool for generating these marketing tweets that I do. I typically will just go to the website, move things around with just in the DOM and stuff, and then take a screenshot when I think it looks good. I just think that, as you mentioned, the layout engine of the browser is just really, really powerful and it's just a good mental model for placing things in a good way. The only thing that stands between us developers and something that looks nice is our ability and skills and experience in doing that.

Simon: Yeah. And I think the best way to practice that is to have the quickest feedback loop between what you think in your head and what shows up on the screen. And I don't want to reveal too much of my talk, but I think Tailwind nails that attributes and features that enable this incredibly fast. I'm thinking of a UI and I see the UI in the browser responsive and yeah, this

Kent: Do you

Simon: is

Kent: think

Simon: what

Kent: that...

Simon: excites me. Yeah, go ahead.

Kent: I was gonna ask, do you think that that's in part because of the constraints that Tailwind puts on you? You don't have like a margin of every possible number in the world but you actually have some set sizes and things like that?

Simon: That is definitely one of the ingredients. It's called constraint-based design, so the decisions are made upfront, and so you're not paralyzed by decision-making every step of the way.

Kent: Mm.

Simon: And the other one that you mentioned is the no naming classes, just staying focused in one. But I think the unique aspect, because a lot of other CSS methodologies also have that theme and constraints and scales. But the thing that makes Tailwind unique is also the thing that makes people dislike Tailwind. And it's the string composition classes. And in a way, I look at it, I know it has drawbacks in terms of type safety and stuff, but it is really the closest thing to shortcuts you would have in a design tool in the sidebar, like the favorites that you put a little star. This is my favorite color, my favorite padding values. And then you just pick these values and put them together inside your elements to make it take the shape that you want. And yes, you can write CSS that access theme, that spacing, that eight, but just typing that CSS property and the value from the theme. takes you away from the creative process and turns into this engineering, I am reaching for my theme scale and stuff, where

Kent: Hmm

Simon: because it's just utility classes, it is so much faster to type and it's really like a almost like coffee script at some point had really big success because of that really terse, really quick rapid typing. And

Kent: Mm.

Simon: I think that is the magic ingredient that makes Tailwind vibe with designers because it's easy to reason about. also enables the fastest prototyping and design iteration of any ways to do CSS, as far as

Kent: Yeah,

Simon: I'm concerned.

Kent: that does make sense. I'm looking forward to that talk. So we've got extended breaks at the conference and it's a single track. So everybody's seeing the same stuff. Everybody's taking breaks at the same time. And I expect that you'll be excited to talk with people at the conference in person. And I hope that people take advantage of your presence there. What are the sorts of things that you're hoping people come talk with you about or that you look forward to talking with people about?

Simon: Well, I usually get super inspired by the talks I see. So the conversation that will have will likely be around the talk that blew my mind just before the break. I

Kent: Hmm.

Simon: haven't been in the in-person conference since before COVID. So I'm super looking forward to mingle with people. If you see me somewhere in the audience and you're like, oh, this is Simon. I'm a bit scared to go say hi. Please come say hi. I probably am more shy to say hi to you than you are to me. So

Kent: Hahaha

Simon: I really much welcome anyone who wants to come speak. From what I expect, or I hope people talk to me about is the, from the talk I present is some inspiration they have or share experience that they had with a designer and like similar workflow that got amplified by Tailwind. Or maybe just the question of how can they help. their designers, maybe they have a design team that's like, oh, Tailwind is terrible, we don't want to use that. And how, like, just discuss strategies, how to trick people into liking Tailwind, which I'm really good at. Turns out most people that actually try Tailwind eventually really like it.

Kent: Mm-hmm.

Simon: The resistance is before trying it. Again, I'm not trying to force anyone to use it, but if you need help with some tips on how to... Trojan horse tailwind into your company, I can probably help.

Kent: Okay, yeah, I would have issues with that if Tailwind wasn't so great. So yeah, I think that is, that's awesome. And I'm sure plenty of people are excited to talk with you about that and many more things. And yeah, with that, I'm just grateful to you for giving us some of your time to get to know you a little bit today. And we'll look forward to seeing you in Utah in April.

Simon: I am very much looking forward to meet you and everyone in Utah. Thanks for having me. And yeah, that was fun to do that little intro. I enjoyed that.

Kent: Yeah, see y'all later.

Simon: Bye.