Customizing Tailwind Colors & Font

[00:00:00]
>> So let's figure out how to swap in these colors in Tailwind, but like I said, you can also do the CSS variables. We actually do like a combination of both, we have a file that looks almost exactly like this because I stole it from there. And I started working open source code base.

[00:00:14]
And then actually these are Creates CSS variables based on that. And then we create those semantic names, but it's effectively the same idea. This is just a 300 line file that I'm not gonna bother you with. So let's go ahead and try that out. So now in my Tailwind theme, really all I'm gonna do is, I'm gonna import this JSON file, so I'm gonna import.

[00:00:41]
Let me just remember what I ended up. I have all these colors and because I'm replacing wholesale, the Tailwind ones, because I don't wanna be able to access red and blue and green, I have to take a few of the special ones and make sure that I include those as well, right?

[00:00:58]
White and black, space black in our case, transparent and currentColor, which are CSS properties. So we'll import colors, white, black, currentColor, and transparent, from, what was it? ./source/tokens/colors, cool. And again, if you're using regular CSS, it's just slightly different. It has this theme and has two options where you can either replace it outright, or has this extra property called extend.

[00:01:40]
If you wanna add additional things, use extend. I don't wanna add additional colors because if I do that, someone's gonna still use green, right? What I wanna do is wholesale replace it with all of my colors, white, black, transparent, and currentColor, right? And, yeah, if one was to take this next step, I would take a good look at the design system and notice that I'm only really using three border radii, one box shadow.

[00:02:09]
May be, yeah, eventually, I think the real code base is like two or three. A smaller set of fonts and spacing and stuff like that. So one of the recommendations, and it will depend on what you're doing is to contract the surface area of the design tokens you have to work with, right?

[00:02:26]
Because both designers will have a bad day and just cut a corner and not use their own variables. And then the nicest engineer on your team will comply with that, and now you both have a problem, right? So yeah, now we can construct the colors. The other thing I wanna do is pull in the font, in our UI, we use Poppins and Inter, except both designers hate pop and so we're gonna put everything to Inter.

[00:02:55]
There's much ways to do this in terms of free font. Free fonts are great because I don't have to manually do anything. We use something called font source, font source is basically all of your various free fonts, I think more than just a Google ones, I think your assorted free fonts.

[00:03:11]
Let's look at the website, put onto npm. So you can basically do an npm install of fonts. So it's super great. Also like just for side projects and stuff like that. So you can grab any font that makes you happy, I'm gonna grab it to you, if you wanna go rogue, and grab a different font, go for it, right?

[00:03:33]
If you wanna make the entire thing papyrus that's a choice. But basically can go, find the font, hit Install, and you can see that all it is at the end of the day is npm install. This is a variable font, so it's variable width and you can tweak stuff, @fontsource-variable.

[00:03:49]
The ones that are not variable font are @fontsource. And you can npm install this font, which I think I already have in the npm install, but you can also run it too. And then, in my CSS file, which is already imported in Storybook, there it is. index.css, I can just do import fontsourcevariable/ inter;.

[00:04:23]
And now, through the magic of Post CSS and VIT, or Webpack in this case, that entire file is being included, and now I have that font available to me. I do need to just set it in Tailwind, but if I wasn't using Tailwind, I could literally go to the body here and say like font-family.

[00:04:53]
Right, that would work. I'm gonna put in my tailwind theme. Both are equally fine ways of doing this, whichever one makes you happier. I'm gonna do the one that I do for a living here though. So this is where I'm gonna extend the current theme cuz I wanna keep the monospace font in this case.

[00:05:15]
And I'll say fontFamily, I'm gonna replace a Sans-serif font with it. Cool, and that's a great way for if you're using the free fonts and you don't want to copy and paste a bunch of link tags or anything along those lines. The other reason I really like using font source for this, which is you can also use an import in JavaScript, which means if you're only using a font in one component, right?

[00:05:47]
Then it'll be lazily loaded when that component gets lazily loaded as long as you have anything that is tree shaking. So there's performance reasons as well. But yeah, and also we programmatically switch it out because Open Source we can only use free fonts for the licensing. But on our website and stuff like that we use proprietary fonts.

[00:06:08]
So having to be programmatic makes my life easier, because I can code and use environment variables and stuff like that. Cool, so I've got all of that in place, so we got fonts, we got our own unique colors. We will need to go ahead and refactor this in a second.

[00:06:25]
I think I was playing with stuff earlier in there. We do need a way to deal with the idea of like, I have primary, a secondary, there could be a ghost button. But we need some better strategies for managing the style of every variant. So we'll talk about about that momentarily.

[00:06:41]
>> What would be the approach for Sass?
>> I mean, if we were doing figma, starting from there, literally, the amazing part about this is you can also export a bunch of Sass aliases as well. And then you would use these tokens throughout your codebase, right? If I grab the component colors as well.

[00:07:01]
But yeah, it could be setting up Sass variables like this. It could be setting up CSS variables and referencing them. It doesn't really matter which strategy you use, that's coz it's more the conceptual approach. But your variables will vary slightly based on which technology that you use.