Course Setup

[00:00:00]
>> Steve Kinney: So we've got this little course website which is a repo that we're going to go grab called Tailwind Skatepark. Too soon for some of us, we'll see. As well as some other fun little tools as well as. When I say all of my notes, I mean that on the most extreme level, more than we will ever get to today.

[00:00:25]
But I wrote it, so whatever, you can have it. So all my notes. So that means that if you see something, you're like, what was that? Or you wanna dig in a little more, you can kinda go to a given area and kinda see either the markup step by step along the way with the given examples.

[00:00:42]
That's all there for you. Some of it we'll go through, some of it is bonus material for the DVD later or the re release or something along those lines, or the Deluxe Edition. We'll have all that. But the more important parts, if you don't have repo clone, go ahead and clone it.

[00:01:04]
We'll take a tour of that in a moment. I'm mostly saying that now so you can go do that, but there's some other tooling. Steve, to your question before, there is this Tailwind CSS IntelliSense plugin which will basically do a few things for you, as you can see from the photo and as you will see in my editor all day, will give you the ability to autocomplete classes.

[00:01:27]
I think the plugin itself, I can't remember if the plugin does this or the prettier thing that we'll take a look at in a moment, will also do class name sorting so that you do not have to fight with your teammates about what the correct order of classes is.

[00:01:41]
You can just outsource that to somebody else. So if you use VS code and you're using Tailwind, which you are today, you should install that because life is good. Towards the end of the day, we'll look at some libraries that you might use in a React or Svelte or a Ember or a Angular application that are unique to writing components and stuff along those lines.

[00:02:06]
But generally speaking, these two are probably the most helpful. There are some other ones that I just added which we'll get to later, but I'll show you them now, which is like one UI colorless. For just creating Tailwind color palettes, you can kinda pick a color, add a color palette, hit Export, get the CSS variables.

[00:02:31]
There's a Figma plugin too that we talk about in the Figma course that also then will you can theoretically have the same CSS variable or the same figma variables and CSS variables, and everyone can be happy. And this other site that somebody made, which will kind of like help you come up with a color palette that is more semantic.

[00:02:53]
If you don't want to say blue or red or stuff along those lines, you want to say destructive error warning, stuff along those lines. This will create a color palette even if you don't use either of these. I think it's kinda nice to see what the themes look like.

[00:03:06]
And we can kinda play around those more when we talk about colors, but point of those out as well. And we'll also look at some JavaScript libraries, because if the whole thing is like, you're using this with components, right, On a long enough timeline, particularly if you're just using Tailwind, you might not run into this.

[00:03:23]
But the moment you're building a design system, whether officially building a design system or that unofficial, which is like, you have a design system, whether you use a design system or not, you have that design system which is just in your code base somewhere. What happens if a button by default has a blue background and someone passes in a pink background?

[00:03:42]
There's like, utilities for, like, diffing and merging and stuff along those lines that we can take a look at towards the end. But with that, if you have the skatepark installed, we'll take a tour of that and we're going to start writing some tailwind and we'll see it in action.

[00:04:03]
So here we've got a little skate park, which is effectively just a story about a storybook. It is using Svelte, mostly because I know some people use React, some people use Angular. I only chose Svelte because, generally speaking, it just like it was the one I could get out of the way the most.

[00:04:21]
So that we didn't have to think about this, but, like, also so that I didn't have to, like, write the same thing a million times. So in some cases, I'm trying to remember which one. There are a few where it's like, literally, as you can see, this is technically a svelte file.

[00:04:36]
It just looks like mark up, right? So do you need to know Svelte? You do not, right? You could probably squint at it and apply everything you know about React or Angular or whatever, it'll work. We're not touching any of that. We're only touching the CSS parts. Do not get worried.

[00:04:51]
I tried in a few of them. This felt like the least egregious. Of the bunch in this case, right? Cause react makes you put class name everywhere. I was gonna do it in preact. Nobody's got time for that. So, yeah, here we've got a button. And we could.

[00:05:07]
Even if this stressed us out at all, for our initial purposes, if we wanted to do something like this, let's do it in the very beginning. That is valid Svelte markup, and it will do the thing. Once we have everything downloaded, you can treat yourself to an NPM install, which I did before the show.

[00:05:32]
It's like pulling the turkey out of the oven. I have NPM installed. I can do it again, but I feel like that one's. And then we do this npm start, yeah. And then we can open up this on. We are very zoomed in and we can see our beautiful, beautiful button.

[00:05:58]
Make sure I'm on the one that I was just looking at in the code, because right now they all look kinda the same. So this is a button after you install Tailwind. You're like, well, this is worse than before I started, right? That is technically true. Tailwind has this thing called Preflight.

[00:06:17]
What Preflight does is it normalizes. It's like stripping out all of the base styles that the browser gives you across the different browsers. A tried and true technique before the time when almost every browser was just some Flash flavor of Chrome or Safari. If we're on iOS, we can rant about that later.

[00:06:37]
But this is technically a button. Does not look much like a button, but it is a button, right, one way or the other. And it is just dying for some Tailwind CSS to make it more button like, right? And so here we'll get to see some of this in action.