Introduction

[00:00:00]
>> My name is Steve, I am the head of front end engineering at a company called Temporal, and was an early employee there. And so one of my first jobs was to get a knit on the UI, right? And Mark had saying he had been using CSS forever, right?

[00:00:19]
I had a brief dalliance with SAS for the better part of the late 20 aughts early 20 teens. Then my head mostly with a little bit of cheating, CSS by cheating CSS I mean post CSS right for occasional stuff because I don't wanna write vendor prefixes. And remember all that stuff, but had mostly been writing regular CSS in a lot of cases.

[00:00:50]
And I would hit get in it I was like there's a lot I was the only engineer on the team, right? And I knew that trying to write all of this CSS by hand as well as all of the JavaScript slash TypeScript was a little much I was like alright let's go set up post CSS or maybe we'll still Sass so it's been a while and then on a whim I've been hearing a lot of this tailwind CSS stuff.

[00:01:16]
Let's just try it out, right? Yeah, I could always abandon it. That was two and a half years ago. And at this point now, we use it for basically everything, right? And, I mentioned that because, there's a wide range of use cases when you're building when you're doing front end engineering.

[00:01:39]
Chris Collier has this blog post I really called The Great Divide, and the subtitle is two front-end engineers or two front-end developers grab a beer, they have nothing in common, right? And there's a wide set of needs from building an application to building a content website. And it's been super interesting to use Tailwind for both and see that it's like incredibly flexible and makes things that used to feel really tedious.

[00:02:05]
See also media queries is what I mean by that, very simple and elegant and to the point where it's I might writing sales now, right? And so the goal today is kind of explore that. Right now on this slide we've got a website where there is basically everything we're gonna do today and we might even add some stuff as we go along.

[00:02:31]
Probably more than we could possibly do in a given day. So that's kind of where I open it up for where your interests lie we can kind of like off road a little bit. But we've got a pretty robust set of challenges and tutorials to work through here, and so the basic plan here, is we're gonna kind of go over the basics, right?

[00:02:53]
Just get our sea legs get our fundamentals out try to figure out how exactly Tailwind works and then we'll kind of find a lot of the. Try to mix in some of the common patterns like how to do some layout so you might need a lot in your applications.

[00:03:08]
Along with a bunch of little things that I think are just really nice and easy to kind of just that little extra pizzazz on whatever site you're building. That's just gonna make it look and feel a little bit better as well. And hopefully, even if you've used Tailwind, there will be at least a few things in there where you're like, that's interesting, that you can kind of play around with and see.

[00:03:34]
For the most part, we've got everything on the site. Tailwind has this thing, they have their own playground, which is play.tailwind.css. Let's check that out real quick. Play Tailwind CSS, and this is basically what it looks like. And so we've got this in place. And it's really super cool, because it gives you a lot of the kind of basics in place where you've got this I-frame situation here along with an editor.

[00:04:05]
And what's nice about it is all of the auto complete of the Tailwind class names is present in there and ready for you. It will do the kind of built in sorting, and all of this is available as well in, if you use VS code. There is official VS code plugins for Tailwind, there's a prettier plugin that will do a lot of the sorting stuff that we see here as well, but this way we all have kind of the same environment and setup.

[00:04:34]
Good to go, and it's nice because we get that immediate feedback loop, of being able to see it in the browser. And the other really cool part is, in terms of changing our configuration and stuff along those lines, we can do that in this area as well, and then anything that, if you kind of discover something really cool and you wanna share it in the chat.

[00:04:56]
And we'll kind of add it to the website as we go along or if I kind of build something, you need to see it, or want to see it. I can kind of share it as well and we can kind of do all of those pieces super easily.

[00:05:06]
So it's gonna be a lot of where the magic happens today, along with, this site that we have here, where you can see that. We've got some of those playgrounds in there as well as a bunch of various different ways to visualize a lot of the components that we're building.

[00:05:23]
And you can kind of see what classes I'm using at any given point. And I can highlight the important ones and stuff along those lines. So that's kind of the high level. And we'll do everything from kind of some of the basic styles to all of the little nuances of working with forms and inputs and the various states that they can be in to doing CSS grid layouts, and fun with Flexbox.

[00:05:47]
Cuz who doesn't like to have fun with Flexbox, right? So we kind of go through all the spaces you can kinda see. It escalates as we go along. But like I said, getting some of those basic fundamentals in place will behoove us as we kind of get into some of those more advanced pieces.