官网: Home | Windi CSS
Vue的集成并使用 Windi CSS 官网: Home | Windi CSS
找到安装, 选择构建的工具, 比如使用 vite 点击进去:
第一步:安装插件
安装: npm i -D vite-plugin-windicss windicss
第二步:在 vite.config.js中配置添加插件
import WindiCSS from 'vite-plugin-windicss'
export default {
plugins: [
WindiCSS(),
],
}
第三步: 在main,js引入样式
import 'virtual:windi.css'
第四步使用 找到工具类:
第一种:可在页面中直接使用:
// class=" " 空一格写样式会提示哦!
<div class="text-2xl font-bold text-light-50 m-0 p-0">管理系统</div>
<div class=" bg-gray-100 w-full h-full m-0 p-0">login页面</div>
第二种:在style中使用: 定义一个类名需 @apply 注意:lang="postcss"
<style lang="postcss">
.login {
@apply bg-indigo-500 min-h-screen;
}
.left {
@apply flex justify-center items-center;
}
.leftdis {
@apply text-light-50;
}
</style>
具体可去官网找样式: