Customize the Tailwind Design System

Instructor: [00:00] Up until now, we've been working entirely within Tailwind's out of the box design system. For many projects, you'll need to customize things like specifying your own breakpoints, color pallet or custom fonts. Customization has been an important design goal of Tailwind since day one and Tailwind makes it super easy so let me show you how it works.

[00:17] Remember when we used our tailwind.config.js file to enable the active variant for background color utilities? In the theme section of this config file, you can customize all of the values that Tailwind uses to generate all its utility classes like the color pallet, the spacing scale, the font sizes, everything.

[00:34] I think the easiest way to understand how this all works is to take a look at Tailwind's default config file. We can actually generate a copy of Tailwind's default config file by running npx tailwind init and then giving it a file name. In our case, we don't want to blowout our original config file so let's call it something else like tailwindfull.config.js.

[00:54] Then if you pass the --full flag, it will scaffold a complete config file instead of the bare-bones one that we started with originally. Let's pull up this full config file so we can take a look at it for comparison.

[01:07] You can see here in the theme section, this is where all of Tailwind's values are defined. At the top here, we have screens, which is Tailwind's default breakpoints. You might recognize these keys and values. The small screen is 640 pixels. Medium is 768. Large is 1,024. XL is 1,280.

[01:24] These keys aren't anything special, either. You can actually rename these to whatever you want. That will update the class names accordingly. For example, if instead of using MD, we want to call this tablet, that would generate classes like tablet, text small, stuff like that.

[01:39] Similarly, beneath screens we have all of Tailwinds colors. You can see here, here are all the colors that are built into Tailwind by default. This this is where you see that 100 to 900 color scale that we talked about in one of the earlier lessons.

[01:51] Just like the breakpoints, we can name these colors whatever we want. We could call these primary and secondary, or we could call them literal color names like blue and purple. Again, the class names will update accordingly.

[02:01] By default, all of the colors specified under the colors key will be used by the background color utilities, the text color utilities, and the border color utilities. If you want to customize your color palette, you can customize it for all those utilities at the same time.

[02:15] After all these colors, you can see we have Tailwind's shared built-in spacing scale. This spacing scale is used by the panning utilities, the margin utilities, the width utilities, and the height utilities. This is where utilities like PX4 or MT6 are being generated from.

[02:32] After the spacing scale is when we get into values that are specific to each utility. You can see here we have the background color configuration, and by specifying a closure here, we're able to reference the existing color palette defined earlier in the file. That's how the color palette is shared with the background color utilities.

[02:50] After that, we have the configuration for a bunch of other Tailwind utility classes, like the background position utilities, the background size utilities, border color, border radius, border width, box shadow, cursor, fill, flex, flex grow, flex shrink, font family, font size, font weight, height, inset, letter spacing, line height, [inaudible] , margin, max height, max width, min height, min width, object position, opacity, order.

[03:13] There's all sorts of stuff in here. Every single thing in Tailwind that makes sense to be customizable is customizable. If you want to customize Tailwind's default design system, there's two approaches you can take. The first approach is to scaffold this entire config file like we did for this example using the --full flag.

[03:31] From this point, you can just literally edit any of these values and make them whatever you want. For example, for font family, here we have the default San Serif font sack, which is just a system font sack. It uses San Francisco on Mac, the Windows default on Windows, Roboto on Android, etc.

[03:47] If you wanted to use a different San Serif font here, like maybe you just wanted this to always be Helvetica or something, you can literally just customize this to be whatever you want. There's a couple downsides to working this way where you generate the entire config file and then just go through and edit whatever you want.

[04:01] The first one is that it becomes hard to see what is customized and what is default. For example, you might change the default San Serif font family, but not the Serif font family. When you come back here, there's no way to be able to tell this is customized and this is not.

[04:15] Secondly, if we released a new version of Tailwind that included some new values for any of these utilities, if you've generated this complete config file, you won't automatically inherit those new values when you update Tailwind.

[04:27] This could be a good thing if you want to have complete control and don't want new styles being accidentally introduced into your project, but it could also be a bad thing if you want to keep up with all the latest developments in Tailwind itself. You can think of generating this full config file as ejecting in frameworks like Angular or Create React App.

[04:44] You're taking full ownership of everything and you're not going to benefit from any updates that are made upstream. The other approach you can use to customizing Tailwind is to use a default minimal config file, like we've been doing up to now in the course. By using this default empty config file, all of your settings here are merged with the defaults.

