00:00:00 Kent: Hey everybody, this is my friend Simon Vrishliotis. Oh man, I practiced it. I knew I was gonna get it. And then it's Simon Vrishliotis. Vrishliotis. Vrishliotis, yeah. Oh man, I'm... Okay, Simon Vrishliotis. And so Simon and I, I actually, I'm

00:00:20 trying to remember, I don't think we've ever met in person before.

00:00:23 Simon: We haven't.

00:00:24 Kent: Yeah, that's a shame. We gotta like fix that at some point. But yeah, Simon, I think I caught up with you or got to know you initially through Tailwind, through the stuff that you're doing there, when you were actually at Tailwind and creating videos there, and I admired your skill at

00:00:45 creating those videos. And I'm sure there are many people still learning Tailwind through the videos that you produced while you were there. But you're also working on something else. So I'm gonna stop talking and let you give us a little intro to yourself.

00:00:59 Simon: Hey, Yeah, first of all, thanks for having me. My pleasure to be here. Yeah, we had a nice chat a few times through Tailwind and Remix and different circles. As you mentioned, I've worked as a dev role for the Tailwind Labs team for a while. I'm currently working at a company called Thinkmill, which is a consultancy

00:01:19 based in Sydney, Australia. We're pretty globally renowned for React work and design systems and slowly moving into Tailwind stuff. I think I have a little Trojan horse going in there. But Yeah, on the side of this, I am creating my own course called Pro Tailwind, which is like an advanced level

00:01:39 course on Tailwind CSS. So it's kind of skips the basics of trying to convince people to like Tailwind and get used to this radically different mindset of like having presentational classes in your HTML. It assumes that you know the basics and then it goes into topics like multi-theme strategy or multi-variant

00:02:00 components and even reusable components across multiple projects through monorepos and NPM packages and stuff like that.

00:02:08 Kent: Yeah, very cool. So the more advanced stuff, because the beginner stuff is like the docs are fine and your videos when you were there are still there. So yeah, you're filling a really important need there with more advanced

00:02:23 Simon: use cases. Yeah, that's what I've identified is there's a lot of resources for beginner level and intermediate. And then there's a cliff drop where when you go at scale or try to reuse stuff or create components and then consume them in a different project or repo, there's lots of questions that I couldn't find answers for, so I

00:02:43 thought I may as well create a course and content on that.

00:02:48 Kent: Very cool, yeah, yeah, I love it. Well, great, so Tailwind is really the thing that you're most excited about, and I'm also excited about. And so, It's actually in the first workshop of Epic Web, we get into Tailwind, in the first exercise even. We get into

00:03:08 doing a little bit of Tailwind config. We don't go too deep, so if anybody wants to go really deep on Tailwind, then I will defer you over to Simon, who's got great material for that. But yeah, we just get into how to get Tailwind initially set up and then get it onto the page

00:03:28 in our Remix app, just using link tags. And it works out pretty well. So 1 of the things that I want to get out of this conversation with you, Simon, for the people watching, is why should we use Tailwind? Because I'm telling

00:03:48 everybody, okay, we're gonna use Tailwind. And I have really good reasons for why I like using Tailwind, but I wanna hear from you, Simon. What are your best reasons for why we should use Tailwind? And maybe target folks who are unsure, like they don't necessarily have that initial, like I hate it or

00:04:08 I love it feeling.

00:04:10 Simon: Yeah, that's a very open question like we took all day about. There's actually a lot of reasons why you might be drawn towards something like Tailwind. I think, to me, if I had to summarize in 1 or 2 little main points, is it makes everything predictable and

00:04:30 easy to reason about. I'll explain why in a minute. And it supercharges your productivity in terms of speed, confidence, ability to move fast, to prototype, but also have production-ready code while you prototype. And there's a few factors that play to that, but I think the main ones

