Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/running-grass/grass-kit
一个基于Tailwind CSS的UI组件库，支持多个前端框架。
https://github.com/running-grass/grass-kit
component component-library lerna lit lit-element pnpm react storybook tailwind tainwindcss typescript ui-library vite vue web-component
Last synced: about 2 months ago
JSON representation
一个基于Tailwind CSS的UI组件库，支持多个前端框架。
- Host: GitHub
- URL: https://github.com/running-grass/grass-kit
- Owner: running-grass
- Created: 2022-06-18T06:57:12.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-07-04T08:13:15.000Z (over 2 years ago)
- Last Synced: 2024-10-30T05:06:50.416Z (about 2 months ago)
- Topics: component, component-library, lerna, lit, lit-element, pnpm, react, storybook, tailwind, tainwindcss, typescript, ui-library, vite, vue, web-component
- Language: HTML
- Homepage:
- Size: 3.56 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Grass Kit
一个基于`tailwindcss`的全框架UI库
## 愿景
1. 写一套样式和组件逻辑直接供vue，react，preact，原生html使用。
2. 统一一套主题配置可以应用在不同前端框架下
3. 在不同的框架下提供统一或相近的api
## 实现
1. 样式、主题基于tailwind来统一，在业务方使用tailwind.config.js来配置主题，
2. 组件的状态管理和事件系统靠web components来统一
3. vue，react, preact等框架下的库为对lit-element的封装和优化
## 文档
storybook地址: https://master--62bd4081cc758b9332a3687a.chromatic.com/
## 组件
### 按钮
#### 样式变体
- 普通的
- 主要的
### 支持的框架
- [x] web component
- [ ] vue
- [x] react
### 开关
### 支持的框架
- [x] web component
- [ ] vue
- [x] react
## 使用方式
### react
#### 首先引入增加包注册表映射，在`package.json`同级的`.npmrc`中增加下行
```dotenv
@grass-kit:registry=https://npm.pkg.github.com
```
#### 引入相关包
```bash
yarn add tailwindcss @grass-kit/tailwind @grass-kit/web-component @grass-kit/react
```
#### 配置`tailwind.config.js`
```javascript
module.exports = {
presets: [
require("@grass-kit/tailwind") // 增加这一行，引入tailwind的自定义组件
],
content: [
'./src/**/*.{ts,html}',
'./node_modules/@grass-kit/web-component/src/**/*.ts', // 增加这一行，避免自定义组件的样式被删掉
],
}
```
#### (使用postcss)配置`postcss.config.js`
```js
module.exports = {
plugins: {
tailwindcss: {}, // 增加这一样，应用tailwindcss的编译
},
}
```
## 注意事项
### 在浏览器插件的content script中使用
由于依赖了customelement的API，所以需要引入两个垫片
```
"node_modules/lit/polyfill-support.js"
"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"
```