菜单 搜索
首页 前端知识 UnoCss使用

UnoCss使用

2024-02-03 12:02:44 前端知识 前端哥 564 725 我要收藏

UnoCSS: The instant on-demand Atomic CSS engine
样式文档

来源：UnoCSS给了我一个不用tailwindcss的理由 - 掘金

安装依赖

pnpm i unocss 

# 重置样式 引入自己自定义的样式也可以
pnpm i @unocss/reset

# 如果需要使用 UnoCSS 的图标预设，还需要安装@iconify/json
pnpm i @iconify/json

集成 UnoCSS

1. 修改 vite.config.js,添加 unocss plugin

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import unocss from 'unocss/vite' 
// https://vitejs.dev/config/ 
export default defineConfig({   
	plugins: [vue(), unocss()] 
})

2. 修改 main.ts 和 style.css

import { createApp } from 'vue' 
/** 重置样式 这里引入自定义的重置样式也可 */ 
import '@unocss/reset/tailwind.css' 
/**   
* 项目内的样式，  
* 注意：最好放在重置样式后，uno.css前  
* */ 
import './style.css' 
/** 引入uno.css，不引入不生效 */ 
import "virtual:uno.css"
import App from './App.vue' 
createApp(App).mount('#app')

/* TODO: 不清晰 */
:root {
  --primary-color: #316c72;
  --dark-bg: #18181c;
}

html {
  font-size: 4px; // * 方便unocss计算：1单位 = 0.25rem = 1px
}

body {
  font-size: 16px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: var(--dark-bg);
}

注意：不管是UnoCSS还是tailwindcss、windicss，默认 4单位 = 1rem，即 1单位 = 1/4rem，而 rem 是相对于html的 font-size 来计算的，一般来说大部分浏览器的html默认 font-size 为 16px，即 1rem = 16px，也就是说 Unocss 的1单位换算成 px 就是 4px，这种方式没什么问题，但对于习惯了使用px计算的人来说，每次都要心算一遍要写多少单位就略显麻烦了。那么有没有办法让 unocss 的 1单位=1px 了，这样就没有心算成本了，答案是当然有：由公式 1单位 = 0.25 * ${html font-size} = 1px 可知：将 html 的 font-size 应该为 4px 即可

Presets 预设

Attributify preset

TODO：这个很强大

presetAttributify

例如：presetAttributify 可以在标签上直接写 CSS 样式

<div bg-green-50 un-hover="bg-green-200" un-text-xl text-center />

Icon（图标）

Icons preset

安装：

pnpm add -D  @iconify-json/[你想要的收藏]

// uno.config.ts
import { defineConfig,presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({ 
	    /* options */ 
	}),
    // ...other presets
  ],
})

安装 @unocss 时会自带 preset-icons，所以安装 @iconify-json 图标就可以了

所有可用图标 -> Icônes

使用：

<span class="i-logos-vue text-3xl" />
<button class="i-carbon-sun dark:i-carbon-moon" />
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

还可以自定义图标
自定义图标

Rulers （规则）

Rules

export default defineConfig({  
   // ...UnoCSS options
  rules: [
      [
        // 多行文本超出部分省略号 line-n
        /^line-(\d+)$/,
        ([, l]) => {
          if (~~l === 1) {
            return {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
              width: "100%",
            }
          }
          return {
            overflow: "hidden",
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": l,
          }
        },
      ],
    ],
})

Shortcuts（快捷方式）

Shortcuts

// 自定义快捷方式
shortcuts: {
	"bg-main": "bg-green-50",
	// ...
},

<div class="bg-main" />

transformer

Directives（指令）

Directives transformer

安装：

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

使用：

可以使用 @apply 、 @screen 和 theme() 指令

.btn {
	@apply rounded px-2 border-none bg-blue-5 text-white;
}

注意：在 scss 文件中使用 @apply 写法，会出现 vscode 无法识别的问题

.btn {
	--at-apply: rounded px-2 border-none bg-blue-5 text-white;
}

可以使用 --at-apply

Variant Group ( 前缀组)

Variant group transformer

解决繁琐的多次写前缀的情况

安装：

pnpm add -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/> <!-- 简化之后： --> 
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Compile Class（构建合并多个原子类到一个类）

Compile class transformer

// install
pnpm add -D @unocss/transformer-compile-class

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

使用：

