MarcusMorba / benefit

✨5kB utility CSS library that is compatible with TailwindCSS

---

Style web applications using generated utility classes

benefit is a 5kb utility CSS library that is compatible with TailwindCSS.

Documentation

• Small runtime
• No build step
• Element normalization
• Style isolation
• Fully Customizable
• Works with TailwindCSS class names out of box

And... it only inlines the CSS for the utilities that you actually use

benefit is framework agnostic, but also exports some react helpers.

---

React-specific

Install dependencies

Add benefit to your project along with @emotion/core.

yarn add benefit @emotion/core

Set the jsx pragma at the top of your source file where you intend to use benefit.

Setup transpilation

Set the jsx pragma at the top of your source file where you intend to use benefit.

/** @jsx jsx */

Similar to a comment containing linter configuration, this configures the jsx babel plugin to use the jsx function instead of React.createElement.

JSX Pragma Documentation

Import the jsx function from benefit

/** @jsx jsx */
import { jsx } from "benefit/react"

Now, you're free to use any available utility classes to style your components

/** @jsx jsx */
import { jsx } from "benefit/react"

function MyComponent() {
  return (
    <div className="p-4 bg-orange-300 rounded">
      <p className="p-4 bg-white shadow rounded-sm">
        Williamsburg stumptown iPhone, gastropub vegan banh mi
        microdosingpost-ironic pok pok +1 bespoke dreamcatcher bushwick brunch.
      </p>
    </div>
  )
}

Framework agnostic

Add benefit to your project along with emotion.

yarn add benefit emotion

Import and use the benefit function to create your utility classes

import benefit from "benefit"

const { styleWith } = benefit()

Use styleWith(...) to pass in utility classes and output emotion processed css classes

<div class={styleWith("p-4 bg-white text-blue-700")}>
  ...
</div>