00:00:02 Tailwind makes your life easy, but just how customizable is it?

00:00:06 I already told you that you can make everything fully custom.

00:00:09 But let's say you want to introduce a new color that isn't present in the default Tailwind CSS theme.

00:00:14 You can achieve that in a couple of different ways.

00:00:16 So let me go over different methods one by one.

00:00:18 First, you can do it inline.

00:00:20 Whatever the value is, just put it inside square brackets.

00:00:24 Like if you have a P tag with a specific background and padding, and you want to get to a specific text, you can just say text dash,

00:00:31 and then within square brackets, define the value.

00:00:34 You can see that that value can be any of the millions of colors available for you to choose.

00:00:39 It might be even better to change it like this, because backgrounds are also fully customizable.

00:00:44 You can say BG dash.

00:00:45 And then simply open up a hexadecimal value, allowing you to choose between any of the available colors.

00:00:51 Pretty cool, right?

00:00:52 But it's not just for colors.

00:00:54 You can use it for any utility class.

00:00:56 Let's say you want to have custom font sizes or custom paddings.

00:00:59 You just do this.

00:01:00 P dash, 16 pixels.

00:01:02 Text dash, 36 pixels.

00:01:05 Something like that.

00:01:06 You can do whatever you want.

00:01:08 You already know how to apply custom colors and more.

00:01:11 Whenever you want to add something custom or arbitrary, just add the right value within the square brackets.

00:01:17 Still, this has some disadvantages.

00:01:20 You'll soon notice that this is only for the small tasks.

00:01:23 As you add more sections to your app, it simply doesn't make sense to provide custom values for every single piece of text.

00:01:29 Now imagine using the same color in multiple files, and then your boss or manager or somebody tells you to modify it to something else.

00:01:38 Imagine just the number of files and different places where you just have to change a simple value.

00:01:43 It's not ideal.

00:01:44 So this is the moment where the Tailwind config becomes super relevant.

00:01:49 It will enable you to control and organize the entire visual style of your application.

00:01:55 The procedure is simple.

00:01:57 Simply head over to your CSS file and use something known as Tailwind CSS directives to write any config you want.

00:02:04 This is one of the biggest changes that came in Tailwind CSS v4.

00:02:08 It completely shifts the approach of configuring your project in a JavaScript file and allows you to configure it directly within CSS.

00:02:16 So how exactly can you do it?

00:02:18 Well, just head over into your CSS file and modify the theme directive.

00:02:24 For example, let's say you want to add this chestnut color.

00:02:28 You can do that very easily by saying dash dash color dash chestnut.

00:02:32 And you can give it a value of whatever value we used right here.

00:02:36 Let's use this one.

00:02:37 Oh, we're in CSS.

00:02:38 I don't have to wrap it in string signs.

00:02:40 That's good to know.

00:02:41 And now if you go back, instead of manually defining the value, you can just say text dash.

00:02:48 Chestnut.

00:02:48 And you can see that it still uses the same color.

00:02:51 Pretty cool, right?

00:02:52 So now, if you have to change this value across tens of thousands of files, you only have to change it once.

00:02:59 Within the CSS file, if you change the value, it'll completely change everywhere else.

00:03:04 So if you check out the theme tab within generated CSS and search for your newly added color, you can see it right here as a single line of code.

00:03:13 And as you expected for this to work, there has to be a specific rule or syntax of what should be configured in which way.

00:03:20 For example, colors are defined by prefixing them with dash dash color and then a name, and a custom font can be introduced by something like dash dash

00:03:30 font dash, and then you can define the size.

00:03:32 You can read about all of these different namespaces within the Tailwind CSS docs.

00:03:36 You can change anything from colors, fonts, text sizes, breakpoints, containers, blurs, animations, and more.

00:03:43 But there's another way in which you can make your custom styling even more reusable.

00:03:48 Remember the dark mode example, where we created long styles on a simple tag.

00:03:54 This may happen when you're building large applications.

00:03:57 Cluttering the layouts with these utilities won't be that good from the clean code perspective.

00:04:02 For example, just check out this button.

00:04:05 It's a simple button, but has a very long class name, as it has some very cool hover and active effects.

00:04:12 No one likes to see such a long line of code for a simple button.

00:04:15 And now imagine you have to use this button across 10 different files.

00:04:20 That would be a mess.

00:04:21 So how can you avoid such cases while still having that flexibility that Tailwind CSS gives you?

00:04:27 Well, there are a couple of solutions.

00:04:29 First, you could break your layouts into specific components.

00:04:33 Instead of writing everything in a single page, you can create a separate component for that button and then just call it in a single line.

00:04:39 The second step is to use directives.

00:04:42 Remember those base, components, and utilities tabs?

00:04:45 Tailwind CSS offers directives for each of these to define specific styles.

00:04:50 But what does this mean, base, components, and utilities?

00:04:53 Well, these are parts of an approach to structuring and organizing styles using the configuration file method.

00:05:01 Base simply applies styles globally across your project.

00:05:05 For your elements like H1 tags or P tags, you might want to have a specific style which you want to use across the entire page so you can define how a

00:05:15 base heading should look like.

00:05:16 There's also the components part which is used to style specific components or reusable UI elements like cards, footers,

00:05:23 and more.

00:05:24 And then there's utilities, which are atomic styles for individual properties like margins, paddings, typography, colors,

00:05:31 and more.

00:05:32 And there's another directive called atApply that inserts Tailwind CSS styles into CSS.

00:05:39 We also have the atLayer, and using these, we can create custom styles for base components and utilities.

