Unleashing Designers with Tailwind CSS

00:00 I just need my slides here because I can't see them, it says the wrong thing.

00:23 But I am so excited to be here. It's been quite an epic journey from Australia. Mark, this slide is for you. I didn't add it, it was there already. It's 29 hours, so I would have stayed up for a little bit in the little check. It's also been an epic couple of days meeting incredible people and an incredible region. You might have seen that I've been lots of hiking.

00:44 I'm super excited to be here talking about Tailwind CSS. And I've been obsessed about Tailwind, about utility for CSS for a long time. Actually, longer than Tailwind even existed. And I've spent a lot of time trying to convince people this is a good approach to style applications. Today, I want to do something different.

01:04 I want to take a range from design to dev and discuss how I feel that Tailwind is the ultimate tool for collaboration and productivity between designers and developers. Any designers in the house? I know there's one here at least. Yeah, a couple, that's great.

01:22 So, when you talk about design and dev, there is a concept of design handover. This is when the design team or the designer creates something and then passes it over to the developer to go and implement. And this leaves that section in the middle a little bit straight line and fragile.

01:43 And even with really skilled professional trained designers and devs, this is the part of a project where even if they work together, this is always where there can be some hiccups that can derail the project a bit. One of the reasons for this is some things are pretty hard to hand over in design.

02:04 So, if you look at this card, for example, there's a clear heading, subheading, font size, font weight. But how do you hand over something like this interaction? See, this makes it pretty hard to design these interactive UIs and then hand them over. Sure, designers can reach for interaction prototyping tools,

02:24 and these are great, but it's a lot of work and it's still not the thing. So, the developer still has to build it. And as a developer myself, if someone gives me this and say, hey, can you design a dev this? It's a bit intimidating. Well, I have a little secret. These were built by a designer. A designer.

02:43 And when I say designer, I mean someone who spends all day in tools like Figma, building pictures of elements with different states, and then handing it over to a developer to implement. All right, I got to tell you a story. Stories are always good. So, the Figma file you've seen just before is the work of a friend and colleague of mine,

03:05 Chris Dale, who's a senior designer at ThinkMill. And in this case, he was building a website for the Seed.js meetup, JavaScript meetup in Sydney that we helped co-organize. And so, he built this site in Figma and then handed it over to me, and I went ahead and built it with web technologies. Yes, including Tailwind CSS.

03:27 And so, while I was building this, in the meantime, because there's another meetup in React Sydney, Chris started designing another website for another meetup. As you can imagine, there is a lot of similarities between these two websites. They're both meetup sites.

03:45 And so, we started thinking, all right, how can we share these components? Should we have a monorepo? And then we pulled the components for both sites. And then we were like, you know what? We don't even know if we're going to ship the two sites, if they're going to stay the same, and we might do the wrong abstraction too early. So, we said, let's just duplicate the first site, the repo,

04:05 and then tweak the styles. After all, Tailwind is really good at this. But that means that I need to finish the first site before I clone the repo. Otherwise, we have an unfinished double website, which is not great. And so, while we have this discussion together, appears a Boris. Boris is the co-founder of Thinkmill, and also the head of product design.

04:27 And Boris hits me with, hey, Simon, I've been thinking a lot about Tailwind. This might be related to some brainwashing, I don't know. And he says, I think I'm ready to embark on a whole design team training. We should all be comfortable designing, thinking, and prototyping in the browser with Tailwind.

04:45 My man, this is music to my ears, right? And he keeps going, the plan is not to stop using Figma. It's to move much earlier to the browser, which I completely agree with in the design dev cycle. You do some discovery, and then the source of truth is the code.

05:03 And so, what we need is some sort of low-risk, high-reward playground. So, the designers can train without too much pressure. And to Boris's point, it turns out that this Sydney meetup website is a perfect opportunity to move from Figma to the code. There is no investors, or even not a hard deadline.

05:23 It's just a meetup site, yeah? So, together, we carve some time to do some training together about Tailwind CSS. And so, I show him the ropes of Tailwind Play, how to prototype, and then say, hey, if we want to change this card component from the first slide to the other one, the approach is to change things on elements directly.

05:45 So, here, we remove the rounded corners. Instead, we have a border, level four, and then next element the same. And I teach him, because you change the style on the elements directly, you're not going to break anything anywhere. It's pretty safe. Same thing here, we change the font size for 4XL to 5XL. And mind you, when we start iterating with the font size,

