A Deep Dive in Tailwind Font Settings

00:00 Okay we're here in Figma and we have these two headings and if we inspect the first one we have information about the font size, the font weight, the line height, the letter spacing, everything is a little bit custom and we're going to take a look at a few different ways to make that happen

00:16 in Tailwind CSS. I have a super simple component here with the heading ready to be styled and currently it looks like this, a super simple 16 pixels default text. All right so from the

00:28 median breakpoint and up we want the font size of 32 pixels so class name equals text is it 2xl okay 2xl is 24 so 3xl 30 oh 4xl is going to be more isn't it yeah 36. Okay so we're going to

00:46 go with text arbitrary value for now 32 pixels all right then we want a font bold which is 700 the font weight so font bold and I think that's the one yep okay next let's do the letter spacing

01:01 something that folks often forget to do so we want minus 2.5 percent and percentages can also be expressed in m value minus 0.025ms so let's see what Tailwind has in store for us tracking

01:16 tight is going to give us oh exactly what we want so we can go with tracking tight yeah and it's nicely condensed now and the last thing we need to do is the line height and so we want 115 percent

01:29 so again 1.15 m or just 1.15 unit less in that scenario so we could do leading tight I think that's the one that's 1.25 so what are the leading options uh maybe you can try something like 7

01:45 and so we want 115 percent from 32 and you know what this is becoming hard so what I would do here is use a inline modifier for the font size where you can pass the line height as well with

01:58 slash and I will go another arbitrary value here 1.15 and this should give us the specs that we want 1.15 line height and 32 pixels and so there is our heading in all its glory and finally uh

02:15 everything else I believe is the same except the font size going to 26 on mobile and then from the md breakpoint and up it goes to 32 so we can add an md here to make it start from the

02:30 medium breakpoint the default font size will be text 2xl I think was 28 or 24 so again 2xl is too small 3xl is too big so we are gonna have to go with another arbitrary value of 26 pixels

02:46 and again line height 1.15 and now we have a responsive uh heading so you can see the size going from 26 to 32 at the medium breakpoint cool now let's say that this heading with these two font sizes is something that is happening everywhere on the website it's like a specific

03:05 display for an article and you find it in many places in the ui so we want to abstract this to something we can reuse and basically we want to make that thing reusable and I'm going to say that right now I would most scenarios and I recommend in most scenarios to make the abstraction at the

03:23 component level even if it's tempting to make one class that uses all of these so you can just apply the css class I would still recommend doing a component so something like a function display heading and then it would return that thing and then we can replace that here with

03:44 display heading obviously this is not very reusable because everything is hard-coded but it could accept children let's not worry about typescript here now you could pass the

03:56 text as a child and here render the children so now you can pass whatever text you want right now it makes sense to be an h1 tag yeah but what if there was above here an h1 and this one

04:13 was even bigger text 5xl font black let's also give it a margin bottom of four just so we got some breathing room so now this should really not be a h1 tag because this one is the h1 tag so this

04:27 is not a tip about reusable component but one thing you could do is pass a optional as or tag and maybe make it default to h2 and here we would grab the tag uppercase to make it a component and

04:42 instead of returning h1 we would return the tag so now because the default is h2 if I don't specify anything the tag would be an h2 inside there so if I inspect this you can see this is an h2 and if

04:57 I was passing the tag equals h4 which you shouldn't do here but now it's an h4 but for the tag you would probably limit to a union type that has h1 2 3 4 5 6 so people can't use the display heading

05:13 and use like a image tag or something for example so that here would be what I if you work in a framework that lets you do components which is basically every framework these days I would make the abstraction here and then you just use your display heading and the abstraction is done and

05:31 you can go and maintain it in one place but because it's a tip about how tailwind css works let's see the capabilities of tailwind css to make that abstraction I am not going to use apply but I'm going to show you how to customize the font size in the theme and how you can bake in extra things

05:49 to it all right so let's take all these classes there and delete our beautiful components and actually I will put the classes in here and delete that one let's change that to display heading I

06:04 think that's what it was saying at the start so here we are defining the font size and all the other elements and then at the medium breakpoint we just change the font size but all of the other

06:17 attributes like the letter spacing line height and font weight are all applied from mobile and up so as you've seen we can already combine the line height and the font size in one but if we decide that we want to combine more things within the font size like if we wanted to have the font weight

06:36 and more stuff we can do more if we go and customize the tailwind theme and specifically the font size here is my config I am using it as a preset in that setup so this is why there's the empty content array but don't worry about it everything else is exactly the same here I'm

06:54 going to extend the font family no font size sorry and so let's call our custom font size display right and I'll start from the basics and we will go 26 pixels which is the mobile default size and

