Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Tailwind CSS Setup
Loading...
Loading...
Complete source code available till this point of lesson is available at
View the design and theme in Figma.
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:is(.dark *));
@theme {
--color-primary-100: #fff1e6;
--color-primary-500: #ff7000;
--color-dark-100: #000000;
--color-dark-200: #0f1117;
--color-dark-300: #151821;
--color-dark-400: #212734;
--color-dark-500: #101012;
--color-light-400: #858ead;
--color-light-500: #7b8ec8;
--color-light-700: #dce3f1;
--color-light-800: #f4f6f8;
--color-light-850: #fdfdfd;
--color-light-900: #ffffff;
--color-link-100: #1da1f2;
--radius-2: 8px;
--radius-1_5: 6px;
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--shadow-light-100:
0px 12px 20px 0px rgba(184, 184, 184, 0.03),
0px 6px 12px 0px rgba(184, 184, 184, 0.02),
0px 2px 4px 0px rgba(184, 184, 184, 0.03);
--shadow-light-200: 10px 10px 20px 0px rgba(218, 213, 213, 0.1);
--shadow-light-300: -10px 10px 20px 0px rgba(218, 213, 213, 0.1);
--shadow-dark-100: 0px 2px 10px 0px rgba(46, 52, 56, 0.1);
--shadow-dark-200: 2px 0px 20px 0px rgba(39, 36, 36, 0.04);
--background-image-auth-dark: url("/images/auth-dark.png");
--background-image-auth-light: url("/images/auth-light.png");
--breakpoint-xs: 420px;
--font-inter: var(--font-inter);
--font-space-grotesk: var(--font-space-grotesk);
}
/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
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, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 Let's dive into Tailwind CSS that'll allow you to rapidly build modern websites without ever leaving your HTML, or in our case,
00:00:08 JSX.
00:00:09 But we won't just touch on it on the surface level, where I will tell you that it is a utility-first CSS framework packed with classes like Flex,
00:00:19 PT4, TextCenter, that can be composed to build any design directly in your markup.
00:00:25 No, you already know that, right?
00:00:27 Instead, within this course, I want to dive a bit deeper into theming, allowing you to completely customize the theme of your application.
00:00:37 So first things first, let's head over into our app, globals.css.
00:00:43 and remove all the code besides the Tailwind CSS import at the top.
00:00:49 See, every website has its unique theme.
00:00:53 If you check out the provided Figma file for our project, you'll notice some special colors and font styles.
00:01:00 These colors are not provided by default by Tailwind CSS.
00:01:05 Most of them we have to specifically tell Tailwind to use.
00:01:08 Sure, you could use a basic color picker to figure out what color this is, and then use it within your application, and then use a hexadecimal value to
00:01:17 just add it to your application whenever you use it.
00:01:19 That would work something like this.
00:01:21 You go ahead and select it.
00:01:23 Copy it, head over to your page.tsx and just say text- and then you can use a dynamic CSS property within square brackets where you would simply paste
00:01:35 that hexadecimal value and you can see that it would automatically get reflected within your code.
00:01:40 And sure, this worked.
00:01:41 The color indeed did change.
00:01:43 But if you keep doing this, it'll be super hard to maintain our code base.
00:01:47 And if you decide to change the color and you want to use something else, well, it's going to be so hard to find every place we're using it and then change it.
00:01:56 So to avoid using these inline styles, we need to tell Tailwind No which colors must be present in our palette so that we can specifically mention their name.
00:02:06 Instead of overriding the Tailwind CSS default theme, we can extend it.
00:02:10 And with the latest versions of Tailwind CSS, you can do it directly within the CSS file.
00:02:16 So head over here and say, add theme, and then do a dash dash color dash light dash 500. And then you can attach a specific hexadecimal value to it.
00:02:28 such as 7B8EC8.
00:02:33 This is one of the colors that I found right here within our style guide.
00:02:37 And now, using that color within our page.tsx is much easier.
00:02:41 You can just say text-light 500, and Tailwind will automatically know what color is that.
00:02:48 Now the next step is to find all of the colors we're using across the application.
00:02:52 And if you don't have a good designer, you'll have to manually go ahead and find them right here by clicking, clicking, clicking until you click all of them.
00:03:00 But if you have a good designer like Phyzen that created this design for JavaScript Mastery, you'll be able to find all of the colors in one place.
00:03:08 So it's going to be much easier to take them and put them within your Figma config.
00:03:12 I'll provide you with this theme just below, just so you don't have to manually go ahead and copy each one.
00:03:18 it'll look something like this.
00:03:19 All of the colors in different variants, dark and light.
00:03:23 But this is not where theming ends.
00:03:26 We can do the same for other properties, like spacing, maybe, if you want to define how many pixels you want to have for margins,
00:03:34 paddings, and more.
00:03:35 So you can do that just by saying dash dash spacing, dash 30, and then you can say that maybe that's going to apply a spacing of 30 pixels.
00:03:43 Similar thing applies for border radiuses, box shadows, media queries, and anything else.
00:03:49 But the best way to know how to customize something is just to visit their documentation and simply type what you want to customize.
00:03:56 Somewhere at the end of each one of these pages, you'll see a theme telling you what you can customize.
00:04:02 Be that width, text background, or breakpoints.
00:04:05 Now, understanding Tailwind is one thing, but mastering it is another, and it definitely falls out of the scope of this course.
00:04:14 So while I'm recording this, we're also working on a pro Tailwind CSS course where we're going to dive super deep into everything that Tailwind offers.
00:04:22 Maybe it's already live, in which case you can just find it somewhere below, or if it's not, don't worry about it.
00:04:28 In the next lesson, we'll dive a bit deeper into Tailwind CSS theming for our Dev Overflow project as well.
00:04:34 Before we do that, just make sure to finalize this theming configuration by copying the final one from below if you haven't already.
00:04:42 It'll contain some radiuses, some background images, breakpoints, and everything else that we'll consistently use across our application.
00:04:49 So let's focus on more detailed theming in the next lesson.