[05:04] If you just want to customize the color palette, you can do that while still inheriting Tailwind's default spacing scale, for example. This is the approach that I recommend personally because I like to be able to look at this file and see just the things that I've changed so I know what is default Tailwind and what is custom for my project.

[05:20] Now that we've talked about the overall anatomy of a Tailwind config file, why don't we work through a simple example of actually customizing it. Say for this project, we already had a logo that was provided to us by a designer, or we're working within an existing company where we already have some brand guidelines.

[05:37] We're not working with this indigo color, instead we have this custom blue color; that's our brand color. I put together another version of this logo that has a blue icon and blue text. This blue color is not a color that comes with Tailwind by default.

[05:51] Say we want to add this brand blue color to our config files that we could use it for say this text here and also for this button, how we go about doing that? Let's head over to config file, I'm going to show you how.

[06:02] You might think that under theme, we could just define colors and then specify the color that we want to add. Say we just wanted to call this a brand blue. We could paste in this value here.

[06:12] Now, all of a sudden you can see that we're going to get compiler. Let's read this and see if we can understand what's going on. It's saying that, "Apply can't be used with bg indigo 500 because it can't find indigo 500. Tailwind doesn't think it exists."

[06:26] Tailwind's right in this case. Because we've specified colors at the top level here, we've overridden the entire Tailwind default color palette. Now, this is the only color that exists. If you have a complete color palette provided to you by a designer, this can be a good way to go.

[06:41] You can just override all of Tailwind's colors with all of your custom colors and then we're off to the races. In our case, we just want to add this brand blue color in addition to the rest of the Tailwind default colors.

[06:51] We have accessed our brand color while still using Tailwind's colors for other things. To do this, we use the special extend section of the Tailwind config file. Now, anything you put under extend will actually be merged with the default values.

[07:05] Anything you put at the top level replaces. Anything you put into extend merges. If we only want to add one color but keep all the existing colors, all we have to do is take this color's definition, move it into extend. Now with any luck, this should compile.

[07:19] Yes, you see now we no longer have any errors and everything's loading. Let's try and use this color. Like I explained before, all of the colors listed in Tailwind's color palette are automatically used by the background color utilities, the border color utilities, and the text color utilities.

[07:34] If we wanted to change, just take advantage of a text to be our new brand blue color, all we have to do is find our text indigo 500 class that we're using before and replace this with text brand blue. You can see the name of the color here, just matches the key that we specified in the config file. There's no magic here.

[07:52] Similarly, for this button, if we wanted to make this blue button and start this indigo button, why don't we just pull off this indigo class but leaves the base button styles? Just add bg brand blue for the background and text white for the text. Now, we have a nice, blue button.

[08:08] Let's try one more customization, maybe customizing something else. What about the height of this image? Right now, we have it set to h64. If we wanted it to be bigger, we might try something like h72 and then realize that Tailwind doesn't have an h72 class. Right now, this is just using a height of auto.

[08:26] Why don't we try to add the 72 value to Tailwind's spacing scale so we can use it with our height utilities? Let's head back over to our config file here. Now, underneath extend, since we do want to keep all of the existing spacing values, let's redeclare spacing.

[08:41] Again, this is coming from the full config file. If we head over here, you can see spacing here. This is where all the default spacing values come from. You can see 64 is the last one. We want to add 72, so add just an extra a little bit bigger one.

[08:54] Like we talked about in an earlier lesson, all these values are relative. 16 ram maps to 264 by just doing 64 divided by 4. If we want to do 72, then 72 divided by 4 is going to be 18. We know the value that we're going to want to use is 18 ram if we want to stick with the way the scale works.

[09:13] Let's head over to our simple config file here. Underneath our extend spacing key, I'm going to add 72 as a key and we're going to make that 18 ram. Now, when we save this with any luck, we should see that image jump to the correct size, and it does. Perfect.

[09:28] Now, back here, you can see, yes, we've got the h72 class applied and it's giving it the correct type. We can change this back to h64 just to prove that, yes, that is shorter. H72 is taller and looks nicer.

[09:40] We're going to be using the Tailwind config file throughout the course to make all little customizations as necessary, but I hope this has served as a pretty useful introduction to the general concept and giving you a good idea of how to start customizing Tailwind yourself.