Translating a Custom Design System to Tailwind CSS

[Music] hello good friends in this video let's customize tailwind css to generate a bespoke set of utility classes that we're going to use to build a custom design that was handed over to us all right you ready let's get started right all right so say that i work for an agency that works on multiple custom projects and one of the designers has handed me over this figma composition that i have to now build in html and css the designer has also made us a big favor and created this sort of style guide document that contains information about breakpoints colors shadows and typography and these design decisions this collection of design tokens is what is used throughout the entire website so you can see here the typography the shadows the color scheme that builds the entire ui our job here is to build this website and so we're going to translate these design values into a tailwind css config file so we sort of generate a bespoke css framework that's going to help us build this site as a starting point we have a minimal tailwind css project so just a single html file here we're using the default config file you can see that i've just set the mode to just in time and define which files to look for and we also have our three tailwind directives in our css input okay so let's start at the top of our design document with the breakpoints so there are three breakpoints defined here but really the smallest breakpoint is our default mobile breakpoints so we really want only two breakpoints the 960 pixels and the 1248 pixels we could modify the existing tailwind breakpoints like sm md lg but it's also possible to use completely different names here if we scroll down to the typography section you'll see our document makes references to mobile desktop and tablet sizes so mobile here will be our default screen size and we will have two breakpoints that we named tablet and desktop in our config file we could go in the theme and then extend our screens object but that would create additional breakpoints on top of the existing tailwind's default breakpoints like md or lg and here we really only want two breakpoints and nothing else so we're going to move the screen subject directly in the theme and so we'll define two breakpoints like i mentioned tablet and desktop and so let's take a look at how this is now reflected in what classes are generated by tailwind so if i try one of tailwind's default responsive variants like lg or xl nothing but instead what we've created now is a tablet responsive variant as well as a desktop responsive variant the designer has also communicated values for horizontal padding and gutter and looking at these numbers it all seems to be multiples of 4 and since tailwind's default spacing scale is also using multiples of 4 will be fine for everything here alright so we can move to the next section so we've got seven custom colors here with custom names and we're going to use white as well so that's eight colors in total and these eight colors cover everything we need to build this entire ui once again here we want to completely override taylin's default colors so i will define a colors object directly in the theme and in here defined are 8 colors with the naming convention and hex colors that match the design style guide and so now check this out if i want to apply say a background color with bg dash you can see that we are presented with only the eight colors that we've defined and nothing else things already start to feel like we have a tailor-made system for this project all right let's repeat the process for our box shadows so we have a small and a large shadow here i'll open a box shadow object and put our small and large values in here and we can move to the next and last part of our style guide the typography so there's a few more things involved in here you can see we have information on the font family the font size but also the line height and the letter spacing we can achieve that by composing utilities for font size line height and letter spacing and make sure we use the right values every time but tailwind makes it easy to encode line height and letter spacing directly into the type scale so let's do that so it's going to make it easy to always use the right values alright so we have all these different values to define in our config so in our theme font size and i'll paste some code here and explain what's happening alright so this captures all the different font sizes defined in the style guide as you can see we've used a t-shirt size naming convention similarly to what tailwind does but again you can name these font sizes whatever you want in the scale and so what's interesting here is we've used the array syntax which allow us to have first the font size so here 14 pixels and then have an object with more properties for that font size so here we're defining the line height and the letter spacing but we still need to define our custom font families we have two here satoshi and inter in my project i already have a font folder with the custom font files here so what we need to do now is define font face at rules that are referencing these font files we're going to do this in our css file and we want to put that in the base layer and here i'll paste the series of font face at rules so we've added these fonts but now to be able to use these fonts conveniently let's create some font family utilities and here we'll define font satoshi and font inter utility classes almost everything in this website is using the interfont so what we want to do is blanket everything with the inter font and then when we need we can override it with font satoshi and one great way we can do this is by putting the font inter utility on the body element alright so we've defined our custom breakpoints custom colors shadows and typographic styles and so now we should have what feels like a custom css framework built just for this conference website project we are not going to build this entire responsive website in this video so what i'm going to do is do a little magic trick that will propel us in the future in a place where we've already started building the site and we have one more section to build together you ready hey that worked look at this so we got a navigation and hero section made and if we scroll down we can see that this section is not quite finished just yet and we're gonna work on that and then the rest of the website is also magically built since we've jumped into the future we got a good head start here in the sense that we've already got the markup and we get the grid of speakers already built what's missing really is the colors and font sizes and typography essentially the design values that we've codified in our tailwind config file and so what we're going to do here is apply a few utility classes to finish off that section and make it look like the figma design all right so let's start with the heading and paragraph here and so this heading is an h2 because we already have an h1 here for the page and looking at our typography document the h2 is using a font size of 36 pixels on mobile and then 56 pixels on desktop and tablet so on the h2 let's go find the font sizes that match within the custom scale that we've created in the config file so i'll go text dash and here we want to find 36 pixels which is text to xl and then we want to increase the font size at the tablet breakpoint so i'll use the tablet variant that we have available and here the 56 pixel font size will be text for xl we also want to change the color to use the custom purple so font black here is the font weight but we can change the text color with text dash and here we have all our custom colors and we can use text purple nice and the last thing we want to do is use the satoshi font instead of inter and i can use the font satoshi custom utility here alright looking good and now for the paragraph here the font size will be text xl and the color will be text medal and you can see how nice it is to be presented with just the relevant values and our design is coming together nicely okay next let's take care of the list of days here and here's what it looks like in figma so we're going to apply utilities to change the color font sizes and also this border color here so for our first program day tab we're going to add a border color with border purple and then for the text on the first span element we're going to make the text smaller with text extra small and the color will also be text purple and the next one will be a little bit bigger text extra large for the font size and one more time text purple for the color and so yep our first day looks nice here now i'm going to copy the same classes on the day 2 and 3 but then we'll change a few colors so for the border color instead of border purple we're going to use border metal but we're going to reduce the opacity to 10 percent see if i inspect this border in figma you can see the color which is our metal color but the opacity is 10 here and then for our text both colors will be metal as well okay so one more thing to do the typography for the speakers and the speaker rolls so here's what we're going for based on the figma design and here i'll use multi-cursor to style the six speakers in one go so let's go after the margin top and for the font size we'll use text extra small and the color here will be our nice tahiti blue and then for the speaker here the font size will be text lg and the color will be text midnight alright so that's what we've got now and let's go to the top of the site and scroll down to see how nicely integrated our section now feels and yeah i really like that well this is looking pretty good to me and hopefully you've noticed how pleasant and native the experience of building this website felt like thanks to having taken the time to translate these design values in the style guide into a tailwind config file to generate bespoke utility classes just for this project okay that about wraps it up for this video as always thank you so so so much and i will see you alrighty in the next one bye for now [Music]

Channel: Tailwind Labs

Views: 23,180

Keywords:

Id: cZc4Jn5nK3k

Length: 10min 10sec (610 seconds)

Published: Fri Nov 12 2021