00:04:50 is, first of all, you never stop to name things. In a traditional workflow, you take this for granted, but you write an HTML element and you're like, let's style it, How should I call it? This is a card wrapper, I guess. So you go into CSS file and create your card wrapper class and apply styles there. And you always

00:05:11 switch between this naming things and organizing your styles and going back to the markup. And with Tailwind, you pretty much directly apply styles on the element inline, which is what creates this never ending riots on the internet because For the longest of time,

00:05:31 you had this context that HTML is the document and shouldn't have any presentational concerns inside it. This is the concern of CSS, right? You have document is HTML And then the CSS is styling and JavaScript is behavior and you have separation of concerns that way. And

00:05:52 I guess React paved the way with JSX to lead this mind shift of you can have separation of concerns at the component level. So a button can have some markup and styles and behavior and then a dropdown can have that as well. So Tailwind kind of goes in the same direction

00:06:13 than JSX where In JSX you write what looks like HTML inside your JavaScript and with Tailwind you basically write what looks like styles in your markup, if that makes sense.

00:06:27 Kent: Yeah. You know, so I'll tell my, I'll try to be brief, but I'll tell my experience and story with CSS. So early on, when I was still in school, I was working on this big project. And I actually discovered pretty quickly that having

00:06:48 atomic CSS classes was really useful. So I put together a stylus, a set of stylus

00:06:57 Simon: style sheets

00:06:58 Kent: that generated classes for like the padding and margin and font size and all like basically P1, P2, all of that. And very early on. So when I saw Tailwind, I'm like, oh, this looks kind of familiar. But like that never really ended up going anywhere for

00:07:18 me. I ended up joining a company where we were using BEM, a block element modifier, and I'm pretty happy about that. I had a coworker who made their own version of something like that, and so we're following these conventions, And I learned very quickly that those kinds of conventions fall over very fast. Not because a convention is wrong, but because people

00:07:38 don't understand the convention properly or don't apply it properly. So anyway, To make a long story short, I discovered CSS modules and thought that was pretty cool. But when I was working at PayPal, I jumped onto a project

00:07:59 that was using LESS and as a pre-processor. I'd used LESS, and Stylus, and SAS, and all of those. They're all fine. But what I discovered at PayPal was we had a page, and I checked this recently, this is still the case. There's a page that has hundreds of thousands of kilobytes of CSS. And

00:08:19 no matter what you do, you click around all the buttons, everything, but there's this tool in the DevTools that will allow you to check the coverage for how much of your CSS is being applied. So I would click all the buttons and everything and then look at that tool and I could not get it to any less than 90%

00:08:39 of unused CSS. So we had 90% of our CSS was not necessary on that page of hundreds of kilobytes. And that was just obviously a disaster. And the reason is you just never know when you can delete it. And so it's awful. And so I jumped on the CSS and JS

00:08:59 train Because with CSS and JS, if you delete the component, then the styles are gone too. Yep, and it was great. But then there are all these problems with CSS and JS. From a performance standpoint, server rendering standpoint, authorship, authorship's pretty good. But yeah, those other problems

00:09:19 are pretty significant. So, long story short, when I finally decided to give Tailwind a try, I felt like I was jumping back into all of the benefits of CSS and JS, like not having to name things and not worrying about sending too many styles to the browser. All of those

00:09:40 benefits without the cost of CSS and JS. So that's my story and my reasoning for why I love Tailwind so much. So I think there could be, or there are certainly people listening who don't have any,

00:10:00 or have never like looked into how Tailwind actually works. So I'd love to ask you about that as well. Can you give people an idea of how does Tailwind work?

00:10:11 Simon: Totally. Just before I jump on that, because you mentioned BEM and all your journey, Something you might want to link in show notes or stuff like this is I had a conference talk where I presented my journey from discovering this, I was Tachyon's back then, but the approach is very similar. Discovering this utility first approach

