How to make your designs code-ready for Tailwind CSS

Subscribe to our monthly newsletter to get the latest news and handpicked content delivered to your inbox.

Back to blog

September 1st, 2022, posted in learning
by Adelina

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 UI rules.

 

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 easy to grow upon. 

 

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. 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: Let Tailwind-based UI Kits be your guide.

There are 2 ways you can get started. First, you can download a Tailwind-based Figma UI Kit 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 design system.

 

Let’s talk about the UI Kit option first. We’ll be using Flowbite as an example.

 

Flowbite starts off with a series of Tailwind-based rules for an app’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 and standardized in Tailwind. 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.

 

Reinvent the wheel - as if it were IKEA furniture.

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 an UI Kit, especially Tailwind rules for layout grids, text sizes, spacing, shadows and borders. So you can either (a) use an existing Tailwind UI Kit as a reference for your own or (b) use a Tailwind cheat sheet for all the visual rules.

 

Here’s how you can proceed:

    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:

 

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.


About the author

Adelina

Artsy kid navigating the world of tech for the first time and trying to learn as much as possible about it. My biggest passions are video making, writing, and TV shows I can cry to at 2AM. I also really love IKEA.

See more articles by Adelina