<div class="relative"> <img src="image.jpg" alt="图片" class="w-full h-auto"> <div class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity"> <div class="flex items-center justify-center h-full"> <p class="text-white ...
<div class="flex justify-center items-center h-screen"> <div class="bg-gray-800 text-white p-6 rounded-lg"> Centered Content </div> </div> 排版和字体 可以使用 Tailwind 提供的排版类来设置文本样式,例如字体大小、行高和字体粗细: <h1 class="text-3xl font-bold underline"> Tailwind Typograph...
让我们在 Next 项目中构建一个卡片组件。 constIndex=()=>(<divclassName="relative w-96 m-3 cursor-pointer border-2 shadow-lg rounded-xl items-center">{/* Image */}<divclassName="flex h-28 bg-blue-700 rounded-xl items-center justify-center"><h1className="absolute mx-auto text-center ri...
使用items-center和justify-center，如下所示：
To center the content within the sidebar, you need to use justify-center on the parent container of the sidebar. Here is how you can modify your code: <div class="flex flex-wrap min-h-screen"> <div class="w-full lg:w-1/3 flex justify-center bg-red-500 hidden lg...
遂记录下几个常用的方法，都比较简单。 水平居中直接加上<center>标签即可，或者设置margin:auto;当然...
合唱团专场音乐会"><imgclass="absolute inset-0 w-full h-full object-cover object-center ...
建议使用 sass less 这种东西自己编写常用基础类和基础属性作为basecss文件 包括通用边距 圆角 颜色 等等 ...
space-y-8"><div><imgclass="mx-auto h-12 w-auto"src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"alt="Workflow"/><h2class="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2><pclass="mt-2 text-center text-sm text-gray-600...
<div class="tracking-normal">Tracking Normal</div> <div class="tracking-wide">Tracking Wide</div> 文本对齐:text-[direct] <div class="text-left">Text Left</div> <div class="text-center">Text Center</div> <div class="text-right">Text Right</div> 下划线重:decoration-[weight] <div ...