Utility-First

Building complex components from a constrained set of primitive utilities.

Overview

Traditionally, whenever you need to style something on the web, you write CSS.

Utility-First - 图1Using a traditional approach where custom designs require custom CSS

Utility-First - 图2

  1. <div class="chat-notification">
  2.   <div class="chat-notification-logo-wrapper">
  3.     <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  4.   </div>
  5.   <div class="chat-notification-content">
  6.     <h4 class="chat-notification-title">ChitChat</h4>
  7.     <p class="chat-notification-message">You have a new message!</p>
  8.   </div>
  9. </div>
  11. <style>
  12.   .chat-notification {
  13.     display: flex;
  14.     max-width: 24rem;
  15.     margin: 0 auto;
  16.     padding: 1.5rem;
  17.     border-radius: 0.5rem;
  18.     background-color: #fff;
  19.     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  20.   }
  21.   .chat-notification-logo-wrapper {
  22.     flex-shrink: 0;
  23.   }
  24.   .chat-notification-logo {
  25.     height: 3rem;
  26.     width: 3rem;
  27.   }
  28.   .chat-notification-content {
  29.     margin-left: 1.5rem;
  30.     padding-top: 0.25rem;
  31.   }
  32.   .chat-notification-title {
  33.     color: #1a202c;
  34.     font-size: 1.25rem;
  35.     line-height: 1.25;
  36.   }
  37.   .chat-notification-message {
  38.     color: #718096;
  39.     font-size: 1rem;
  40.     line-height: 1.5;
  41.   }
  42. </style>

With Tailwind, you style elements by applying pre-existing classes directly in your HTML.

Utility-First - 图3Using utility classes to build custom designs without writing CSS

Utility-First - 图4

  1. <div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  2.   <div class="flex-shrink-0">
  3.     <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  4.   </div>
  5.   <div class="ml-6 pt-1">
  6.     <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
  7.     <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
  8.   </div>
  9. </div>

In the example above, we’ve used:

  • Tailwind’s flexbox and padding utilities (flex, flex-shrink-0, and p-6) to control the overall card layout
  • The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally
  • The background color, border radius, and box-shadow utilities (bg-white, rounded-lg, and shadow-xl) to style the card’s appearance
  • The width and height utilities (w-12 and h-12) to size the logo image
  • The margin and padding utilities (ml-6 and pt-1) to position the card text
  • The font size, text color, and line-height utilities (text-xl, text-gray-900, leading-tight, etc.) to style the card text…allowing us to implement a completely custom component design, without writing a single line of custom CSS.

Now I know what you’re thinking, "this is an atrocity, what a horrible mess!" and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it.

But once you’ve actually built something this way, you’ll quickly notice some really important benefits:

  • You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.
  • Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
  • Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture.

Why not just use inline styles?

A common reaction to this approach is wondering, "isn’t this just inline styles?" and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class.

But using utility classes has a few important advantages over inline styles:

  • Designing with constraints. Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.
  • Responsive design. You can’t use media queries in inline styles, but you can use Tailwind’s responsive utilities to build fully responsive interfaces easily.
  • Pseudo-classes. Inline styles can’t target states like hover or focus, but Tailwind’s pseudo-class variants make it easy to style those states with utility classes.This component is fully responsive and includes a button with hover styles, and is built entirely with utility classes:

Utility-First - 图5

  1. <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  2.   <div class="sm:flex sm:items-center px-6 py-4">
  3.     <img class="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/women/17.jpg" alt="Woman's Face">
  4.     <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
  5.       <p class="text-xl leading-tight">Erin Lindford</p>
  6.       <p class="text-sm leading-tight text-gray-600">Customer Support Specialst</p>
  7.       <div class="mt-4">
  8.         <button class="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">Message</button>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </div>

Maintainability concerns

The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations.

This is easily solved by extracting components, either as template partials/JavaScript components, or using Tailwind’s @apply feature to create abstractions around common utility patterns.

Utility-First - 图6

  1. <!-- Using utilities -->
  2. <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  3.   Button
  4. </button>
  6. <!-- Extracting classes using @apply -->
  7. <button class="btn btn-blue">
  8.   Button
  9. </button>
  11. <style>
  12.   .btn {
  13.     @apply font-bold py-2 px-4 rounded;
  14.   }
  15.   .btn-blue {
  16.     @apply bg-blue-500 text-white;
  17.   }
  18.   .btn-blue:hover {
  19.     @apply bg-blue-700;
  20.   }
  21. </style>

Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success.

If you’d like to hear about others’ experiences with this approach, check out the following resources: