Skip to content
5kB utility CSS library that is compatible with TailwindCSS
Branch: master
Clone or download
Latest commit eb161ed Jun 3, 2019

README.md

Benefit Logo


Style web applications using generated utility classes

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

Documentation

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>
  )
}

Benefit Example

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>
You can’t perform that action at this time.