Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
TailwindCSS Setup
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
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, symbolObjects, 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.