00:10:31 and being completely revolted and angry at the idea that you could do something like this. And then going through the process of realizing that the BEM methodology I wrote and I was really proud of, as you said, started falling apart because of deadlines and quick change requests. And I think 1 thing that's key here is with BEM,

00:10:51 you always have to have the whole project in your brain and make decisions that are like big brain decisions that take everything into account. And when there's a big rush and the deadline for next morning, you take a shortcut. And with BEM, once you start taking shortcuts, that's when the wheels falls off. And yeah, so instead of me trying

00:11:11 to summarize and condense the answer in like a 3 minute thing, I think watching that conference talk or just skimming through is probably a good idea. I know a lot of people said that this was the thing and the talk that kind of made them revisit their preconception and then give it a try.

00:11:30 Kent: Cool, cool. Yeah, I just looked for it. It's the 1 at .allcoms, is that right? Yeah. Great. The title is, A Real-Life Journey Into the Opinionated World of Utility-First CSS.

00:11:41 Simon: Yeah.

00:11:42 Kent: That's great.

00:11:42 Simon: And it's in 2018, so it's like 5 years ago. And it's still, to me, I still feel like it's very relevant today and, yeah, people go through this mindset change. All right. So, to go to your next question, how Tailwind CSS works, I'll

00:12:02 talk about how it works today, because it has gone through different motions. But the latest version, since Tailwind CSS version 3, is, has a just-in-time compiler, which really changes a lot of things for the better. And essentially it completely addresses what you just mentioned at PayPal of

00:12:22 90% of unused styles. Tailwind will only generate the styles that you use in your templates. So by default, Tailwind CSS is nothing. It just has a little reset for margins and padding and font sizes. It has a pretty aggressive reset as a starting point. But

00:12:43 then it's not going to output any CSS until you use a class like p-4 for padding level 4. Excuse me. And so when you write p-4, the Just-In-Time engine detects that string and it's like, oh, this person is using that, so I may as well generate a class P-4. And

00:13:03 so it used to be different. It used to have a series of tokens for spacing and colors and font sizes and font weights and all the different styling scales you can think of. And it would generate all of the permutation possible, like what you were explaining, like P1, P2, P3, P4. And then you would use

00:13:23 what you need. And at the end, you would run something through a process called Purge CSS, which would try to figure out what you haven't used, probably the same tool that you were scanning PayPal's front end with. And then it would be like, oh, okay, you're not using 90% of this, so let me strip out what's not used. And that's great

00:13:43 for production, but as a developer, you're running the full CSS file with all the permutation while you develop. And as Tailwind got bigger and got more variants and more CSS features applied, involved, the file became a problem even at dev time. Like you'd have 357 megabytes

00:14:03 of CSS. And at some point the browser starts choking a little bit. And even if it doesn't go to production, it became a problem. And the shift to just in time engine was completely transcendent because now you can enable all the colors, all the scales, all of the everything, all the variants, and nothing gets generated.

00:14:23 So it's super fast even when you develop. And as you build your UI, you can see the outputs getting populated with the classes that are used. So the way Tailwind works in the really short, it's a CSS framework generator. You give it an input, you

00:14:43 give it a config file, which is the theme with the scales and the colors and tokens. There's a default value, but you can customize that. And based on this config, whatever you use gets turned into a CSS output that is a normal CSS style sheets that you, like you said, bring with the link tag, there is no runtime.

00:15:04 It's just normal CSS, which makes it even funnier when every time you tweet something about Tailwind, people are like, why don't you just use CSS? And Tailwind is just CSS. There, There's a step that generates it, but at the end of the day, it's a style sheet that you bring in your project in the document heads, and there

00:15:24 you go.

00:15:26 Kent: Yeah, you know, JSX had the same kind of pushback when it was introduced too. Like people would say, just use HTML. Yeah, well, at this point, React is pretty much 1, for better or worse. And I think Tailwind is on that way. I personally just totally love it. And I remember

