UI Design Tips Using Tailwind CSS for Developers

3D rendering of an empty classroom with the sun shining through the windows.

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].

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.

Keep colors consistent

One of the things I like most about Tailwind CSS is its extensive color palette. Specifically the grays. Just make sure to stick to the preferred hue (eg. slate, zinc, etc.) and don’t mix them to avoid a muddy look.

Tailwind CSS gives you plenty of shades of gray to choose from. I like to set my preferred gray hue (eg. slate) in the Tailwind config, so I can just use bg-gray-* which is more natural to me than bg-slate-*.

// tailwind.config.js
module.exports = {
  // …
  theme: {
    extend: {
      colors: {
        gray: colors.slate
      }
    }
  }
  // …
}

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.

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:

(Also check out Rails Designer’s ButtonComponent for inspiration)

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.

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.

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.

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.

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. Check out this article about a quicker way if you use this set of classes all the time.

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.

Got other tips to share with developers? Let me know about them.

Rails Designer is a professional UI components library for Rails

Get product updates, insights and latest articles in your inbox

Published at . Last updated at . Have suggestions or improvements on this content? Do reach out. Interested in sharing Rails Designer with the Ruby on Rails community? Become an affiliate.

UI components for Ruby on Rails apps

$ 99 one-time
payment

Get Access
  • One-time payment

  • Access to the entire library

  • Built for Ruby on Rails

  • Designed with Tailwind CSS and enhanced with Hotwire

  • Includes free updates (to any 1.x version)