How to make your designs code-ready for Tailwind CSS

An essential part of UX design work is making sure it can be easily coded. And if you’ve got a starting point - let’s say, your team picked a tech stack for a new project already - you’re in luck. You’re not going in blind, and you can use a set of rules when designing, instead of going wild. Certain frameworks, like Tailwind CSS which we’ll be talking about, come with their own sets of rules for UI kits and components.

In this article, we’re going to talk about best practices when designing a Tailwind app in Figma. Now you might ask, okay, I’ve heard this word before. What is it, really? Simply put, Tailwind is a CSS framework that lets developers fully customize page elements, while keeping their code clean and their component library organized. 

A big part of Tailwind is the standardization of design elements: developers won’t go wild creating button styles, border radiuses, shadows or colors. Instead, they use a series of presets and Tailwind CSS components. For instance, shadows can be divided into “small”, “medium” or “large” with preset settings, so that when the developer writes in a small shadow, the code already knows how small that shadow is.

You might be thinking, this sounds pretty restrictive. But you don’t have to stick to all of Tailwind’s defaults (you can play around with colors as long as you have a range of 10 shades) - the key is maintaining a clean, structured design system. So you can totally get creative, but keep it lawful.

Getting started with a Tailwind UI Kit

There are 2 ways you can get started. First, you can download a UI Kit for Tailwind CSS like daisyUI or Flowbite and let it take the wheel. As in, use them as they come, by putting elements together like a puzzle. Second, you can use Tailwind’s rules as a reference and create your own components and templates.

Let’s talk about the ready-made UI Kit for Tailwind option first. We’ll be using Flowbite as an example.

Flowbite starts off with a series of Tailwind-based rules for an app’s or admin dashboard`s foundation: colors, layout grids, typography, spacing, avatars, illustrations, icons, shadows and borders. These elements are all ready for code, which means putting them directly into your designs makes developers’ work faster.

Of course, this also means that deviating from these elements would make their jobs difficult. Layout grids, text sizes, spacing, shadows and borders are standardized in Tailwind CSS and its component library. Which means that using different numbers and rules will require extra setup work for the developers.

So how can you stick to them? UI Kits make it easy for you by setting everything up as styles in Figma, specifically:

• Colors
• Text
• Shadows

But there’s a limit to the kind of styles you can create: when it comes to spacing and borders, you can’t really set up a series of rules. So take it analog and write them down. And when you need to figure out how many pixels you should leave between elements, look at your list and use a number from there. 

Colors and typography are not as dead-set as the other elements. Tailwind isn’t forcing you to forgo your client’s brand style and guidelines. So feel free to change the color palettes your UI Kits come with. The key, however, is to maintain a number of shades and types of colors that can be easily used in code. So use the color systems in UI Kits as a reference for your own.

Then we reach the individual components. Buttons, forms, alerts, breadcrumbs, dropdowns, and so on. Here there’s not much to say: if the UI Kit’s style fits your app’s style, all you have to do is put them together like a puzzle. 

Most of these are components in Figma, which makes it easier to apply changes to elements across your design, or switch from a button style to another. But in case you need to make bigger changes to certain elements, they shouldn’t be components anymore. To do that, duplicate them so they become instances, then choose ‘detach instance’ from the right side menu. Now you can edit it as a regular element.

Creating your own UI Kit for Tailwind CSS

The second thing you can try is coming up with an original UI Kit, while sticking to Tailwind rules. The example we mentioned earlier, Flowbite, lists all the important elements that should go into a UI Kit for Tailwind CSS, including rules for layout grids, text sizes, spacing, shadows and borders. So you can either (a) use an existing Tailwind UI Kit and component library as a reference for your own or (b) use a Tailwind cheat sheet for all the visual rules and create your own components and templates.

Here’s how you can proceed:

1. 1. Make separate pages for all the Tailwind essentials: layout grids, text sizes, spacing, shadows and borders. Set them up as styles in Figma for easier access.
   2. Setup all the grid sizes, typography, spacing, shadow and borders based on Tailwind rules. Use the cheat sheet we linked earlier.
   3. Make a page for your project colors, structuring them like an UI Kit - 10 shades for each key color. Additionally, you can put a title above each color set, which can later be used by the developers in their code. Make it simple - just a “colors.red” is enough.
   4. Make pages for your individual elements, like buttons, inputs, alerts, navigation, and so on. Some of these you will keep reiterating, so remember to replace them in your UI Kit as well. You can have separate pages for all of them, or put them together, depending on how big your project is.
   5. When you’re done, ask a Tailwind developer from your team to check out your UI Kit and make sure you didn’t miss anything.

We’ve gone in more detail about creating and using UI Kits in other articles:

• [Foundation Series] The anatomy of a UI Kit. What it is and how to use it in Figma
• Dear UI/UX designers: here’s how to work with developers

When in doubt, just talk to the code makers.

You can’t be expected to know everything about Tailwind. So don’t be shy, and ask help from your dev team when needed. This applies when you’re thinking about creating a custom element or when you’re not sure if you can forgo certain Tailwind rules. If the Internet isn’t answering your questions, just ask your devs.

Alternatively, you can go through Tailwind’s documentation and search for the elements you’re looking to create, to make sure they exist. This is a quick way to not only see them listed, but to play around with them and see if they’re what you need.

But let’s say you still haven’t found what you’re looking for. Tailwind has quite a large community, and you shouldn’t hesitate to ask its members for help. You can join their Discord, contact them on Twitter, or go on Reddit and ask your questions there.

Setting that aside, showing them your work along the way can help you avoid making big, costly mistakes. We’ve talked about the importance of this before, but when it comes to Tailwind and its vast rules, it’s even more crucial. Humans are humans and we’re bound to forget about spacing or border radius sometimes. And developers who have worked with Tailwind enough will be able to find those issues. 

The key here is for them to find the issues while you’re still designing key app elements. You know why? Because soon enough you’ll make 15 screens containing said element, and it’ll take way too long to update it on every screen. It’s best to settle on these things early enough, to avoid further trouble down the road.

So there you have it. These are our tips on how to make Tailwind-friendly designs. Keep in mind: it’s all about sticking to a few rules, and keeping in touch with your dev team.

If you’re not actually designing an app for Tailwind CSS but you’d like to get one built, contact us and let’s see what we can come up with.

If you liked this article subscribe and get an email when we publish new, juicy stuff. We hate spammers, so we don’t spam.