'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary" } }, } //在rules中使用 rules: [ [ /^text-(.*)$/, ([, c], { theme }) => { if (theme.colors[c]) return { color: theme.colors[c] } } ] ] variants 变体属性 允许对现有规则应用一些变化,例...
可以在 unocss 的配置文件里进行 theme color 配置,然后就可以随意组合使用了 theme: { colors: { 'info': '#bfbfbf', // class="text-info" 'content': { 'primary': 'fe003b', // class="text-content-primary" }, }, } 如果需要直接使用 css 变量的话可以直接写成 class="text-[--red-color...
:{/*** @default ':root'*/selector?:string/*** @default 'class'*/attribute?:string/*** @default 'light'*/defaultValue?:string}/*** use opacity variable** ```css* .text-primary {* --un-text-opacity: 1;* color: rgb(var(--un-palette-primary-rgb) / var(--un-text-opacity))...
bg-primary-50 在 light 下应该是浅色，dark 下应该是深色
['text-dynamic', 'text-[var(--color-text-1)]'], ['bg-dynamic', 'bg-[var(--color-bg-2)]'], ], theme: { // 颜色 colors: { // Primary 颜色 'primary': '#2080f0', 'primary-hover': '#4098fc', 'primary-active': '#1060c9', // Info 颜色 'info': '#909399', 'info-ho...
:{/*** @default ':root'*/selector?:string/*** @default 'class'*/attribute?:string/*** @default 'light'*/defaultValue?:string}/*** use opacity variable** ```css* .text-primary {* --un-text-opacity: 1;* color: rgb(var(--un-palette-primary-rgb) / var(--un-text-opacity))...
<!-- HTML 示例 --> <div class="bg-customPrimary text-customSecondary"> 这是一个使用自定义颜色的div。 </div> 或者,如果你在使用Vue组件: vue <template> <div class="bg-customPrimary text-customSecondary"> 这是一个使用自定义颜色的Vue组件。 </div...
使用预定义的颜色名称:const colors = require('unocss/colors')module.exports = { colors: { ...colors }}这样 可以使用预定义的颜色名称,如 `colors.primary`、`colors.white` 等。2. 自定 义新的颜色:module.exports = { colors: { customColor: '#ff0000' }} 这样可以在样式中使用 `customColor`...
直接说结论:省字 以及，像space这种，行内style恐怕是实现不了的，同样的还有elementui/bootstrap之类很...
如果需要直接使用 css 变量的话可以直接写成 class="text-[--red-color]" 或者class="text-$red-color" 有用 回复 chow: 配置项能用css变量吗,比如'primary': 'var(--color)' 回复2月 18 日来自天津 holyPotato: @chow 已补充回答 回复2月 18 日来自山东 ...