您现在的位置是：首页 > 网站制作 > vue3vue3
安装tailwindcss与unocss
蒙xs2023-06-28【vue3】人已围观
简介tailwindcss是一个css快速构建工具
简单来说，unocss是一个css引擎，用过Tailwind CSS和windi CSS的不会陌生，不一样的是，unocss本身不提供任何类名css，它只是解决Tailwind以及windi的编译和打包的某些问题，也就是它可以配合Tailwind或者windi使用，以提供更快的编译打包速度。
1.安装tailwindcs
2.配置模板文件的路径 tailwind.config.js
3.安装unocss
4.在vite.config.ts（或vite.config.js）中，写入以下配置
5.而后，在man.ts（main.js）中引入css
以上，就完成了unocss的安装可以在组件使用text-center w-100px等类名
建议安装vscode代码提示配置:Unocss
npm install -D tailwindcss
2.配置模板文件的路径 tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}
3.安装unocss
npm i -D unocss
或者
yarn add unocss --dev4.在vite.config.ts（或vite.config.js）中，写入以下配置
import Unocss from 'unocss/vite'
export default {
plugins: [
Unocss(),
],
}5.而后，在man.ts（main.js）中引入css
import 'uno.css'以上，就完成了unocss的安装可以在组件使用text-center w-100px等类名
建议安装vscode代码提示配置:Unocss
在vscode应用市场中搜索Unocss，或者点击https://marketplace.visualstudio.com/items?itemName=antfu.unocss进行安装此拓展。
Tags：
很赞哦！ ()
