父级 div 直接使用 display: flex; 即可 html单行文本： 水平居中: text-align:center 垂直居中： line-height=容器高度 多行文本： 文本设置<span>标签 span{ display: table-cell; vert
再写一个 index.css,里面故意多写一个没用的 useless 类: <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;">.hello { text-align: center; } .useless { margin: 8px; }</pre> 然后根据 Github 里的用法,写一段构建脚本: <pre data-...
<bodyclass="flex justify-center items-center h-screen bg-teal-400"><divclass="grid grid-cols-2 grid-rows-2 justify-items-center place-items-center place-content-center w-full h-full"><divclass="bg-gradient-to-t from-rose-500 to-blue-600 rounded-2xl w-11/12 h-5/6 text-7xl p-2...
<scriptsetup> </script> <template> <divclass="flexgap-8"> <divclass="flex-1bg-yellow-300">01</div> <divclass="contents"> <divclass="flex-1bg-yellow-300">02</div> <divclass="flex-1bg-yellow-300">03</div> </div> <divclass="flex-1bg-yellow-300">04</div> </div> </temp...
<div class="hello">Hello</div> </body> </html> 再写一个index.css,里面故意多写一个没用的useless类: .hello { text-align: center; } .useless { margin: 8px; } 然后根据 Github 里的用法,写一段构建脚本: const PurgeCSS = require("purgecss").default; ...
<ahref="#"class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"><divclass="flex items-center space-x-3"><svgclass="h-6 w-6 stroke-sky-500 group-hover:stroke-white"fill="none"viewBox...
Tailwind further enhances Flexbox with additional utilities for flex direction, alignment, wrapping, and more. These include classes like.flex-row,.items-center, and.flex-wrap. Display Grid in Tailwind CSS CSS Grid Layout, simply known as Grid, is a powerful layout system in CSS. It allows ...
center"> grid-Block 2 </div> <div class="grid bg-lime-200 p-2 mb-2 rounded text-center"> grid-Block 3 </div> <h2 class="text-3xl mb-2"> Tailwind CSS Display Inline-Grid Example </h2> <div class="inline-grid bg-orange-200 p-2 mb-2 rounded text-center"> grid-Block 1 <...
We'll be adding the class bg-center: return ( <div className="flex bg-white w-full mb-5"> <div style={{backgroundImage: `url(${image})`}} className="w-5/12 bg-contain bg-no-repeat bg-center"></div> <div className="w-7/12 p-5"> <h1 className="md:text-2xl">{title....
text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"data-modal-hide="defaultModal"><svgaria-hidden="true"class="w-5 h-5"fill="currentColor"viewBox="0 0 20 20"xmlns="http://www.w3.org/2000/svg"><pathfill-rule="...