<div class=":uno: text-center sm:text-left">   
	<div class=":uno: text-sm font-bold hover:text-red"/> 
</div>

最终编译的结果：

<div class="uno-qlmcrp">   
	<div class="uno-0qw2gr"/> 
</div>

Attributify JSX（支持 JSX）

Attributify JSX transformer

Theme

Theme

// uno.config.ts
import { defineConfig } from "unocss"
export default defineConfig({
// ...UnoCSS options
	theme: {
		colors: {
			success: "#67C23A",
			warning: "#E6A23C",
			danger: "#F56C6C",
		},
	},
})

注意事项：

  • 使用 Ant Design Vue 时， unocss 的重置样式让，a-button 的默认按钮变透明
    • 在 main.ts 中引入 import '@unocss/reset/tailwind-compat.css'
    • 而不是 import '@unocss/reset/tailwind.css'
    • 即可解决UnoCSS: The instant on-demand Atomic CSS engine
      样式文档

来源：UnoCSS给了我一个不用tailwindcss的理由 - 掘金

安装依赖

pnpm i unocss 

# 重置样式 引入自己自定义的样式也可以
pnpm i @unocss/reset

# 如果需要使用 UnoCSS 的图标预设，还需要安装@iconify/json
pnpm i @iconify/json

集成 UnoCSS

1. 修改 vite.config.js,添加 unocss plugin

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import unocss from 'unocss/vite' 
// https://vitejs.dev/config/ 
export default defineConfig({   
	plugins: [vue(), unocss()] 
})

2. 修改 main.ts 和 style.css

import { createApp } from 'vue' 
/** 重置样式 这里引入自定义的重置样式也可 */ 
import '@unocss/reset/tailwind.css' 
/**   
* 项目内的样式，  
* 注意：最好放在重置样式后，uno.css前  
* */ 
import './style.css' 
/** 引入uno.css，不引入不生效 */ 
import "virtual:uno.css"
import App from './App.vue' 
createApp(App).mount('#app')

/* TODO: 不清晰 */
:root {
  --primary-color: #316c72;
  --dark-bg: #18181c;
}

html {
  font-size: 4px; // * 方便unocss计算：1单位 = 0.25rem = 1px
}

body {
  font-size: 16px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: var(--dark-bg);
}

注意：不管是UnoCSS还是tailwindcss、windicss，默认 4单位 = 1rem，即 1单位 = 1/4rem，而 rem 是相对于html的 font-size 来计算的，一般来说大部分浏览器的html默认 font-size 为 16px，即 1rem = 16px，也就是说 Unocss 的1单位换算成 px 就是 4px，这种方式没什么问题，但对于习惯了使用px计算的人来说，每次都要心算一遍要写多少单位就略显麻烦了。那么有没有办法让 unocss 的 1单位=1px 了，这样就没有心算成本了，答案是当然有：由公式 1单位 = 0.25 * ${html font-size} = 1px 可知：将 html 的 font-size 应该为 4px 即可

Presets 预设

Attributify preset

TODO：这个很强大

presetAttributify

例如：presetAttributify 可以在标签上直接写 CSS 样式

<div bg-green-50 un-hover="bg-green-200" un-text-xl text-center />

Icon（图标）

Icons preset

安装：

pnpm add -D  @iconify-json/[你想要的收藏]

// uno.config.ts
import { defineConfig,presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({ 
	    /* options */ 
	}),
    // ...other presets
  ],
})

安装 @unocss 时会自带 preset-icons，所以安装 @iconify-json 图标就可以了

所有可用图标 -> Icônes

使用：

<span class="i-logos-vue text-3xl" />
<button class="i-carbon-sun dark:i-carbon-moon" />
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

还可以自定义图标
自定义图标

Rulers （规则）

Rules

export default defineConfig({  
   // ...UnoCSS options
  rules: [
      [
        // 多行文本超出部分省略号 line-n
        /^line-(\d+)$/,
        ([, l]) => {
          if (~~l === 1) {
            return {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
              width: "100%",
            }
          }
          return {
            overflow: "hidden",
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": l,
          }
        },
      ],
    ],
})

Shortcuts（快捷方式）

Shortcuts

// 自定义快捷方式
shortcuts: {
	"bg-main": "bg-green-50",
	// ...
},

<div class="bg-main" />

transformer

Directives（指令）

Directives transformer

安装：

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

使用：