06:06 instantly, appears a autocomplete suggestions of all the design tokens scales that are available. And this is when designers ears start to perk up, when you start talking about scales and design tokens that are available. And I'm like, yeah, dude, this is what Tailwind is. You have a theme, and you customize it,

06:26 and then if you have these highlights and accent colors, suddenly, they're accessible in a lot of different things you might use these colors for. Background, border, carrots, and all that stuff. And at this point, I could see Chris getting really excited, and I thought, he's on his way. Like, he's getting that thing. So, gave him a little bit more work to dig deeper, watch a few of my YouTube videos,

06:49 and how to work with React and multi-style components, and off he went. I just went to work on something else. And a few moments later, Chris, who was going to give me pictures of buttons to implement, instant sends me a link, react.sydney. And this is the live website,

07:10 and Chris completely by himself implemented the site. You can see the button interaction here. Chris was able to play with the easing curves by himself, instead of giving feedback to a developer, and basically went from Figma handover, to shipping, to production. And that really marked the point

07:30 where Chris was unleashed into front-end dev. At least at Thinkmill, in the context of Thinkmill, he, from that moment on, collaborated on production websites, client work at Thinkmill. So, another fun moment that happened a few weeks, maybe a month later, Chris sends this message in Slack. Hey, just shipped the Keystatic website. Redesign. I was working on something else,

07:54 which was unrelated, but I see this. I usually work on Keystatic a lot. That's a product we built at Thinkmill. And it looks like this. And suddenly, it looks like this. And I'm like, oh, nice. So I scroll down to try to work out what else is interesting. And I land on these cards that you've seen at the start. Instantly, my brain goes to,

08:17 ooh, this is some Rive animation, or 3DS, or Canvas, because it's pretty elaborate. Nope. I looked at the dev tools, and it is all Tailwind utilities. And I was pretty surprised, because that didn't scream Tailwind to me at first sight. And so, I go in Slack, thinking this is a senior dev who jumped in and built that. I'm like, guys, who built this? This is incredible.

08:39 Turns out, it was Chris. What? I had just showed the ropes of Tailwind to this guy, and he was able to build that thing. And I said, dude, how did you do this? And Chris, super giddy, was like, Max, Tailwind is so sick. Everything feels really simple. You just compose little things together and adjust timings, and it works.

09:00 So let's try to break down one of these examples. That's the card that you're now very familiar with. Some simplified code. We have the header, and we have the output. Some simplified code. We have the header on top here, and then the background decoration sort of things. So there's a class of group at the top on the whole card.

09:20 And in Tailwind, it lets you do things like group hover. So if we hover over the whole group, which is the whole card, we can scale this background SVG by 125%. So no matter where the mouse goes on the card, you can see the background zooming, which is a pretty cool little thing. That's the first step, right? Next thing, how do we do this thing?

09:45 So again, simplified code. I have a circle. It's a one-pixel border circle. It's supposed to be hidden, but I'm showing it so you're going to see how it works. And there's this animatePing utility. Turns out that's a default Tailwind utility to make little elements ping, like this notification badge on the locks. And I would have never thought of using this in such a creative way that Chris did.

10:07 Again, on group hover, the display goes from none to flex. And so you can see the circle pinging like this, which is pretty cool. So that's two out of three. The last element is these two icons separated by line. So we have a width of 12, and then we go on group hover to a width of zero, and the flex container will kind of shrink on itself.

10:29 Now, I know animating the width property is not the most performant thing, but here this happens inside the card. There is no layout shifts happening anyway, so this is pretty fine to me. So if you put all of this together, I like that now your brain should be able to process what to use to feel like pure magic. And now you can see the three layers working together.

10:51 You can see the background zooming, there's the halo pulsing, and the little line shrinking, right? And this goes back to this. It's all about composition and timing. Turns out this is how designers like to think. Um, another thing that Chris said is, I love the quick syntax. It really lets you iterate in the browser directly,

11:13 which is super powerful. Yep, the quick syntax. You know what I'm talking about. The ugly HTML. The one thing the internet loves to hate about Tailwind. Turns out, I think that this is the magic ingredient of Tailwind. Why? Because I believe it's the fastest feedback loop from ID in your head to CSS in the browser. I'm not saying it's better than CSS,

11:39 but it's the fastest I think of a UI, and I put it in the browser. So let's do some very scientific benchmarks here. We have a designer who's going to build a button. I'm sure a real designer will cringe at my chops in Figma, but I use basically a thing called auto layout to create a box around the button. Select a background color, text color.

