前言： 不了解unocss的朋友盏道，建議先閱讀此文章https://antfu.me/posts/reimagine-atomic-css-zh
簡單來說锣咒，unocss是一個css引擎几迄，用過Tailwind CSS和windi CSS的不會陌生红符，不一樣的是青柄，unocss本身不提供任何類名css，它只是解決Tailwind以及windi的編譯和打包的某些問題违孝，也就是它可以配合Tailwind或者windi使用刹前，以提供更快的編譯打包速度。
安裝
unocss的github地址為https://github.com/unocss/unocss雌桑，能力強的朋友可根據(jù)github文檔進行安裝喇喉。
npm i -D unocss
或者
yarn add unocss --dev
在vite.config.ts（或vite.config.js）中，寫入以下配置
import Unocss from 'unocss/vite'
export default {
plugins: [
Unocss(),
],
}
而后校坑，在man.ts（main.js）中引入css
import 'uno.css'
以上拣技，就完成了unocss的安裝千诬，前面介紹過，unocss只是一個引擎膏斤。它本身并不提供css快捷類支持徐绑，所以以上安裝只是完成了引擎的配置。現(xiàn)在莫辨，我們需要安裝下一個插件傲茄，以提供快捷類支持。(更正：unocss現(xiàn)在不需要手動配置preset-uno沮榜，只需安裝unocss即可盘榨，unocss現(xiàn)在默認內置preset-uno，以下安裝步驟可跳過蟆融，直接看代碼提示配置即可)
npm i -D @unocss/preset-uno
或者
yarn add @unocss/preset-uno --save
而后草巡，在vite.config.ts(vite.config.js)中配置
import Unocss from 'unocss/vite'
import presetUno from '@unocss/preset-uno'
export default {
plugins: [
Unocss({
presets: [
presetUno()
]
}),
],
}
注意 這里的配置與上面的配置是合并關系，并非新建型酥。
unocss/preset-uno是一個插件支持包山憨，導入它后，你可以在代碼中使用Tailwind CSS弥喉、Windi CSS郁竟、Bootstrap、Tachyons等插件的快捷類档桃。它們已經(jīng)被完全兼容枪孩。也就是說，你可以使用上面例子中任意一種快捷類風格進行編程藻肄。 unocss將配合preset-uno自動為你匹配蔑舞。更多介紹請參考https://github.com/unocss/unocss 標題為《預裝》部分。
vscode代碼提示配置
在vscode應用市場中搜索Unocss嘹屯，或者點擊https://marketplace.visualstudio.com/items?itemName=antfu.unocss進行安裝此拓展攻询。
安裝完畢后，可能需要重新啟動vscode州弟，之后在html中就會為你提供快捷選項钧栖。
注意：preset-uno雖已包含Tailwind CSS、Windi CSS婆翔、Bootstrap拯杠、Tachyons等風格類名，但類名風格建議以tailwindcss為準啃奴，因為windicss也是Tailwind的編譯速度解決方案潭陪，它也完全遵循Tailwind規(guī)則，所以我們完全可以以Tailwind為準進行使用。Taliwind文檔：https://tailwindcss.com/docs/aspect-ratio
代碼提示效果：
編譯效果
更多使用方法內容請閱讀文檔依溯。