可以使用 @apply 、 @screen 和 theme() 指令

.btn {
	@apply rounded px-2 border-none bg-blue-5 text-white;
}

注意：在 scss 文件中使用 @apply 写法，会出现 vscode 无法识别的问题

.btn {
	--at-apply: rounded px-2 border-none bg-blue-5 text-white;
}

可以使用 --at-apply

Variant Group ( 前缀组)

Variant group transformer

解决繁琐的多次写前缀的情况

安装：

pnpm add -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/> <!-- 简化之后： --> 
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Compile Class（构建合并多个原子类到一个类）

Compile class transformer

// install
pnpm add -D @unocss/transformer-compile-class

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

使用：

<div class=":uno: text-center sm:text-left">   
	<div class=":uno: text-sm font-bold hover:text-red"/> 
</div>

最终编译的结果：

<div class="uno-qlmcrp">   
	<div class="uno-0qw2gr"/> 
</div>

Attributify JSX（支持 JSX）

Attributify JSX transformer

Theme

Theme

// uno.config.ts
import { defineConfig } from "unocss"
export default defineConfig({
// ...UnoCSS options
	theme: {
		colors: {
			success: "#67C23A",
			warning: "#E6A23C",
			danger: "#F56C6C",
		},
	},
})

注意事项：

  • 使用 Ant Design Vue 时， unocss 的重置样式让，a-button 的默认按钮变透明
    • 在 main.ts 中引入 import '@unocss/reset/tailwind-compat.css'
    • 而不是 import '@unocss/reset/tailwind.css'
    • 即可解决UnoCSS: The instant on-demand Atomic CSS engine
      样式文档

来源：UnoCSS给了我一个不用tailwindcss的理由 - 掘金

安装依赖

pnpm i unocss 

# 重置样式 引入自己自定义的样式也可以
pnpm i @unocss/reset

# 如果需要使用 UnoCSS 的图标预设，还需要安装@iconify/json
pnpm i @iconify/json

集成 UnoCSS

1. 修改 vite.config.js,添加 unocss plugin

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import unocss from 'unocss/vite' 
// https://vitejs.dev/config/ 
export default defineConfig({   
	plugins: [vue(), unocss()] 
})

2. 修改 main.ts 和 style.css

import { createApp } from 'vue' 
/** 重置样式 这里引入自定义的重置样式也可 */ 
import '@unocss/reset/tailwind.css' 
/**   
* 项目内的样式，  
* 注意：最好放在重置样式后，uno.css前  
* */ 
import './style.css' 
/** 引入uno.css，不引入不生效 */ 
import "virtual:uno.css"
import App from './App.vue' 
createApp(App).mount('#app')

/* TODO: 不清晰 */
:root {
  --primary-color: #316c72;
  --dark-bg: #18181c;
}

html {
  font-size: 4px; // * 方便unocss计算：1单位 = 0.25rem = 1px
}

body {
  font-size: 16px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: var(--dark-bg);
}

注意：不管是UnoCSS还是tailwindcss、windicss，默认 4单位 = 1rem，即 1单位 = 1/4rem，而 rem 是相对于html的 font-size 来计算的，一般来说大部分浏览器的html默认 font-size 为 16px，即 1rem = 16px，也就是说 Unocss 的1单位换算成 px 就是 4px，这种方式没什么问题，但对于习惯了使用px计算的人来说，每次都要心算一遍要写多少单位就略显麻烦了。那么有没有办法让 unocss 的 1单位=1px 了，这样就没有心算成本了，答案是当然有：由公式 1单位 = 0.25 * ${html font-size} = 1px 可知：将 html 的 font-size 应该为 4px 即可

Presets 预设

Attributify preset

TODO：这个很强大

presetAttributify

例如：presetAttributify 可以在标签上直接写 CSS 样式

<div bg-green-50 un-hover="bg-green-200" un-text-xl text-center />

Icon（图标）

Icons preset

安装：

pnpm add -D  @iconify-json/[你想要的收藏]

// uno.config.ts
import { defineConfig,presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({ 
	    /* options */ 
	}),
    // ...other presets
  ],
})

安装 @unocss 时会自带 preset-icons，所以安装 @iconify-json 图标就可以了

所有可用图标 -> Icônes

使用：

<span class="i-logos-vue text-3xl" />
<button class="i-carbon-sun dark:i-carbon-moon" />
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

