00:00:01 Now, thankfully, we already have the starter code that we use to learn a bit about React, which we'll use as the basis for our movie application.

00:00:10 The only thing you'll have to do at the end is change the folder name.

00:00:13 But there's one thing that we don't right now have.

00:00:15 Remember how I used to make so many typos when typing out the styles?

00:00:19 Well, that's because this is not how we typically do styles in React.

00:00:23 We do it using Tailwind CSS.

00:00:25 And literally, as of the day that I'm recording this video, a brand new major version of Tailwind CSS, version 4, is now live.

00:00:35 It brings much better performance, simplified installation, less configuration, dynamic utilities, and so much more.

00:00:43 So in this video, alongside learning React, I'll also teach you a bit about how to use Tailwind CSS with all of its newest features.

00:00:51 And if you'd like me to cover Tailwind CSS in more detail in a dedicated crash course, let me know down in the comments.

00:00:57 And if many of you comment, we'll do that very soon.

00:01:00 With that in mind, head over to the Tailwind CSS website, click Get Started, and then scroll down to the installation using Vite.

00:01:09 The only thing we have to do is copy this command and move it over to our terminal.

00:01:14 Now, as you can see, we're already using one terminal to run our application, so we can just create another which we'll use to install additional packages.

00:01:23 I'll simply paste it, npm install Tailwind CSS and add Tailwind CSS forward slash Vite.

00:01:29 And while it's installing, we can check out the second step.

00:01:32 And that is to configure the Vite plugin under our configuration.

00:01:36 So let's do just that by using Tailwind CSS under plugins under our Vite config, which is right here at the bottom.

00:01:44 We just have to add it within our plugins array.

00:01:47 Tailwind CSS like this, and we can import it at the top coming from at Tailwind CSS forward slash Vite.

00:01:55 After that, we have to import our Tailwind CSS within our main index.css file.

00:02:01 So let's copy this and move it over to our index.css, remove all the other code and add it right at the top.

00:02:10 And that's it.

00:02:11 We can start using Tailwind within our code.

00:02:14 Let's just copy this H1, head back over to our app.jsx, and use it right here.

00:02:20 Class name, text-3xl, font-bold, and underline.

00:02:26 If this syntax is looking completely new to you, don't worry, I've already done a quick crash course on how to use Tailwind CSS on the channel before,

00:02:34 but by the time you're watching this video, maybe we have a newer one, how these different utility classes work.

00:02:40 But in simple terms, instead of declaring all of the styles within a separate style sheet, which means that you always have to go here and then open it

00:02:49 and then choose a class and then add it, Here, you just declare a class name and add these specialized utility classes.

00:02:56 So it's not, for example, color and then red.

00:02:59 Rather, it'll be something like text-red-500.

00:03:04 And there's even a Tailwind CSS extension, which will tell you exactly which CSS properties that class is applying.

00:03:11 We can also change the font a bit by heading over to our index.css.

00:03:15 Within here, we can import different fonts.

00:03:18 And the imports for them look something like this.

00:03:21 It's a long string of characters that brings in different font that you can use from Google.