【unocss】自用

unocss中文官网1

不知道简写的可以在这里查

第一步

npm install -D unocss

第二步

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'export default defineConfig({plugins: [UnoCSS()]
})

// main.ts
import 'virtual:uno.css'

第三步

在原子css的默认预设中，默认单位为rem，且1rem = 4px
所以如果想要默认单位为 px，需要如下设置

npm i @unocss/preset-rem-to-px -D

// unocss.config.js
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'export default defineConfig({presets: [presetUno(),presetAttributify(),presetRemToPx({baseFontSize: 4,}),],
})

注释：
presetAttributify 的作用是支持属性的写法。
例如，可以用下面的方式替代全部写在class=" "里的方式

<buttonflexjustify-centeritems-centertext-14cursor-pointerselect-nonepx-15py-8border-rd-4border-nonebox-bordercolor="#9b1fb9"bg="#409eff"m-autohover="bg-#67c23a"transition="duration-.3s">button
</button>

第四步

可以自己加一些预设，例如下面的 rules

// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";export default defineConfig({// ...UnoCSS optionspresets: [presetUno(),presetAttributify(),presetRemToPx({baseFontSize: 4,}),],rules: [// [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],[/^lines-(\d+)$/, ([_, lines]) => ({'overflow': 'hidden','text-overflow': 'ellipsis', // 文本溢出时显示省略号'display': '-webkit-box',"-webkit-box-orient": 'vertical', '-webkit-line-clamp': lines, // 使用捕获组中的数字来设置行数})],['p-c', // 使用时只需要写 p-c 即可应用该组样式{position: 'absolute',top: '50%',left: '50%',transform: `translate(-50%, -50%)`}],],});