benefit
is a 5kb
utility CSS library that is compatible with TailwindCSS.
- 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.
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
.
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 ofReact.createElement
.
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>
)
}
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>