00:15:46 when the just-in-time compiler got added in that really made things just excellent. And it wasn't just the, allowing for generating the style sheet at a run time, or yeah, I guess, what do we call that? It's not even build time, like dev time

00:16:06 as well. Just in time, yeah. But yeah, just in time, yeah. But it's also the JIT compiler added some new features of things that you can do with Tailwind. Yes. Do you want to talk about those at all?

00:16:19 Simon: Yeah. The first 1 is related to the file size where you had to first determine, I want hover styles and active styles, but I don't really think I'm gonna need something that has active and then focus. So you had to opt in certain

00:16:40 states or states combinations. And then with the Just-In-Time engine, all the variants under the sun became available and also stackable. So you could do something that you might never need, but you could do something nth child 7 on focus on a hover at the small breakpoint. You could chain all these variants

00:17:00 and it would work out of the box with any permutation you can think of. So that's just more power to the user. But another thing that the Just-In-Time engine brought is the concept of arbitrary things, arbitrary values, but also arbitrary properties or variance. And the way to think about it

00:17:20 is as an escape hatch when you want to use something that is not part of the default theme that you have. It's using a bracket syntax. So for example, padding, you have p-4 or p-8. And then if you wanted 17 pixels or 37.2%,

00:17:40 instead of going in the spacing scale in the config and adding that 1 of value, because you might not use it anywhere else. You can go p dash braces, brackets, square brackets, and then put any CSS value here. So 17 pixels or 2 rems or 33%. And this is on the fly going to

00:18:01 generate the appropriate CSS output. So it's almost a way to break out of the tokens and have access to any specific 1 of values. So that's, that's really useful typically for marketing sites where you have decorative elements, where you're going to absolute position something 647 pixels from the top, you know,

00:18:21 like a blob that kind of spins around and typically you'd have to go in the config and add like a random value in a scale And now it's part of your design system, but it's clearly something you're never going to use anywhere else.

00:18:35 Kent: Yeah.

00:18:35 Simon: So I like this intentionally breaking out of the system with the square brackets. It's almost like a flag, like, Hey, I'm doing something custom here. And this was so useful that then it became a thing that you can also have arbitrary properties. And I've made a tongue in cheek video on that, that's Tailwind CSS supports

00:18:56 every single CSS property under the sun, even the ones that don't exist yet. Because you can use the square bracket and pass the key and the value in there. And you can do something like clip path, polygon, whatever, or the P3 color, like any CSS that you can think of can

00:19:16 be created on the fly inside a square bracket like this. So instead of just having P dash square bracket and the value, you have square brackets and then you have the key column value and you can pass any CSS. So this lets you, It doesn't mean you have to do it this way. You can still write normal CSS in a CSS file, but it lets you

00:19:36 if you're in your jam, in your inline styles looking thing classes, you can pass any CSS that is not supported by Tailwind directly inside your class name attributes and it will generate the correct CSS output with vendor prefixes and all this stuff, which is really cool.

00:19:56 Kent: Yeah, that is very rad. I definitely use that And I agree that that's a good use case for marketing sites where the styles are typically just kind of funny. Yeah, they're trying to catch the attention of people. So they wanna do something different. We're gonna turn this sideways and

00:20:16 have it scroll like the marquee thing that we did with Rocket Rental a while ago. So yeah, that is super cool. Now, a lot of people are gonna look at those class names and gonna be like, this is awful. I hate this so much. I've definitely gotten this in my replies as well. So

00:20:36 what do you say to that? Because it's certainly like, there is a legit argument there that those class names can get really long. So what's your take on that?

00:20:48 Simon: I agree that it doesn't make your HTML pretty. It does add a lot of noise. But 1 thing I'm trying to convey is to a newcomer to Tailwind or someone who hasn't tried it, what looks like noise and clutter and like, oh my God, I can't even understand anything, is actually

00:21:08 really rapidly turning into information and context about how the UI looks. And when I look at some tailwind HTML, I can see my brain sees the UI. I can almost like compile it, like I can pass the HTML and the page builds in my head because I see the border spacing, padding, flex, all that stuff.

