{"id":18040517,"url":"https://github.com/running-grass/grass-kit","last_synced_at":"2025-07-11T15:17:35.890Z","repository":{"id":37287720,"uuid":"504769128","full_name":"running-grass/grass-kit","owner":"running-grass","description":"一个基于Tailwind CSS的UI组件库，支持多个前端框架。","archived":false,"fork":false,"pushed_at":"2022-07-04T08:13:15.000Z","size":3735,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-01T10:26:08.294Z","etag":null,"topics":["component","component-library","lerna","lit","lit-element","pnpm","react","storybook","tailwind","tainwindcss","typescript","ui-library","vite","vue","web-component"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/running-grass.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-18T06:57:12.000Z","updated_at":"2024-10-11T08:11:58.000Z","dependencies_parsed_at":"2022-08-01T00:08:09.049Z","dependency_job_id":null,"html_url":"https://github.com/running-grass/grass-kit","commit_stats":null,"previous_names":["grass-kit/grass-kit"],"tags_count":24,"template":false,"template_full_name":"running-grass/starter-lit-with-tailwind","purl":"pkg:github/running-grass/grass-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/running-grass%2Fgrass-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/running-grass%2Fgrass-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/running-grass%2Fgrass-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/running-grass%2Fgrass-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/running-grass","download_url":"https://codeload.github.com/running-grass/grass-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/running-grass%2Fgrass-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264837940,"owners_count":23671123,"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":["component","component-library","lerna","lit","lit-element","pnpm","react","storybook","tailwind","tainwindcss","typescript","ui-library","vite","vue","web-component"],"created_at":"2024-10-30T15:06:27.462Z","updated_at":"2025-07-11T15:17:35.863Z","avatar_url":"https://github.com/running-grass.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Grass Kit\n一个基于`tailwindcss`的全框架UI库\n\n## 愿景\n1. 写一套样式和组件逻辑直接供vue，react，preact，原生html使用。\n2. 统一一套主题配置可以应用在不同前端框架下\n3. 在不同的框架下提供统一或相近的api\n\n## 实现\n1. 样式、主题基于tailwind来统一，在业务方使用tailwind.config.js来配置主题，\n2. 组件的状态管理和事件系统靠web components来统一\n3. vue，react, preact等框架下的库为对lit-element的封装和优化\n\n\n## 文档\nstorybook地址: https://master--62bd4081cc758b9332a3687a.chromatic.com/\n\n## 组件\n\n### 按钮\n\n#### 样式变体\n\n- 普通的\n- 主要的\n\n### 支持的框架\n\n- [x] web component\n- [ ] vue \n- [x] react\n\n### 开关\n\n### 支持的框架\n\n- [x] web component\n- [ ] vue \n- [x] react\n\n\n## 使用方式\n\n### react\n#### 首先引入增加包注册表映射，在`package.json`同级的`.npmrc`中增加下行\n```dotenv\n@grass-kit:registry=https://npm.pkg.github.com\n```\n\n#### 引入相关包\n```bash\nyarn add tailwindcss @grass-kit/tailwind  @grass-kit/web-component @grass-kit/react\n```\n\n#### 配置`tailwind.config.js`\n```javascript\nmodule.exports = {\n  presets: [\n    require(\"@grass-kit/tailwind\")  // 增加这一行，引入tailwind的自定义组件\n  ],\n  content: [\n    './src/**/*.{ts,html}',\n    './node_modules/@grass-kit/web-component/src/**/*.ts', // 增加这一行，避免自定义组件的样式被删掉\n  ],\n}\n```\n\n#### (使用postcss)配置`postcss.config.js`\n```js\nmodule.exports = {\n  plugins: {\n    tailwindcss: {}, // 增加这一样，应用tailwindcss的编译\n  },\n}\n```\n\n\n## 注意事项\n\n### 在浏览器插件的content script中使用\n由于依赖了customelement的API，所以需要引入两个垫片\n```\n\"node_modules/lit/polyfill-support.js\"\n\"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js\"\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunning-grass%2Fgrass-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frunning-grass%2Fgrass-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunning-grass%2Fgrass-kit/lists"}