00:05:45 Let me show you how we can do that by heading over into our CSS.

00:05:49 And right below the theme, I'll say atLayer, components, and I'll define a card component within which I will at apply a margin of 10, rounded-lg,

00:06:03 as well as a bg-white.

00:06:05 For now, I'm fine with just these three properties.

00:06:08 So if we go back to the HTML here and remember our dark mode toggle example, there's a lot of class names right here on this div,

00:06:15 such as margin of 10, rounded-lg, and bg-white.

00:06:19 So let's say that we want to take all of these classes.

00:06:22 I'll take them and I'll apply them over this card properties because cards typically have similar margins, rounded corners,

00:06:30 backgrounds, paddings and shadows.

00:06:33 So most likely we want to create it as a special layer component of card.

00:06:36 And now this would significantly change the way that we ask Tailwing to apply those classes.

00:06:42 Instead of mentioning them one by one, you can now simply say card and this will automatically apply all of those Tailwind Utility classes.

00:06:52 Pretty cool, right?

00:06:53 And you could do that with buttons, H3s, and P tags as well.

00:06:57 This was the layer of components, but there's also a layer of base, as I explained.

00:07:03 And this allows you to automatically target specific elements, like H1s, where you can say that H1 will, for example, have these properties.

00:07:14 So let me copy them.

00:07:16 Oh, it's not actually h1, it's an h3 in this case.

00:07:19 And I can just say, add apply and mention these properties.

00:07:24 And we can do a similar thing for the p tag.

00:07:27 So I'll take it and define these by applying specific p tag properties.

00:07:34 And we can do the same thing for the button even.

00:07:37 So let me take these and add them to the button.

00:07:41 Of course, don't forget the keyword of apply.

00:07:43 We also need semicolons as we're back in CSS.

00:07:46 I tend to forget that often.

00:07:47 And now back in HTML, check this out.

00:07:50 Not only do I not even have to say something like class of H3, I can remove the class entirely because the H3 by default will get all of these properties

00:08:02 applied to it.

00:08:02 I can do the same thing with the P tag and even the button.

00:08:07 This is pretty amazing, right?

00:08:09 You get from a huge mess of inline CSS to everything baked right into your Tailwind CSS configuration.

00:08:15 But sometimes these elements will still have to differ a tiny bit, but you might want to make your life a bit easier.

00:08:22 So let's say you want to achieve a middle ground, make your life easier through tailwind config, but still not make it always have the default styles.

00:08:30 You can do that by defining your own utility styles by saying at utility, for example, flex center, which is something that we use quite often.

00:08:40 You can apply properties of flex because we need to make it into flex container.

00:08:45 justify-center as well as items-center.

00:08:49 This would allow you to completely center a specific element within the div.

00:08:54 These are three different classes, which right now you can apply with just a single one, flex-center.

00:09:01 So now if I give it a class of flex-center, Take a look at this.

00:09:06 It applies all of these properties together.

00:09:08 And there we go.

00:09:09 All of the properties are applied with a single class name.

00:09:12 Doesn't look that good, but it gets the job done.

00:09:15 That's the magic of it.

00:09:16 A lot of people don't realize just how useful these directives are and just complain that Tailwind CSS makes their code look messy.

00:09:24 Maybe they just want to rant about something on X.

00:09:26 Anyway, moving on, there's also another way of improving your Tailwind CSS game, and that is to use component libraries like ShadCN.

00:09:35 It already comes with a set of predefined components, like buttons for example, that behaves nice, looks nice, and has some default styles.

00:09:44 You can very easily grab the code, because it's just that, a button.

00:09:48 But behind the scenes, ShadCN will set up Tailwind CSS for you, and automatically create different variants of the button you can use.

00:09:56 So you can style it further if you want to.

00:09:59 So you can use it as a default button by just importing different elements from ShadCN and giving them some variants.

00:10:06 But the best thing about it is if you want to give it a class name and change its color, you can just use native Tailwind here as well by saying class name,

00:10:14 text-red500, and it will apply that Tailwind CSS style to an already themed button.

00:10:20 Pretty cool, right?

00:10:21 It just allows you to do so much more in less time while still keeping everything customizable.

00:10:27 Because let's be honest, these are very default looking components.

00:10:31 Buttons, breadcrumbs, avatars, aspect ratios, these are super plain and simple.

00:10:38 Boring even, right?

00:10:39 But the beauty of it, considering that it has been built on top of Tailwind, is that you can add colors and make it yours by completely customizing every

00:10:50 single bit of it.

00:10:51 Sorry for making your eyes bleed there for a second, but I think you get the idea.

00:10:54 Tailwind CSS is super flexible and doesn't require you to just write all the styles in line.

00:11:00 It allows you to be as specific as you want by choosing arbitrary values or by defining how smaller or bigger parts of your entire application will look

00:11:09 like by default.

00:11:11 This was such a cool lesson that I believe not a lot of people cover when talking about Tailwind, and I loved recording it.

00:11:17 So if you find it useful, I would appreciate it so much if you could click the Trust Violet link below this lesson and leave a nice review.

00:11:25 I'm so close to getting to that 4.9 stars and together we can make it happen.

00:11:29 And like Tyron that bought a couple of our courses and recently landed a massive job in a couple of months, well, you can do that too.

00:11:38 Thank you so much.

00:11:39 So don't be the guy that rants on X about how Tailwind CSS is not customizable.

00:11:45 It is, and you don't have to write everything inline.

00:11:47 Now you know that, and you just have to figure out a way that works for you.

00:11:51 Great job.