00:21:28 Whereas if I jump into a HTML that says card wrapper and then card contents, I have 0 idea what it looks like. And that plays into this collocation of concerns and the laser focus on you building a piece of UI and you can see the markup, the styling,

00:21:49 the behavior if you're in React. And you have all the pieces to assemble what it looks like while looking at the code. So it turns really quickly from noise to useful information. And if you really hate it, I have not done that myself, but there are tools that collapse the class name attributes to hide it. If you

00:22:09 just want to focus on the area attributes and just the semantics, and you can hide them. But honestly, I prefer having or it's almost like the verbose modes in the terminal where it tells you everything you need to know. When I look at Tailwind HTML, I'm like, I'm happy that I can

00:22:29 see what it looks like, because I really quickly get the context of what it looks like.

00:22:35 Kent: Yeah. Yeah. That makes a lot of sense. I agree. It's something that, that definitely grows on you, over time. So, you know, a lot of people threw up in their mouth when they saw JSX and now they're, coding JSX and making tons of money doing it and it's fine. I mean for me too, when I first saw JSX I

00:22:55 was like, ah, I don't think so. Didn't we learn that this is not the way to do it? But No, I love it now. And that happened to me with Tailwind as well. I didn't have such a negative reaction to Tailwind, actually. I was pretty ambivalent until I actually tried it on a project and I was like, oh, now I love it. So It's

00:23:15 definitely something that you get used

00:23:16 Simon: to you probably went through that phase with react and JSX and then you had that little Little bailing you had say hey, I've beat I remember my My thoughts initially on JSX and turns out that it's not such a bad idea So maybe you you had that lens when approaching it because yeah, the number 1 thing that make

00:23:36 people feel literally angry and wants to rant on Twitter about it is like it goes against everything that you've been told. CSS, Zen Garden and this principle of like, it's like someone, a junior came in the industry and had none, they didn't want to do any homework on the past research and foundation and

00:23:57 just build that thing that goes against it. Where it's not the case, like the creators of Tailwind and Tachyon before that were all fans of CSS Zen Garden. And if you look at their previous code, Adam Watson and Adam Morse from Tailwind and Tachyon, they have blog posts about why you should use BEM and always make sure your

00:24:17 HTML is free of design concerns. They also came from that, like, this is a terrible idea to, oh, wait a minute, it makes me productive and it's predictable.

00:24:28 Kent: Yeah, yeah. You know, I think that part of what bought me into it so much was my experience with CSS and JS. And the developer experience there is very good. Being able to not have to name things. Like, so, Styled components was like the big thing in CSS and JS. That's where things kind of exploded.

00:24:49 But I never liked styled components because you have to name things.

00:24:51 Simon: And then the CSS prop or the style. Yeah, yeah. You can pass styles directly without naming them. Emotion.

00:24:59 Kent: Yep, Exactly. And so I saw Tailwind and I saw the CSS prop. That's really what it amounted to. And with the right editor extensions, then you get the same sort of auto-complete and everything. So yeah, I'm a super fan.

00:25:17 Simon: So that's the other thing. Ooh, I forgot what I was gonna say. It'll come back, I'm sure, if it's important.

00:25:26 Kent: Yeah. Were you gonna comment on editor extensions and stuff like that? Do you have any extensions that you recommend? So like, I think I've just got Headwind. Is that a thing? I think I should look.

00:25:42 Simon: So Headwind is a third party thing, but It's pretty useful. Fun fact at my day job at Thinkmill, I just joined a new project that uses Tailwind. And this morning I did 2 PRs and it's to bring the tooling that kind of helps you be productive. So The 1 thing that it was already

00:26:02 in this project, but the 1 thing everyone should use if they use VS Code is the Tailwind CSS IntelliSense extension, which is what gives you all the auto-completes. If you type text dash, you have all the colors with the little swatch suggestions. And if you hover any Tailwind class, it tells you what the CSS output is. As

