代码拉取完成，页面将自动刷新
A windicss plugin
Install the plugin from npm:
# Using npm
npm install windicss-hsl
# Using Yarn
yarn add windicss-hsl
Then add the plugin to your windicss.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('windicss-hsl'),
// ...
],
}
Use the bg-{h}-{s}-{l} utilities to specify how many lines of text should be visible before truncating::
<button class="bg-primary-100-50 border border-success-60-30" type="button">Button</button>
<button class="bg-primary-100-50/60" type="button">Button</button>
Utilities are for clamping text up to 6 lines are generated by default:
| Class | CSS |
|---|---|
bg-primary-10-10 |
background-color: hsl(216 10% 10% / var(--tw-bg-opacity)); |
bg-success-20-50 |
background-color: hsl(152 20% 50% / var(--tw-bg-opacity)); |
bg-danger-100-50/60 |
background-color: hsl(354 20% 50% / 0.6); |
border-warning-70-80 |
border-color: hsl(45 70% 80% / var(--tw-bg-opacity)); |
| …… | …… |
You can configure which values and variants are generated by this plugin under the hslColors key in your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
hslColors: {
error: '0' // 0~360
}
}
},
variants: {
hslColors: ['responsive', 'hover']
}
}
hslColors: {
primary: '216',
secondary: '210',
success: '152',
danger: '354',
warning: '45',
info: '190',
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
