{"id":13394018,"url":"https://github.com/cdonohue/benefit","last_synced_at":"2025-07-14T04:06:45.076Z","repository":{"id":37736215,"uuid":"175457673","full_name":"cdonohue/benefit","owner":"cdonohue","description":"✨ Utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles","archived":false,"fork":false,"pushed_at":"2023-01-04T08:52:45.000Z","size":5435,"stargazers_count":51,"open_issues_count":82,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-10T19:03:17.795Z","etag":null,"topics":["css","css-in-js","design","emotion","jsx","system","tailwindcss","utility-classes"],"latest_commit_sha":null,"homepage":"https://benefit.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cdonohue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-13T16:21:17.000Z","updated_at":"2023-05-12T16:54:14.000Z","dependencies_parsed_at":"2023-02-02T06:01:57.575Z","dependency_job_id":null,"html_url":"https://github.com/cdonohue/benefit","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdonohue%2Fbenefit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdonohue%2Fbenefit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdonohue%2Fbenefit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdonohue%2Fbenefit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdonohue","download_url":"https://codeload.github.com/cdonohue/benefit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243982177,"owners_count":20378604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-in-js","design","emotion","jsx","system","tailwindcss","utility-classes"],"created_at":"2024-07-30T17:01:05.916Z","updated_at":"2025-03-19T10:30:33.299Z","avatar_url":"https://github.com/cdonohue.png","language":"JavaScript","readme":"[![Benefit Logo](benefit-logo.svg)](https://benefit.netlify.com)\n\n---\n\n## Style web applications using generated utility classes\n\n`benefit` is a utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles.\n\n[Documentation](https://benefit.netlify.com)\n\n`benefit` is framework agnostic, use `benefit-react` for additional enhancements for React.\n\n---\n\n### React-specific\n\n#### Install dependencies\n\nAdd `benefit-react` to your project.\n\n```bash\nyarn add benefit-react\n```\n\n#### Setup transpilation\n\nSet the jsx pragma at the top of your source file where you intend to use `benefit-react`.\n\n\u003e Similar to a comment containing linter configuration, this configures the jsx babel plugin to use the `jsx` function instead of `React.createElement`.\n\u003e\n\u003e [JSX Pragma Documentation](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#pragma)\n\nImport the `jsx` function from `benefit-react`\n\n```js\n/** @jsx jsx */\nimport { jsx } from \"benefit-react\"\n```\n\nNow, you're free to use any available [utility classes](https://benefit.netlify.com) to style your components\n\n```js\n/** @jsx jsx */\nimport { jsx } from \"benefit-react\"\n\nfunction MyComponent() {\n  return (\n    \u003cdiv className=\"p-4 bg-orange-300 rounded\"\u003e\n      \u003cp className=\"p-4 bg-white shadow rounded-sm\"\u003e\n        Williamsburg stumptown iPhone, gastropub vegan banh mi\n        microdosingpost-ironic pok pok +1 bespoke dreamcatcher bushwick brunch.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Framework agnostic\n\nAdd `benefit` to your project.\n\n```bash\nyarn add benefit\n```\n\nImport and use the `createBenefit` function to create your utility classes\n\n```\nimport { createBenefit } from \"benefit\"\n\nconst { styleWith } = createBenefit()\n```\n\nUse `styleWith(...)` to pass in utility classes\n\n```\n\u003cdiv class={styleWith(\"p-4 bg-white text-blue-700\")}\u003e\n  ...\n\u003c/div\u003e\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdonohue%2Fbenefit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdonohue%2Fbenefit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdonohue%2Fbenefit/lists"}