例如常见的写一个 flex 布局给某一个 div 。 <div class="flex flex-row flex-justify-center flex-items-center">xxx</div> 会被翻译成 .flex { display: flex; } .flex-row { flex-direction: row; } .flex-justify-center { justify-content: center; } .flex-items-center { align-items: cente...
3、justify-content:定义 flex 项目在主轴上的对齐方式,可选值为 flex-start、flex-end、center、space-between、space-around、space-evenly。 4、align-items:定义 flex 项目在交叉轴上的对齐方式,可选值为 flex-start、flex-end、center、baseline。©...
["m-auto", {margin:"0 auto"}], [/^flex-(\w+)-(\w+)$/,([, justify, alignItems]) =>({display:"flex","justify-content": justify,"align-items": alignItems, }), ], ] }) .m-auto{margin:0auto;}.flex-center-center{display:flex;justify-content:center;align-items:center;} sho...
例如常见的写一个 flex 布局给某一个 div👇。 <div class="flex flex-row flex-justify-center flex-items-center">xxx</div> 会被翻译成👇 .flex{display: flex; }.flex-row{flex-direction: row; }.flex-justify-center{justify-content: center; }.flex-items-center{align-items: center; } 上面...
(),presetIcons()],// 使用自带的内部预设, 按需引用rules:[[/^z-(\d+)$/,([,d])=>({'z-index':d})],['p-c',{position:'absolute',top:'50%',left:'50%',transform:`translate(-50%, -50%)`}],['f-c',{display:'flex','justify-content':'center','align-items':'center'}]]...
/**app.wxss**/@import"./unocss.wxss"; .container{display:flex;flex-direction:column;justify-content:space-between;align-items:center;box-sizing:border-box;padding:200rpx0;height:100%; } use vscodeunocssplugin vscodesettings.json // 文件类型"files.associations": {"*.wxml":"html", }, ...
13<palign="center"> 14<ahref="https://www.npmjs.com/package/unocss"><imgsrc="https://img.shields.io/npm/v/unocss?color=c95f8b&label="alt="NPM version"></a></p> 15 16<blockquotealign="center"> 17<p>💡 I highly recommend reading this blog post -<br><ahref="https://ant...
<div text-lg text-pink-400 font-bold border-1 border-gray border-dashed rounded flex flex-warp items-center justify-evenly> 我的样式很复杂的 </div> <button text-green-500 rounded hover:text-lg shadow-md>查询</button> <button text-green-500 rounded hover:text-lg shadow-md>提交</button...
align-items:center; border-radius:8px; padding:12px14px12px16px; background-color:var(--vp-c-bg-soft); background-color:var(--vp-c-bg); max-width:200px; } .text{ Expand Down 5 changes: 2 additions & 3 deletions5docs/vite.config.ts ...
之前我写过一篇文章给我一个你不用tailwindcss的理由!,极力推荐使用 tailwindcss 来提升开发效率和体验,尤其是样式代码的体验会有质的提升。当然样式代码...