
Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var
(function-scoped, outdated)let
(block-scoped, modern and recommended)const
(block-scoped, cannot be reassigned)_
, or $
let let = 5;
is invalid)myVar
and myvar
are different)string
, number
, boolean
, null
, undefined
, bigint
, symbol
Objects
, Arrays
, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.