UI Design Tips Using Tailwind CSS for Developers

This article was originally published on Rails Designer.

This original article includes interactive components to preview the tips in this article. Check out the original article to see those.

The difference between an okay UI-design and a good great UI-design lies often in almost hidden details. Small tweaks that most may not recognize consciously, but once removed they are obvious.

This articles shows various little UI tweaks like these that can be applied immediately in your (Rails) app's UI. It's based on my 25+ years of UI/design experience. While it uses Tailwind CSS' classes (it's what Rails Designer's customers use), the same tips can be used with vanilla CSS.

Each preview shows how a tip is applied to the UI element.

Adjust letter-spacing for headlines

Kerning refers to the adjustment of the space between characters in a text to achieve a visually pleasing result. It can be changed using the letter-spacing property. Typically professionally-designed typefaces have specific settings based on weight, style and certain character pairs (eg. WA). Free typefaces (from Google Fonts) typically don't have these, resulting in awkward and even poor-looking typography!

Headlines often look immediately better using tighter kerning. It improves the visual harmony and legibility of the visual element.

Tailwind CSS provides the tracking-* classes to set the letter-spacing. The default options are tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest. But Tailwind of course allows for arbitrary values as well: tracking-[0.05em].

View interactive component to preview this tip.

Use colored shadows

When you have an element with a shadow (text- or box-shadow) against an element with a background color, other than gray, it can help to use a colored shadow too. It will make the shadow look less muddy and stand out more. You can use Tailwind CSS' Box Shadow Color utilities for this.

View interactive component to preview this tip.

Opacity for colored elements on gray backgrounds

When you use elements/components with a colored background, like badges or notification dots, against a gray background that changes on hover (eg. from white to gray or from gray-50 to gray-100), it is a good idea to make the colored background of the badge 50% opaque.

This technique allows for some of the gray to peek through, making the element more eligible and less muddy. An example probably works best.

View interactive component to preview this tip.

🎨 Rails Designer is a professionally designed UI components library for Rails. Built with ViewComponent. Designed with Tailwind CSS. Enhanced with Hotwire. Build beautiful, faster.

Use more white-space

One of the first rules I learned about (UI) design is: white-space is also a design element.

Most developers have the habit of cramping elements too close to each-other. They like information-dense screens. On the other most designers like to add more white-space. How to find the right balance?

It's tricky as it's depends case-by-case. But something to keep in mind is the balance between the horizontal and vertical space. A rule-of-thumb is that the horizontal (x) space should be more than the vertical (y) space. Check out the following example:

View interactive component to preview this tip.
(Check out Rails Designer's ButtonComponent for inspiration)

Enhance readability with proper line-height

Setting the line-height is one of those typography tricks that are tricky. Too much it looks off, too little and it looks off too.

A too narrow line-height is often the result of wanting to show too much information on one screen, but the result is it makes it harder to read.

Tailwind CSS provides both relative and fixed line-height with the leading-* class. Relative line-height is based on its current font-size. While a fixed line-height, sets it irrespective of the current font-size.

View interactive component to preview this tip.

Use subtle gradients for visual interest

Using subtle gradients in a background can help improve the visual interest of the element. The trick is to use slightly different shades of color. This is easy with the extensive color palette provided by Tailwind CSS. Something like from-indigo-900 to-indigo-800.

When setting the direction keep nature's colors in mind. What I mean by that is for light-themed elements go from light to dark and for dark-themed element go from dark to light. This mimics, respectively, sunrise and sunset.

View interactive component to preview this tip.

Limit text paragraphs width

When you have longer paragraphs of texts, it is important to keep the width contained. A good rule-of-thumb—one that I learned early on—is to limit it to 2.5 times of the full alphabet at its font size.

You can archive this by either increasing the font size or decreasing the container's width. This depends on the overall UI of the screen.

Typically decreasing the width of the text's container is the more wanted solution. CSS provides a unit called ch. It is based on the width of the 0 (zero) character in the font. So taking the above rule-of-thumb in mind, you can use max-width and use 2.5 × 26 = 65, resulting in: max-width: 65ch

Tailwind CSS comes with a utility class for this out-of-the-box: max-w-prose.

View interactive component to preview this tip.

Balance the line-height for headings

Another typograhpy tip! After all, great typograhpy can make or break a UI. When dealing with larger headings, it's important to keep the line-height in check. If not, the text might look like seperate elements, making it harder to read.

Tailwind CSS has already nicely balanced line-height's for their font-* utility classes.

View interactive component to preview this tip.

Implement smooth transitions for interactive elements

Adding subtle transitions to your focus and hover states can enhance the user experience by creating a natural flow, guiding user attention and maintaining visual continuity.

With just one CSS-class (transition), this can be archived with Tailwind CSS, but I almost default to the following classes transition ease-in-out duration-200. It gives this quite elegant transition.

View interactive component to preview this tip.

If you apply such a hover-state to big elements, make sure to add a delay-* class. This is to make sure your users don't accidentally trigger the hover-states when scrolling through your screen.