12:01 Here's the padding, horizontal and vertical. Rounded corners, and then we change the font weight to medium, and we are done. Pretty good, nice button. Well done. Thank you. So let's see how we can do the most similar process in Tailwind, and I'm sure designers will agree that it's very similar. Here, I'm in Tailwind Play.

12:22 I select a background color, select a text color, select a padding, horizontal, vertical, and instead of using my mouse and picking values in the right sidebar, I just pick values in the code in the text editor with my keyboard from the autocomplete. And look at this. Whoa, that was fast. I know for a fact, maybe not in this room, but at least at home watching, there's a few of you thinking,

12:46 why not just write CSS? What do you mean? I wrote this, and I wrote CSS. This is the output. It's generated real CSS. It's even using CSS variable composition for the background. Pretty cool stuff. No, no, but I mean normal CSS. Fine. I will do a button and add a class, and then in CSS, I will write real CSS

13:10 and create the same button. And damn, actually, that was way faster. So what's the deal? The deal is we're not trying to prototype a button. Let's imagine we want to prototype this interface. I know at least one person is very familiar with this. There's a lot of things happening. You can see the frosty glass sidebar on the left with the circle behind the little ribbon on the side

13:33 and all these things. So what you're about to see is me screen recording myself prototyping. The font is too small. I don't want you to look at the font. I want you to look at the workflow. So you can see on the left that I'm really playing with design values and discovering what I want to build. Oh, a trigonometric function. Did you see that? And I'm really trying out things.

13:56 On the right, it's too small, but I'm never once leaving the markup. I'm just composing little tokens together. And this lets me get in that creative space where I'm not writing CSS. I'm designing. Tailwind, in my head, is a design tool. And at the end of the process, this is Figma on the right, the code on the left.

14:18 It's not pixel perfect, but it's pretty damn close. And there is the, oh, that's not the frosty glass, but there's the other elements in there. And yeah, that's what I call rapid prototyping. And I promise you, I'm very good with CSS, but I would not have been able to do this discovery work if I was writing CSS, organizing files and names and stuff.

14:39 You can hear the fight or flight in my voice, can you? And if you don't believe a developer's idea of prototyping skills, take the word of the head of product design. He says the same thing. It's the closest thing to design iteration in the browser. As a bonus, when you finish prototyping, you have a production-ready website because Tailwind invites you to work in a way

15:04 that is prototyping and is also the maintainable and recommended way to build, which sounds counterproductive, but if you try it, you know it. A good friend of mine, Corey, he's another designer living in Australia as well. Four years ago, he was working in Sketch all the time and said this, it's easier to design with than a design tool.

15:25 And oops, when you finish, you actually have a website. These days, Corey works at Buildkite as a senior design engineer. And you can see they're hiring design engineers, pretty trendy term these days. And the reason is they want everyone to collaborate in the code. And Corey said Tailwind definitely played a role

15:44 in bridging this gap between designers and devs. And what happens is it makes web development more accessible to non-devs. That's what I love about Tailwind. It invites designers to write code. And as you've just seen with my prototyping, it also invites developers to design and prototype. I'm sure you heard the Remix team talking about

16:06 how learning Remix tricks you into learning the web platform. And Tailwind does the same. It kind of teaches you, tricks you into learning skills outside of your wheelhouse. Now, there's a lot of tools in the spectrum from design to dev. On the design-heavy side, we have tools like Sketch or Figma, which creates representation of the real thing, make it feel real.

16:29 And then you invite developers in that world to have tools to build the real thing. And on the other end, you have tools that are very developer-centric, worry about things like type safety. And if you look at the implementation, it's definitely a bit further away from how designers like to work. All these tools are really good. I'm not saying don't.

16:51 Everything here is really good. Just remember, it's all about trade-offs. And I think Tailwind makes the perfect trade-off that makes it sit right in the middle. All right, fine. I'm a bit biased. It's a little bit scooted over to the dev tool. It is a dev tool, but it sits close enough to the design world that designers will take a look at it.

17:12 And when they look at it, the first thing they see on the homepage hero is that rapid prototyping workflow where you just sprinkle style concerns and build your thing. And at this point, they're warmly direct. And then you show them the beautiful default color scales, spacing, and documentation.

17:32 And at this point, it's a wrap. So to wrap things up, I do believe that Tailwind is the ultimate collaboration tool for designers and developers because it takes this area, the handover area, which is usually fragile, and it makes it the area where all the collaboration happens and people have a good time.

17:54 Turns out, when you have designers and developers playing on the same field, you can achieve much more impactful results. And we are going to watch this a second time because it took me way too long to edit.

18:08 And with that, I want to say a big thank you.