还可以自定义图标
自定义图标

Rulers （规则）

Rules

export default defineConfig({  
   // ...UnoCSS options
  rules: [
      [
        // 多行文本超出部分省略号 line-n
        /^line-(\d+)$/,
        ([, l]) => {
          if (~~l === 1) {
            return {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
              width: "100%",
            }
          }
          return {
            overflow: "hidden",
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": l,
          }
        },
      ],
    ],
})

Shortcuts（快捷方式）

Shortcuts

// 自定义快捷方式
shortcuts: {
	"bg-main": "bg-green-50",
	// ...
},

<div class="bg-main" />

transformer

Directives（指令）

Directives transformer

安装：

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

使用：

可以使用 @apply 、 @screen 和 theme() 指令

.btn {
	@apply rounded px-2 border-none bg-blue-5 text-white;
}

注意：在 scss 文件中使用 @apply 写法，会出现 vscode 无法识别的问题

.btn {
	--at-apply: rounded px-2 border-none bg-blue-5 text-white;
}

可以使用 --at-apply

Variant Group ( 前缀组)

Variant group transformer

解决繁琐的多次写前缀的情况

安装：

pnpm add -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/> <!-- 简化之后： --> 
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Compile Class（构建合并多个原子类到一个类）

Compile class transformer

// install
pnpm add -D @unocss/transformer-compile-class

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

使用：

<div class=":uno: text-center sm:text-left">   
	<div class=":uno: text-sm font-bold hover:text-red"/> 
</div>

最终编译的结果：

<div class="uno-qlmcrp">   
	<div class="uno-0qw2gr"/> 
</div>

Attributify JSX（支持 JSX）

Attributify JSX transformer

Theme

Theme

// uno.config.ts
import { defineConfig } from "unocss"
export default defineConfig({
// ...UnoCSS options
	theme: {
		colors: {
			success: "#67C23A",
			warning: "#E6A23C",
			danger: "#F56C6C",
		},
	},
})

注意事项：

  • 使用 Ant Design Vue 时， unocss 的重置样式让，a-button 的默认按钮变透明
    • 在 main.ts 中引入 import '@unocss/reset/tailwind-compat.css'
    • 而不是 import '@unocss/reset/tailwind.css'
    • 即可解决UnoCSS: The instant on-demand Atomic CSS engine
      样式文档

来源：UnoCSS给了我一个不用tailwindcss的理由 - 掘金

安装依赖

pnpm i unocss 

# 重置样式 引入自己自定义的样式也可以
pnpm i @unocss/reset

# 如果需要使用 UnoCSS 的图标预设，还需要安装@iconify/json
pnpm i @iconify/json

集成 UnoCSS

1. 修改 vite.config.js,添加 unocss plugin

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import unocss from 'unocss/vite' 
// https://vitejs.dev/config/ 
export default defineConfig({   
	plugins: [vue(), unocss()] 
})

2. 修改 main.ts 和 style.css

import { createApp } from 'vue' 
/** 重置样式 这里引入自定义的重置样式也可 */ 
import '@unocss/reset/tailwind.css' 
/**   
* 项目内的样式，  
* 注意：最好放在重置样式后，uno.css前  
* */ 
import './style.css' 
/** 引入uno.css，不引入不生效 */ 
import "virtual:uno.css"
import App from './App.vue' 
createApp(App).mount('#app')

/* TODO: 不清晰 */
:root {
  --primary-color: #316c72;
  --dark-bg: #18181c;
}

html {
  font-size: 4px; // * 方便unocss计算：1单位 = 0.25rem = 1px
}

body {
  font-size: 16px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: var(--dark-bg);
}

注意：不管是UnoCSS还是tailwindcss、windicss，默认 4单位 = 1rem，即 1单位 = 1/4rem，而 rem 是相对于html的 font-size 来计算的，一般来说大部分浏览器的html默认 font-size 为 16px，即 1rem = 16px，也就是说 Unocss 的1单位换算成 px 就是 4px，这种方式没什么问题，但对于习惯了使用px计算的人来说，每次都要心算一遍要写多少单位就略显麻烦了。那么有没有办法让 unocss 的 1单位=1px 了，这样就没有心算成本了，答案是当然有：由公式 1单位 = 0.25 * ${html font-size} = 1px 可知：将 html 的 font-size 应该为 4px 即可

Presets 预设

