Build An Audio AI App Transcripts
Chapter: Appendix
Lecture: More Web Design with Tailwind and PyCharm
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
I hope you like the web design and the feel of our app. I put a lot of effort in to make it feel modern and beautiful and not like just plain HTML,
0:10
but looking really good. And so there were a lot of different things I did to make that happen. One of them was to lean on Tailwind and Tailwind UI.
0:19
So for example, Tailwind UI lets you build really nice looking sites here. I'll just go look at some of the templates.
0:26
Like, let's look at this one right here. This is super, super pretty. So this is pretty cool. And it's all based on top of Tailwind,
0:35
which also I was using. Now, Tailwind is cool. One of the things that it does though, and this is a benefit in the end, primarily,
0:45
but it makes working with it a little bit of one extra step, let's say. So for example, see here, you can say things like,
0:52
they're actually running out. We're gonna use medium, when the size is medium, use W48, and when it's medium, put the text on the left
1:00
instead of on the center for when it's small. Tailwind comes with many, many classes, and there's a bunch of CSS in there.
1:08
And their goal is to say, well, if you only use a small little sliver of Tailwind, we want you to ship a very small little sliver
1:15
of that over to your users. Let's go over to our app real quick and actually look at the CSS files here. So we don't want console, we want network.
1:28
And here you can see our site CSS right there. Do a full refresh so we get it. Now, let's look and see what I wrote in our site CSS.
1:40
You can see there's a couple of lines here, and it goes down to line 119, but there's directives up here, like @Tailwind and stuff, and @apply.
1:55
So Tailwind basically uses this file to generate this release CSS over here, which has a whole lot more stuff. That's what we were looking at
2:06
when we get this one over here. So if we open that in a new tab, you can see what we're actually getting here is all of the Tailwind business.
2:14
And so, see, it's only 35K. That's really small for CSS in general. So what Tailwind does is it will go and say, I'm going to look at all of your HTML.
2:27
Let's go over here where they tell you how to get started. Roll down a tad. It says, we're going to run the CLI that looks at all of your inputs
2:39
and then generates an output based on your HTML files and all the styles that you're using. So that keeps it really, really small, which is excellent.
2:48
The drawback is if I go over here and make a change in our app, like let's get out of there and let's just go somewhere to the homepage.
3:00
And this section here, it has a padding bottom 10. Let's look at that. That's just this padding down here. And let's suppose it has,
3:11
put some text in there. We can say it's this text just so you see it. But let's suppose that it has a BG color of Amber 500.
3:23
That's a thing we could do. Let me refresh it. Hard refresh it. Why is that not changing? It's not changing because nowhere else in the website
3:35
was that class used. And so it's not included in the CSS because Tailwind said, you know what? You don't need this. Oh boy.
3:44
So what we can do in several, I'll show you this in VS Code and I'll show you this in PyCharm. Start with PyCharm since we have it open.
3:52
So we can go over here and let's go edit configurations and I'll, you didn't see that. It was hanging around from before.
4:01
So I'm gonna say add a new run configuration. Not the Python. We'll do it up this way. Add a new NPM run configuration.
4:10
And it already finds the package.json. It runs and what it's going to run is watch. You could do a build, you could build a minified version
4:18
or you could watch. Build just does it once. Watch builds and then we'll make any changes to any HTML or CSS, we'll make it rerun. So I'll say watch.
4:27
And now we can run one of these two. I'm gonna run this one. You can see that it did its thing. If we go back now, ta-da, perfect. Okay.
4:40
And if we make another change, let's just see this as amber. Make it this really dark amber and take away this text here. Refresh.
4:50
Notice it's automatically watching and making those changes. So here's the deal. If you're going to take this project
4:57
and build new things with it and expand it, one, you're gonna need to use Tailwind or dramatically change the web design, take your pick.
5:06
But if you wanna go and keep carrying on with the same web design, Tailwind is how it's going. And you're gonna need to run,
5:14
basically when you start working on the project, just kick this watch off and then switch back here to work on the Python side of things, okay?
5:21
You can just leave that running down there, this watch and ignore it. That's it. It's not super hard to do. Once you do it once or twice,
5:29
you can see what is the command that it ran. It just goes in there and just runs in the directory. It just runs npm run watch.
5:38
So if you don't want to do it within PyCharm, you can run it like that.