07:12 so I'm going to break things for a bit but here instead of that I will use text and we should have a new display utility class that sets the font size to 26 pixels so before the medium break

07:23 point it is 26 pixels here now if I inspect the signature of this font size configuration you can see that we can have a string or we can have an array with two items the first one being the font

07:39 size as a string and the second one the line height as a string in other words I can set it like this array and the first one will be font size and the second one will be the line height which we want 1.15 now we have baked in again the line height like before but we can take it further

07:58 observing that once again we have the thing we've just done with the array the tuple with two options and the third option is an array again a tuple where the first one is the font size and the second one is an object that has line height letter spacing and font weight optional

08:16 that is pretty cool so this is exactly what we wanted so instead of that I can bake it in an options object and you can see I have line height and we're going to go with 1.15 once again but now

08:29 we can add the font weight as well and we want what do we want 700 and we want also the letter spacing and remember we wanted minus 0.025 m okay so now that we've defined the font size like this

08:48 for the display font I've got everything baked in here which means I can delete that and you might be screaming hey but you were using tracking tight not a specific value like this and when you define core plugins you can define them as a function like this and this returns or you could do an

09:07 implicit return but that's fine here and here you can access the theme function and that thing function will let you access things like theme like copilot suggests you can access letter spacing

09:23 dot tight and that is also going to work you can see that it replaced the value here if I had tighter the value would be different so let's go back with tight so this is all good and well but

09:37 this doesn't give us the responsiveness of things we're doing all this but then we still have to manually do that what if people in your team really wanted to be able to do just that just one class and have it be responsive and change sizes and this is where you thinking of going with at

09:55 apply and you can there's nothing fundamentally wrong with it maybe one of the things I don't like is you lose the autocomplete suggestions Tailwind IntelliSense struggles to find the things defined in apply so just for kicks I thought I would show you how you can do this

10:10 in a Tailwind plugin if you really wanted to have one class that sets all the font sizes and stuff responsively so I'm going to delete all of that that we've done for the font size core plugin

10:25 which means now a text display means nothing anymore just look at our display heading which is back to 16 pixels default so in my config file I will import the plugin function from Tailwind

10:41 CSS plugin and in here after the theme I will add the plugins array and so I'm going to inline a plugin function here so plugin and the plugin takes itself another function which is where you can access things like add base add components here we want to add a component because it's going

11:00 to be composing multiple style concerns and then we want to be able to override it with utilities so add components and I'll also grab the theme like we did before so we can pass stuff we want

11:14 to return some CSS that registers a class called text display so we're going to return add components and we're going to write a CSS in JavaScript syntax here and our class selector will be dot

11:30 text display I am very much fighting against Copilot right now I want to keep the surprise for you so we want to do all the things that we were doing font size is going to be 26 px and so

11:44 now we should be back to 26 pixels good and we're going to keep constructing our styles line height is going to be 1.15 and the font weight is going to be 700 but TypeScript is not going to be happy

12:02 this needs to be a string um and the last one was letter spacing and here we're going to use a little function again letter spacing dot type so how are we tracking this is looking pretty good to me but the cool thing is now we can because we're in a plugin we can also write the responsive

12:21 styles backed in that class so let me scroll down a bit here so I could here go at media mean width 768 pixels and then I could make this a template string and then use here the theme

12:37 frames dot md and then yep font size 32 pixels is the only thing we want to change this is going to generate the media query and change the font size and so now you can see once again the responsiveness

12:51 happening but we're only using a single text display class I don't do this often but if I do instead of writing this uh feels kind of complicated I like that you can use the um if we go to the

13:05 tailwind docs and look for the functions and directives like to use the screen function so you can use at media screen I will literally go at media screens md if you prefer and this is going

13:19 to translate to the same thing using the empty screen size all right and as a result we have our text display class that takes care of all the font attributes and you can see that it even overrides

13:34 itself at the mean width break point here which is nice and a cool thing about it is if you want to change the font weight to font thin and the tracking to tracking wider it's going to look

13:47 terrible but you can see that you can do this and the utilities will actually override the default set in the components because of the source order which I think is pretty cool and that's about it for this tip like I said I would still recommend making the abstraction at the component level

14:04 but there might be cases where you cannot use a component and you just need to pass a class so these are your options you can either have inline all the classes or you can combine the font size and line height with the slash or you can even beef up more of the typography metrics

14:22 together with the font size definition in the theme where you can have this array with the font size as the first item as a string and then an object a config object where you have line height font weight and letter spacing and finally if you want to go really crazy this is where the

14:39 plugin api opens the door to pretty much anything you can do we barely scratch the surface of what you can do with plugins hope you enjoyed that I'll see you in the next one bye