Attributify preset

TODO：这个很强大

presetAttributify

例如：presetAttributify 可以在标签上直接写 CSS 样式

<div bg-green-50 un-hover="bg-green-200" un-text-xl text-center />

Icon（图标）

Icons preset

安装：

pnpm add -D  @iconify-json/[你想要的收藏]

// uno.config.ts
import { defineConfig,presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({ 
	    /* options */ 
	}),
    // ...other presets
  ],
})

安装 @unocss 时会自带 preset-icons，所以安装 @iconify-json 图标就可以了

所有可用图标 -> Icônes

使用：

<span class="i-logos-vue text-3xl" />
<button class="i-carbon-sun dark:i-carbon-moon" />
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

还可以自定义图标
自定义图标

Rulers （规则）

Rules

export default defineConfig({  
   // ...UnoCSS options
  rules: [
      [
        // 多行文本超出部分省略号 line-n
        /^line-(\d+)$/,
        ([, l]) => {
          if (~~l === 1) {
            return {
              overflow: "hidden",
              "text-overflow": "ellipsis",
              "white-space": "nowrap",
              width: "100%",
            }
          }
          return {
            overflow: "hidden",
            display: "-webkit-box",
            "-webkit-box-orient": "vertical",
            "-webkit-line-clamp": l,
          }
        },
      ],
    ],
})

Shortcuts（快捷方式）

Shortcuts

// 自定义快捷方式
shortcuts: {
	"bg-main": "bg-green-50",
	// ...
},

<div class="bg-main" />

transformer

Directives（指令）

Directives transformer

安装：

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

使用：

可以使用 @apply 、 @screen 和 theme() 指令

.btn {
	@apply rounded px-2 border-none bg-blue-5 text-white;
}

注意：在 scss 文件中使用 @apply 写法，会出现 vscode 无法识别的问题

.btn {
	--at-apply: rounded px-2 border-none bg-blue-5 text-white;
}

可以使用 --at-apply

Variant Group ( 前缀组)

Variant group transformer

解决繁琐的多次写前缀的情况

安装：

pnpm add -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/> <!-- 简化之后： --> 
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Compile Class（构建合并多个原子类到一个类）

Compile class transformer

// install
pnpm add -D @unocss/transformer-compile-class

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

使用：

<div class=":uno: text-center sm:text-left">   
	<div class=":uno: text-sm font-bold hover:text-red"/> 
</div>

最终编译的结果：

<div class="uno-qlmcrp">   
	<div class="uno-0qw2gr"/> 
</div>

Attributify JSX（支持 JSX）

Attributify JSX transformer

Theme

Theme

// uno.config.ts
import { defineConfig } from "unocss"
export default defineConfig({
// ...UnoCSS options
	theme: {
		colors: {
			success: "#67C23A",
			warning: "#E6A23C",
			danger: "#F56C6C",
		},
	},
})

注意事项：

  • 使用 Ant Design Vue 时， unocss 的重置样式让，a-button 的默认按钮变透明
    • 在 main.ts 中引入 import '@unocss/reset/tailwind-compat.css'
    • 而不是 import '@unocss/reset/tailwind.css'
    • 即可解决
转载请注明出处或者链接地址：https://www.qianduange.cn//article/1149.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

借用jQuery发送Http请求的实现（内附源码）

2024-02-15 14:02:07

jQuery ---- 插件

2024-02-15 14:02:06

Python入门自学进阶-Web框架——16、Django登录/注册

2024-02-15 14:02:03

html5 简单实用好看的滑动开关Jquery css带效果图（无bug）

2024-02-15 14:02:00

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

Jquery锚点导航定位、css设置头部左侧固定，右侧内容滚动

2024-02-15 14:02:58

web前端JQuery当鼠标浏览到对应的地方盒子颜色相对改变

2024-02-15 14:02:58

原生JavaScript技术，jQuery实现下拉菜单

2024-02-15 14:02:52

在vue3项目中如何使用echarts

2024-02-15 14:02:45

BI可视化报表工具-SpringReport

2024-02-15 14:02:34

大家推荐的文章
1

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
2

移动端css布局大全

2024-02-06 15:02:421000
3

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
4

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
5

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
6

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
7

尚硅谷css3笔记

2024-02-13 10:02:44998
8

如何利用浏览器测试跨域

2024-02-11 10:02:28998
9

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
10

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！