Top utility-first CSS frameworks

CSS is an easy-to-use design language for making colorful websites and applications. CSS can be fun when working on smaller projects but it becomes overly complicated on large-scale projects where you can experience naming inconsistencies and code repetition. Developers have introduced various solutions to this problem, from BEM and SMACSS methodologies to frameworks aimed at solving some of these underlying issues.

Over the years, many CSS frameworks have cropped up to help simplify the development process. These frameworks take different approaches. For example, some of them follow the utility-first methodology and are hence called utility-first frameworks.

Utility-first frameworks provide a low-level utility class to build out custom designs within your HTML file. Utility classes are named according to their intended purpose, such that they’re easily understandable to the average person.

<div class="bg-white"></div>

The primary purpose of the class .bg-white is to add a background color of white. There are different classes for different purposes, such as setting background color or adding a margin or padding to a container.

It’s worth noting that utility-first frameworks do not provide a long-lasting solution to CSS’s underlying issues as a design language, but they can help reduce style-related headaches in the development process.

Without further ado, let’s take a look at the best utility-first CSS frameworks available in 2021.

Tailwind CSS

Tailwind CSS provides an extensive catalog of utility classes that can be used on the go to develop elegant-looking websites. You can design your HTML code with a high degree of customization without ever leaving the HTML file.

Installing TailwindCSS

To access Tailwind CSS and its pool of classes on the go, add the below reference to your HTML file:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Your HTML starter template should look like this:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

Note that certain Tailwind CSS features, such as directives, aren’t available on the CDN version.

Tailwind CSS is also available via the npm module. You can install it by running the command below in your terminal:

npm install tailwindcss

To use Tailwind CSS in production, you must inject the base, components, and utility styles to your newly created file using the @tailwind directive:

/* tailwind preflight injection */
@tailwind base;
@tailwind components;
@tailwind utilities;

The base styles that are default to Tailwind CSS are added with the injection of the @tailwind base preflight. Users can insert their own base style using the @layer base directive:

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  a {
    @apply text-blue-500;
  }
}

@tailwind components;

@tailwind utilities;

@apply directives are used for style composition:

<div class="my-1 w-full px-1">
  <section class="overflow-hidden rounded-lg shadow-lg">
    <a href="#">
        <img alt="card image" class="block h-auto w-full" src="https://picsum.photos/600/400/?random">
      </a>
   <div class="flex items-center justify-between leading-none p-2 ">
      <a class="flex items-center no-underline text-black" href="#">
        <img alt="user avatar" class="block rounded-full" src="https://picsum.photos/32/32/?random">
           <p class="ml-2 text-sm">
            Lorem ipsum dolor sit amet consectetur adipisicingelit. Iure, delectus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, fugiat.
             </p>
      </a>

     </div>

  </section>
</div>

Above is code implementation of a card component using Tailwind CSS:

Tailwind CSS is the right choice if you’re prioritizing speed and efficiency in the development process. It removes all that unnecessary CSS code, resulting in a much better-optimized application. Furthermore, you can write Tailwind CSS in your HTML file without creating a new file. This makes development a lot easier and straightforward.

Even though Tailwind CSS might sound next-level and futuristic, it’s still relatively junky and difficult to read. You’ll need a lot of practice to get used to its various classes, which are nonsemantic.

Tachyons

Tachyons is a lightweight (about 14KB), utility-first CSS framework that follows the mobile-first CSS architecture. You can create a fast and responsive website all within your HTML file. Tachyons work well on HTML, Ember, React, Angular, and more.

Installing Tachyons

Tachyons can be accessed by adding a reference to the minified file:

<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">

Your starter HTML file should be structured as follows:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
  <!-- ... -->
</head>
<body>

</body>
</html>

Alternatively, you can install via npm:

npm install [email protected]

Though Tachyons is written with PostCSS, there is additional support for SASS, which allows for more flexible development.

<div class="mw9 center pa4 pt5-ns ph7-l">
    <h2 class="f2 f1-m f-headline-l measure-narrow lh-title mv0">
      <span class="bg-black-90 lh-copy white pa1 tracked-tight">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit.=
      </span>
    </h2>
    <p class="f3 fw1 georgia i">Lorem ipsum dolor sit, amet consectetur                  adipisicing elit. Cumque odit quisquam atque ea dolores labore impedit      corrupti placeat cupiditate obcaecati.
   </p>
</div>

Shed.css

According to its founders, the idea to build Shed.css came after one of the founders got tired of repeatedly writing CSS. He believed that all the CSS anyone could need has already been written and there’s no need to reinvent the wheel.

Shed.css provides a single-purpose class that serves as a building block for your component or application. Rather than writing CSS ceaselessly, you’re provided a set of options that discourage bikeshedding. Like Tachyons, Shed is primarily written with PostCSS.

Installing Shed.css

Shed can be installed using the npm module.

Run the command below in your terminal to get started:

npm install --saveDev shed-css

Button implementation with Shed.css looks like this:

<button
  class="
    d:i-b
    f-w:700
    p-x:3
    p-y:.7
    b-r:.4
    f:2
    c:white
    bg:blue
    t-t:u
    hover/bg:blue.9
  "
>
  Log In
</button>

Basscss

Basscss classes are named in a human-readable format rather than taking a semantic approach. Just like the other libraries listed above, Basscss provides a lightweight and responsive alternative to pure CSS.

Installing Basscss

To get your hands on Basscss, you can link a reference to the CDN

<link href="https://unpkg.com/[email protected]/css/basscss.min.css" rel="stylesheet">

Or through npm installation

npm install [email protected]

Here’s an example of how to use Basscss:

<div class="flex flex-wrap items-center mt4">
  <h1 class="m0">Basscss <span class="h5">v8.0.2</span></h1>
  <p class="h3 mt1 mb1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente, voluptatibus.</p>
  <div class="flex flex-wrap items-center mb2">
  </div>
</div>

Expressive css

Expressive CSS is built on the utility-first development architecture. The name aims to highlight Expressive’s mission, which is to provide classes that are understandable for the average user. This makes Expressive a particularly good choice for visual design.

Here’s an example of how to use Expressive CSS:

<div class="grid-12 pad-3-vert s-pad-0">
    <div class="grid-12 pad-3-bottom">
        <h3 class="h1 pad-3-vert text-light text-blue">Lorem ipsum dolor sit</h3>
    </div>
    <div class="grid-12 pad-3-bottom">
        <h4 class="pad-1-bottom text-blue border-bottom marg-3-bottom">Do classes need to be ‘semantic’?</h4>
        <p class="grid-12 text-center">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi illum beatae voluptatibus nobis
               aliquid minima incidunt, ullam dolor dolorem nemo quia similique eaque veniam molestias aliquam,
             animi blanditiis earum quam labore mollitia architecto porro, in impedit! Cupiditate officiis magnam minima.
        </p>
    </div>
div>

Conclusion

The idea of a utility-first approach to class naming has been around for a while, but it only recently gained momentum with the release of TailwindCSS. Utility-first classes might look unfamiliar at first but as you get used to it, you will appreciate the benefits that it has to offer.