00:26:22 a teacher myself, it's my favorite feature about Tailwind tooling is when I hover over any class, and I remember when we did the live stream, I was showing you how it composes CSS variable with opacity and stuff like that. It lets you understand what Tailwind does. And another tool that's really useful, if you use Prettier,

00:26:42 is the Prettier plugin for Tailwind. And this one's role is to source the classes in a logical order. So you have typically the most impactful layout classes like flex or grid or margin, stuff that affects where the thing goes. And then stuff like text color or font

00:27:02 weight or decorative stuff comes later. And funnily enough, it represents the way in which the CSS output is generated by Tailwind in the source order. So there's this sort of a logical approach there.

00:27:19 Kent: And

00:27:19 Simon: what it lets you do is just like Prettier, you don't care about inattention and you hit save and it jump into place when you save. Same with Tailwind, you put a responsive class in the middle and then when you save, it's gonna plop it at the end, and it organizes everyone on the team with the same class sorting mechanism. So if

00:27:39 you work with multiple people, I think that's an essential thing.

00:27:45 Kent: Yeah. Yeah, I just checked and we've got both of those. So the, the workshops have a VS code folder with the settings. So it has recommended or extensions.

00:27:57 Simon: That's the PR I did this morning. VS code, that's VS code Settings.json and recommendations.json.

00:28:04 Kent: Yeah, yeah, yeah. And then we also have the prettier plugin too. It is fabulous, definitely. And it's actually really useful because if you have a typo in 1 of the class names and it'll send it over to the front. You're like, whoa, why did it go over there?

00:28:19 Simon: Yeah. So 1 more thing that plugin does is if it's not a Tailwind class, it puts it at the start because you can use other CSS classes with Tailwind. And the thinking, the reasoning here is like, oh, it's probably useful if you have something separate to put it at the start to kind of make it clear

00:28:40 that it's outside of Tailwind. So like you said, if you make a typo, it becomes a non-Tailwind class, and it moves at the front. And it's, there's no type safety because it's just strings, but in a way this class sorting gives you a hint of safety because it makes you quickly realize, oh, hang on, it jumped at the front. Something must be,

00:29:00 must be off.

00:29:02 Kent: Yeah, that, that I think is probably the, my biggest concern with TypeScript is the lack of type safety. Or with, not with TypeScript, but with Tailwind is the lack of type safety. Do you know of any projects or anything that will, or anybody that's working on bringing, not necessarily type safety, but

00:29:22 just some sort of verification, automated static analysis to tell me whether I got classes that are not going to be applied.

00:29:31 Simon: Yeah, that is a key problem. And I think it's just like the Just-In-Time engine before it came was a topic that kept coming over and over and over until the team was like, we have to do something. Like this is the next big bottleneck. I feel like this is the 1 now that keeps coming, like how do I make sure if I change

00:29:51 a theme value and this class doesn't exist anymore, nothing tells me that it doesn't exist, except maybe putting it at the front. There's tools like Class Variants Authority, CVA by Joe Bell, or Tailwind Variants, I think he's some sort of Vercel team working on this project.

00:30:12 And basically, It's typically used when you have multivariant components. So you have like a primary look and a secondary look and then a large, medium, small sizes. And you want to have strings of classes and then combine them and merge them intelligently. So it kind of adds. So you define

00:30:33 an object with all the different permutation and combination and then it gives you a bit more type safety, but it's still working with strings. So there's a limitation to what you can do. And otherwise outside, I haven't tried it myself, but I had a look and it looks really exciting. It's not Tailwind, but there's a new CSS library

00:30:53 called Panda CSS, which is by the creator of Chakra UI, which is also quite popular. And it's very, very, very inspired and similar to Tailwind, but it has end-to-end type safety because it's built in TypeScript rather than strings of classes. Yeah. But all of

00:31:13 these tools, I just want to say 1 more thing, all of these tools, you lose that superpower of like the short class name, shorthands for CSS properties. Ironically, people say, why don't you just write CSS, learn the CSS key value pair, but there's something really nice to writing this really shorthand classes and instead of going

00:31:33 padding column 3 px. And so most of, I think Panda is that way you, you, it's closer to the CSS prop in emotion where you have a CSS in JavaScript object, where you still have to write your key value pairs to, when you work with Tailwind long enough, it almost feels like a chore. And like,

00:31:53 I know the key value pair in my head. I just want to go P-4 instead of padding. Oh, yeah.

00:31:59 Kent: Yeah. But with Tailwind itself, I do

00:32:02 Simon: not know if there is a, unless the whole thing is rewritten differently. I don't know how you can have these string classes to be completely type safe and yeah.

00:32:15 Kent: Yeah, Yeah, I wonder if, I have no idea, somebody will figure something out. It seems like an important enough problem that it'll somehow work out.

00:32:26 Simon: A tool that is adjacently related is called Tailwind Merge. Tailwind Merge is doing 1 thing, it's when you try to merge multiple class strings together, quite often you end up with 2 conflicting classes without knowing. So you might have a font-weight bold

00:32:46 and font-weight extra bold in the same really long string. And it comes from 2 different components that have been merged, the class attributes have been merged together. And on the screen, you will see 1 of these values. And it's, if you understand CSS and the cascade and the source order, it's the 1 that has been defined last in the order that

00:33:06 wins because they have the same level of specificity. And so sometimes it's what you expect, so you don't notice, and sometimes it's not. And then you're like, oh, there seems to be a bug, but it's really tricky to understand where the duplication has happened. And Tailwind Merge essentially looks at competing Tailwind

00:33:27 classes and then always makes the last 1 win, which is many people think that's how CSS works or they wish that how it would work, that's the last thing, like if you have text blue and text red, if you have text red last, you wish the text would be red always, but it's

00:33:47 not the HTML order that matters, it's the CSS source order. And sometimes you might have text read last, but it's first in the CSS, so it loses. So that's really confusing. So Tailwind Merge basically said, When you merge stuff, the 1 you put last is the 1 that wins all the time. So that's a really, again, not type safety, but it

00:34:07 brings predictability and confidence in doing advanced stuff with the class combinations.

00:34:16 Kent: Yes, so that actually was the subject of a tweet recently. So if you know Parcel or React ARIA, React Spectrum, this is Devin, yeah, Devin Govitt, I think I'm pronouncing his last name right.

00:34:36 He just, I just saw this a couple minutes ago. Just tweeted that it would be really nice if there was a flag that you could set for your website to say, make the specificity order be the order of the class names instead of the order of the style sheet. And that's like totally a thing that could be a thing.

00:34:57 I could see that being like something you can opt into. And then we wouldn't need Tailwind merge, which would just be fabulous.

00:35:04 Simon: Yeah. It's, it's very sneaky concepts to explain. And a lot of people don't like, I think West bus or someone with a huge following did a test, like where there was text blue and then it's really funny to read. And he like, he was like, what's the final color? And 50% of people had it wrong. Cause that was,

00:35:25 that was a play on the HTML order of classes and the source order in CSS. It's very confusing. And yeah, if you were able to opt in, like say, hey, I know what I'm doing and I want to specify, just like in JavaScript, when you, if you have an object and

00:35:45 you redefine a property, the last time you redefine always wins. It's kind of what people expect with the stars as well. But it's not.

00:35:53 Kent: Yeah. Yeah. Yeah, well, maybe that is a future that we could have. It's just like a meta tag on the page or something like that. Like that would be enough, I think. But you know, the standards are harder than, or things can sometimes be more complex than you might expect. Yeah. So, well, Simon, I really

00:36:13 enjoyed our chat. Is there anything else that we didn't talk about that you'd really like to touch on.

