Build a Design System with React and Tailwind CSS

Rate this content
Bookmark

Tailwind CSS, with its utility-first approach is known for speeding up the development process. Combining it with the power of React, let’s see how you can build a custom design system for your project to further speed it up, make it scalable and also easy to maintain.

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

A design system is not just a style guide or component library, but typically includes a design language, design kit, component library, and documentation. It covers design elements like brand colors, fonts, spacings, and also includes reusable assets like icons and templates.

Customize Tailwind CSS by modifying the Tailwind configuration file to include custom values for colors, fonts, and other utilities as per the design specifications provided by your design team.

Examples of component libraries that integrate Tailwind CSS with React include Material-Tailwind, Windmill-React UI, and Kimea UI, each offering pre-built components that adhere to specific design systems.

Implementing a design system ensures consistency across your products, improves collaboration among team members, and speeds up the development process by providing a set of pre-defined elements and guidelines.

To integrate Tailwind CSS into a React project, start by installing Tailwind via npm, configure your Tailwind setup in your project, and then use Tailwind's utility classes directly in your React components.

Tailwind CSS is a low-level CSS framework that provides utility classes to style your web pages directly within your HTML files, minimizing the need for context switching between CSS and HTML.

Tailwind CSS helps in building a design system by allowing developers to customize and extend utility classes according to their design requirements, including colors, fonts, and layout configurations.

Shruti Balasa
Shruti Balasa
27 min
21 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.

1. Introduction to Design Systems and Tailwind CSS

Short description:

Hello everyone, I'm Shruti Balasah, a tech educator from India. Today, I'll be talking about design systems and how to build one using React and Tailwind CSS. We'll cover the importance of design systems, what they are, Tailwind CSS, advanced Tailwind configuration, React components with Tailwind, and component libraries for inspiration. A design system includes design language, design kit, component library, and documentation. Tailwind CSS is a low-level CSS framework that allows you to style web pages without leaving your HTML file. It has hundreds of utility classes and a wide range of colors and shades.

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.

2. Using Tailwind CSS to Build a Design System

Short description:

Tailwind CSS has utility classes for almost every single CSS property with commonly used values. Using these default utility classes, you can build even the most complex layouts without writing a single CSS rule. Tailwind CSS helps build a design system by providing a default configuration for a React app and allowing you to customize it based on a given style guide.

There are about 40 such classes, H1, H2, and so on. These are some samples from the documentation and the documentation is amazing by the way. You will find anything you are looking for within seconds. Then, something like this, H20, W20, you know, both of them about 80 pixels, width and height, then rounded full, so there's no need to use border, radius, 50%.. You can simply set rounded full. That's another great utility class. And this is one of the most amazing things in Tailwind. Look at that! By default it's a square, but after MDBreakpoint, that is for screens larger than MDBreakpoint, which is medium breakpoint, you can add a border radius, rounded full. Right? So you can specify any utility class using these breakpoints to change styles and without using any media queries as such. Much lesser code. And here's another thing, dark mode. You can use these dark variants by default, text gray 800 that is it's a dark gray color and in dark mode it's text white. We saw classes for text color, background color, border radius and heights. The same way, Tailwind has utility classes for almost every single CSS property with most commonly used values. Using these default utility classes, you can build even the most complex layouts like this and not have to write a single CSS rule. You don't have to invent class names and you don't have to constantly switch between HTML and CSS files.

Alright, now let's get to the crux. So how exactly does Tailwind CSS help build a design system? For that, let me close my slides and let's look at some real code. This is a React project I've created using create-react-app. I've installed Tailwind CSS following the documentation. It's pretty straightforward. I have also removed the default content from app.js and added just a heading here, paragraph and a link and just some utility classes here. Now this is what we have in the browser to begin with. Now here is our main file, the tailwind configuration file which is generated when you install Tailwind following the steps I just mentioned. This is the default configuration for a React app. If you want to use Tailwind as it is with all the default styles out of the box, you don't need to make any changes to this file. But to build a design system, this is your most important file. Assume you're given a style guide, something like this by your designer. I've taken this from Pinterest. It's just a really simple example.