一个基于tailwindcss
的全框架UI库
storybook地址: https://master--62bd4081cc758b9332a3687a.chromatic.com/
package.json
同级的.npmrc
中增加下行@grass-kit:registry=https://npm.pkg.github.com
yarn add tailwindcss @grass-kit/tailwind @grass-kit/web-component @grass-kit/react
tailwind.config.js
module.exports = {
presets: [
require("@grass-kit/tailwind") // 增加这一行,引入tailwind的自定义组件
],
content: [
'./src/**/*.{ts,html}',
'./node_modules/@grass-kit/web-component/src/**/*.ts', // 增加这一行,避免自定义组件的样式被删掉
],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {}, // 增加这一样,应用tailwindcss的编译
},
}
由于依赖了customelement的API,所以需要引入两个垫片
"node_modules/lit/polyfill-support.js"
"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"