00:36:17 Simon: Yeah, in the why would you use Tailwind's bag, bucket, if you just work with React, it doesn't really matter to you, but there's a very undervalued aspect of Tailwind because it's just CSS, it works everywhere. It works with Ruby

00:36:38 templates, PHP, WordPress, all sites, plain HTML. And I've seen team go really deep with a specific, React flavored framework, like Chakra UI, which gives you props. So instead of applying a P-4 for padding, you have a P property on your component

00:36:58 and you pass 4, and then it creates that the same padding value. But it's a React prop. So when you shift to the marketing sites that runs on WordPress and doesn't have a React front end, the team is like, ah, how do I recreate this? And With Tailwind, because it's just CSS again,

00:37:18 at the end of the day, you can share much easier UI elements between a React front end and a legacy Java app that has like a templating language that is not JavaScript. So that's super cool. Yeah.

00:37:34 Kent: On the bandwidth

00:37:35 Simon: aspect of it, a lot of companies have a legacy blog in WordPress or something like this.

00:37:41 Kent: Yeah, yeah, for sure. I think we don't talk about it a lot because most of us are using a framework, a component-based framework where this isn't a problem, but 100%. Like when I was at PayPal, I was working with the design team to create a design system for PayPal. Surprisingly,

00:38:01 they'd gone that long without having a team dedicated to that. And so, like, I really was pushing for Glamorous, which was the library that I created at PayPal, for doing CSS and JS with React. But we talked about it a lot and

00:38:21 they were like, well, we still got some old apps and we've got apps that are never gonna move over to React. We've got some people who are starting with Angular 2 and all of this stuff. And finally, I was convinced, I was like, yeah, you're right, even though most apps are moving over to React, we can't really rely on a React-specific thing. And so we opted

00:38:41 for a design token system that generated CSS files, and then I would just use those in my components that I built as part of our implementation of the design system for React. And I still feel really strongly that that was the right choice even though it may have been a little bit more tricky for me to implement

00:39:03 instead of using Glamorous, which at the time was what I wanted to use. Yeah. It's certainly, yeah, in hindsight, that was absolutely the right choice. So standards, they're good.

00:39:13 Simon: On that, on that topic, I like how Redix UI, it is a React library, but it uses data attributes for most of the styling hooks. And I realized like, because I was like, oh, use Tailwind so you can carry it over to WordPress sites. But the minute you have a component where you start having props that you've, even if the styles are still CSS,

00:39:33 you still have the behavior in props. But using data attributes instead of just a randomly named prop means that it's still valid HTML and you can, you can use that to, to work outside of React. So it's nice to see, even if Radix is a React library, it kind of tries

00:39:53 to be as work everywhere as possible by using stuff like data attributes.

00:40:01 Kent: Yeah, yeah. I think that's actually an excellent approach too. So, well, Simon, this has been awesome. Thank you so much for giving me some of your time today. What's the best way for people to get in touch with you?

00:40:14 Simon: I am spending too much time on Twitter. I am at Simon Swiss, Simon Swiss in 1 word. And if you want to check out the Pro Tailwind course, it's protailwind.com. If you find me, Simon Swiss, you'll probably find an entry point to, if you go to my website, there's a link. I try to show the way to people. I,

00:40:34 I'm sure I can do a better job, but, you, if you find me, you will find it eventually and yeah, reach out to me. I always enjoy conversations, with anyone. Questions about tailwind. I'm, I'm. Obviously passionate, has been passionate about Tailwind since the beginning, literally even before Tailwind was

00:40:54 a thing, I was into the utility CSS train and I always love talking about it. So yeah, hit me up. Any questions, I'm happy to try answer them.

00:41:05 Kent: Awesome. Well, thanks again, Simon. And yeah, have a wonderful day. And I'm going to have a good evening. And yeah, we'll see you all later bye

00:41:16 Simon: bye thank you