Felix App Tailwind 设计系统
在菲利克斯的台风CSS 预设了我们的基础风格和设计标志
使用量
如果你已经没有了 tailwind.config.js 在工程根中的文件,生成一个 npx tailwindcss init
运行 npm i @felix-health/felix-app-tailwind-design-system 在您的工程中安装预设
然后将预设添加到您的 tailwind.config.js 文件 :
// tailwind.config.js
module.exports = {
// ...
presets: [require('@felix-health/felix-app-tailwind-design-system')],
};
此预设将尾风配置运行于 简讯 模式。 这意味着你必须确保配置您的 content 选项 tailwind.config.js 带有所有模板文件的文件,以便JIT模式能够知道哪些文件可以扫描 :
module.exports = {
// These paths are just examples, customize them to match your project structure
content: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
// ...
presets: [require('@felix-health/felix-app-tailwind-design-system')],
};
我们还增加了 fx- 每个班级通过 前缀 默认键.
您可以继续在您的配置中添加其它配置 tailwind.config.js 类似文件 important等,还有...
尾风查看器
如果您想要视觉表现预设本身生成的类, 我们使用 尾风配置查看器。 。 。 .
后风配置取景器在 : https://tailwind-config-viewer.felixforus.ca. 中国植物物种信息数据库
本地运行,运行 npm install 接下来 npm run tailwind-config-viewer 从项目的根。 这个用的是 tailwind.config.js 从预设中生成样式的文件.
出版新版本
- 确保您将软件包的版本切入
package.json - 将您的更改合并到
master分支 - 继续走 这里 创建新的发行。 发布后, Github 动作会将发布推向 npm
说明*
消耗您在 vue-components 仓库 : npm install @felix-health/felix-app-tailwind-design-system@latest
如果您发现依赖性太新出错
您可以绕过最低释放年龄要求 :
npm config set min-release-age 0
npm install <package-name>
# Then set it back
npm config set min-release-age <original value in .npmrc>
其他说明
了解更多 TailwindCSS 预设: https://tailwindcs.com/docs/预设