unocss初级使用指南

具体的安装不赘述了，记录一下配置和使用方法。 如果你用过tailwindcss，那么几乎可以无成本迁移使用方法。

参考tailwindcss官网文档，找需要的class类名，直接写入class即可。对，unocss的使用需要参考参考tailwindcss官网文档

使用心得是：极大的简化了ui样式的编写，按需加载，css资源大小大幅度降低。

另外unocss提供了一些其他的插件，可以统一代码规范，优化代码书写。我主要使用了以下几个：

• presetUno 默认的预设，添加上之后就可以无缝使用tailwind.css

• presetAttributify，用于简化类名前缀 ，将 bg/text/font/p/border等分门别类，提升了阅读性和可维护性

• presetIcons，方便使用icones.js.org/ 中的图标 <i class="i-fluent-arrow-exit-20-filled"></i>

• presetRemToPx ，做pc端项目还是习惯用px单位，使用presetRemToPx设置baseFontSize：4,就可以直接写px数值了 class="w-500 h-500" // width:500px；height:500px

• prettier-plugin-tailwindcss 这是一个prettitter插件 ，可以排序tailwind.css的类名，也可以规范团队内的代码风格

配置代码：

 "plugins": ["prettier-plugin-tailwindcss"]

其他配置：

• 还有一个比较好用的是配置主题色，将网站配色写到配置文件中，保持色彩统一和可维护性，例如：text-primary。
• 还有个实用的配置shortcuts：类名简写，将常用或重复的多个类名，配置为简写，可用于提取公共样式。

import {
  defineConfig,
  presetUno,
  presetAttributify,
  presetIcons,
} from 'unocss';
import presetRemToPx from '@unocss/preset-rem-to-px';
import transformerVariantGroup from '@unocss/transformer-variant-group';

export default defineConfig({
  presets: [
    presetUno(),
    presetRemToPx({ baseFontSize: 4 }),
    presetAttributify(),
    presetIcons({
      scale: 1,
      warn: true,
      extraProperties: {
        display: 'inline-block',
        verticalAlign: 'middle',
      },
    }),
  ],
  transformers: [transformerVariantGroup()],
  shortcuts: [
    {
      'flex-center': 'flex flex-items-center flex-justify-center',
      'card-block': 'bg-#fff p-20 shadow-sm m-b-20',
      'c-title': 'font-size-14 font-bold ',
      'btn-circle':
        'rounded-full bg-#F2FAFF transition-all duration-200 hover:bg-#cde3f1 w-32 h-32 flex-center cursor-pointer font-size-16 color-primary',
    },
  ],
  preflights: [
    {
      getCSS: () => `
        :root {
          --color-primary:#215294;
          --color-success: #008933;
          --color-warning: #ffa703;
          --color-danger: #ff0000;
          --color-info: #909399;
        }
      `,
    },
  ],
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      success: 'var(--color-success)',
      warning: 'var(--color-warning)',
      danger: 'var(--color-danger)',
      info: 'var(--color-info)',
    },
  },
});