Hello everyone, I'm Shruti Balasah, a tech educator from India. Unfortunately I could not travel down to meet you all in person, but I'm still really thankful to be able to talk to all of you on this huge virtual stage.
I'm going to be talking about design systems today and how you can build one using React and Tailwind CSS. Any talk that has the word system in it has to be boring, right? But sorry, I won't make it boring for you. Here's a quick overview of what we'll be covering. Why design system? What a design system is? What is Tailwind CSS? How Tailwind helps with design system, advanced Tailwind configuration, React components with Tailwind, and finally some component libraries for inspiration.
Whether you already have a design system in place or hearing about this term for the very first time, I can assure you that you will take back something valuable in the next 20 minutes. I always start from the basics. So let's ask the first question, why design system? You have listened to so many talks since morning and surely design systems have popped up a lot. It's high time you implement a good design system in place.
So what exactly is this design system? It's not just some style guide or some component library. Ideally, a design system includes at least these four things, design language, design kit, component library, and documentation. Design language is the tiniest set of details that make up the whole of your front-end, like your brand colors, the type of fonts you use, including font sizes, font weights, and then spacing between elements, rounded corners, sharp corners, and so on. Design kit is the set of assets or graphic files the designer gives you. It can have icons, symbols, templates, mockups, and so on. Build libraries, I'm sure you know what this is. It's a set of reusable components like headers, buttons, form elements, cards, and hundreds of small building blocks. Finally, documentation brings together all these parts with references to each of them and lists the dos and don'ts. For the next 15 minutes or so, we will focus on these two parts of the design system, most important to us, as developers. Now enters Tailwind CSS. Of course, you've heard of it, maybe used it too, and some of you love it, some of you might even hate it. But for those of you who don't know what Tailwind CSS does, here's a quick two minutes intro.
Tailwind CSS is a low-level CSS framework that gives you the building blocks to style your web pages without having to leave your HTML file. No context switching. Tailwind has hundreds of utility classes like these, TextWhite, TextCenter, where TextWhite will set the color of your text to white and TextCenter will center it. Then something like this, BG Blue 200 will add a light blue background. Tailwind has about 220 shades by default that you can use. Here's just a sample. Tailwind has 22 main colors with 10 shades each, where 50 suffix is the lightest shade and 900 is the darkest. Next, the H20 that you see here is one of the fixed-height utility classes.
Comments