Introduction

benefit is a utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles. These styles are generated for you as you use them, so you don't have to worry about including stylesheets or eliminating unused styles.

Let's look at a quick example:

Here, we are applying 5 utility classes to a <div>. Click any class to remove it and try adding some new ones (like bg-pink-400 or italic).

http://localhost:3000

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.

bg-blue-500

p-4

text-white

shadow

rounded

As the class names are interpreted, style rules are inserted into your markup and cached for another element to take advantage of. This way, any utility only gets inserted once.

Now, we'll start from scratch

Let's start off with an unstyled <div> with some alert content. The goal is for us to make this look like an error that is displayed to the user.

First, we'll add bg-red-800 to style the background
Next, add text-white
Add some padding with p-4
Round the corners using rounded
Raise the error off of the page a bit by adding shadow-xl

http://localhost:3000

This is an alert message

Read more about utilities for Background Color, Text Color, Padding, Border Radius, and Box Shadow

Installation