预后消极
- 星级评级
- 2.66
- 评级
- PG-13
- 年份
- 2021
- 类型
- 喜剧
- 片长
- 1 小时 46 分钟
- 演员
- 西蒙·佩吉、扎克·加利菲安纳基斯
一个实用程序优先的 CSS 框架,包含 flex
、pt-4
、text-center
和 rotate-90
等类,这些类可以组合起来在标记中直接构建任何设计。
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<blockquote>
<p class="text-lg font-medium">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-sky-500 dark:text-sky-400">
Sarah Dayan
</div>
<div class="text-slate-700 dark:text-slate-500">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>
Sarah Dayan
Algolia 的员工工程师
用于你的设计系统的 API。
实用程序类可帮助你在系统约束内工作,而不是在样式表中填充任意值。它们使你可以轻松地保持颜色选择、间距、字体、阴影以及构成精心设计的系统的所有其他元素的一致性。
了解更多,实用程序优先的基本原理<div class="space-y-4"> <div class="w-96 bg-white shadow rounded"> w-96 </div> <div class="w-80 bg-white shadow rounded"> w-80 </div> <div class="w-72 bg-white shadow rounded"> w-72 </div> <div class="w-64 bg-white shadow rounded"> w-64 </div> <div class="w-60 bg-white shadow rounded"> w-60 </div> <div class="w-56 bg-white shadow rounded"> w-56 </div> <div class="w-52 bg-white shadow rounded"> w-52 </div> <div class="w-48 bg-white shadow rounded"> w-48 </div></div>
构建任何你想要的东西,认真地。
因为 Tailwind 非常低级,所以它绝不会鼓励你两次设计相同的网站。即使使用相同的调色板和尺寸比例,也很容易在下一个项目中构建具有完全不同外观的相同组件。
开始,安装<div class="flex font-sans">
<div class="flex-none w-48 relative">
<img src="/classic-utility-jacket.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
</div>
<form class="flex-auto p-6">
<div class="flex flex-wrap">
<h1 class="flex-auto text-lg font-semibold text-slate-900">
Utility Jacket
</h1>
<div class="text-lg font-semibold text-slate-500">
$110.00
</div>
<div class="w-full flex-none text-sm font-medium text-slate-700 mt-2">
In stock
</div>
</div>
<div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
<div class="space-x-2 flex text-sm">
<label>
<input class="sr-only peer" name="size" type="radio" value="xs" checked />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
XS
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="s" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
S
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="m" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
M
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="l" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
L
</div>
</label>
<label>
<input class="sr-only peer" name="size" type="radio" value="xl" />
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
XL
</div>
</label>
</div>
</div>
<div class="flex space-x-4 mb-6 text-sm font-medium">
<div class="flex-auto flex space-x-4">
<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
Buy now
</button>
<button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900" type="button">
Add to bag
</button>
</div>
<button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200" type="button" aria-label="Like">
<svg width="20" height="20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
</svg>
</button>
</div>
<p class="text-sm text-slate-700">
Free shipping on all continental US orders.
</p>
</form>
</div>
它很小——永远不再发布未使用的 CSS。
在构建生产环境时,Tailwind 会自动删除所有未使用的 CSS,这意味着你的最终 CSS 捆绑包尽可能小。事实上,大多数 Tailwind 项目发送给客户端的 CSS 少于 10kB。
了解更多,针对生产环境进行优化1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Document</title>7 <link rel="stylesheet" href="/build.css">8 </head>9 <body>10 <button class=""></button>11 </body>12</html>13
npx tailwindcss -o--output build.css --content index.html -w --watch
响应一切。
在 CSS 中使用一堆复杂的媒体查询很糟糕,因此 Tailwind 让你可以在 HTML 中直接构建响应式设计。
在任何实用程序类前放置一个屏幕尺寸,并观察它在特定断点处神奇地应用。
<main class="py-6 px-4 sm:p-6 md:py-10 md:px-8"> <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2"> <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1"> <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1> <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p> </div> <div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0"> <img src="/beach-house.jpg" alt="" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy"> <img src="/beach-house-interior-1.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> <img src="/beach-house-interior-2.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> </div> <dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2"> <dt class="sr-only">Reviews</dt> <dd class="text-indigo-600 flex items-center dark:text-indigo-400"> <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500"> <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span> </dd> <dt class="sr-only">Location</dt> <dd class="flex items-center"> <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300"> <circle cx="1" cy="1" r="1" /> </svg> <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true"> <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" /> <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" /> </svg> Collingwood, Ontario </dd> </dl> <div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4"> <button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button> </div> <p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400"> This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat. </p> </div></main>
悬停和焦点状态?我们有。
想在悬停时设置样式?在您想添加的类开头粘贴 hover:
。适用于 focus
、active
、disabled
、focus-within
、focus-visible
,甚至是我们自己发明的花式状态,如 group-hover
。
<section> <header class="bg-white space-y-4 p-4 sm:px-8 sm:py-6 lg:p-4 xl:px-8 xl:py-6"> <div class="flex items-center justify-between"> <h2 class="font-semibold text-slate-900">Projects</h2> <a href="/new" class="hover:bg-blue-400 group flex items-center rounded-md bg-blue-500 text-white text-sm font-medium pl-2 pr-3 py-2 shadow-sm"> <svg width="20" height="20" fill="currentColor" class="mr-2" aria-hidden="true"> <path d="M10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 1-1Z" /> </svg> New </a> </div> <form class="group relative"> <svg width="20" height="20" fill="currentColor" class="absolute left-3 top-1/2 -mt-2.5 text-slate-400 pointer-events-none group-focus-within:text-blue-500" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" /> </svg> <input class="focus:ring-2 focus:ring-blue-500 focus:outline-none appearance-none w-full text-sm leading-6 text-slate-900 placeholder-slate-400 rounded-md py-2 pl-10 ring-1 ring-slate-200 shadow-sm" type="text" aria-label="Filter projects" placeholder="Filter projects..."> </form> </header> <ul class="bg-slate-50 p-4 sm:px-8 sm:pt-6 sm:pb-8 lg:p-4 xl:px-8 xl:pt-6 xl:pb-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4 text-sm leading-6"> <li x-for="project in projects"> <a :href="project.url" class="hover:bg-blue-500 hover:ring-blue-500 hover:shadow-md group rounded-md p-3 bg-white ring-1 ring-slate-200 shadow-sm"> <dl class="grid sm:block lg:grid xl:block grid-cols-2 grid-rows-2 items-center"> <div> <dt class="sr-only">Title</dt> <dd class="group-hover:text-white font-semibold text-slate-900"> {project.title} </dd> </div> <div> <dt class="sr-only">Category</dt> <dd class="group-hover:text-blue-200">{project.category}</dd> </div> <div class="col-start-2 row-start-1 row-end-3 sm:mt-4 lg:mt-0 xl:mt-4"> <dt class="sr-only">Users</dt> <dd x-for="user in project.users" class="flex justify-end sm:justify-start lg:justify-end xl:justify-start -space-x-1.5"> <img :src="user.avatar" :alt="user.name" class="w-6 h-6 rounded-full bg-slate-100 ring-2 ring-white" loading="lazy"> </dd> </div> </dl> </a> </li> <li class="flex"> <a href="/new" class="hover:border-blue-500 hover:border-solid hover:bg-white hover:text-blue-500 group w-full flex flex-col items-center justify-center rounded-md border-2 border-dashed border-slate-300 text-sm leading-6 text-slate-900 font-medium py-3"> <svg class="group-hover:text-blue-500 mb-1 text-slate-400" width="20" height="20" fill="currentColor" aria-hidden="true"> <path d="M10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 1-1Z" /> </svg> New project </a> </li> </ul></section>
担心重复?别担心。
如果您一遍又一遍地重复相同的实用程序,您所要做的就是将它们提取到组件或模板部分中,然后就这样 — 您就拥有了单一的事实来源,以便您可以在一个地方进行更改。
了解更多信息,重复使用样式import Nav from ''
import NavItem from ''
import List from ''
import ListItem from ''
export default function Movies({ movies }) {
return (
<div className="divide-y divide-slate-100">
<Nav>
<NavItem href="/new" isActive>New Releases</NavItem>
<NavItem href="/top">Top Rated</NavItem>
<NavItem href="/picks">Vincent’s Picks</NavItem>
</Nav>
<List>
{movies.map((movie) => (
<ListItem key={movie.id} movie={movie} />
))}
</List>
</div>
)
}
.btn {
@apply text-base font-medium rounded-lg p-3;
}
.btn--primary {
@apply bg-sky-500 text-white;
}
.btn--secondary {
@apply bg-slate-100 text-slate-900;
}
</dd> </div> </dl> <footer class="grid grid-cols-2 gap-x-6"> <button class="btn btn--secondary">Decline</button> <button class="btn btn--primary">Accept</button> </footer></article>
现在具有深色模式。
不想成为那些在人们凌晨 2 点用手机打开时会使人眼花缭乱的网站之一?在你的配置文件中启用深色模式,然后在任何颜色实用程序前添加 dark:
,以便在深色模式处于活动状态时应用它。适用于背景颜色、文本颜色、边框颜色,甚至渐变。
分集 128
全栈电台
<div class="bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8">
<div class="flex items-center space-x-4">
<img src="/full-stack-radio.png" alt="" width="88" height="88" class="flex-none rounded-lg bg-slate-100" loading="lazy" />
<div class="min-w-0 flex-auto space-y-1 font-semibold">
<p class="text-cyan-500 dark:text-cyan-400 text-sm leading-6">
<abbr title="Episode">Ep.</abbr> 128
</p>
<h2 class="text-slate-500 dark:text-slate-400 text-sm leading-6 truncate">
Scaling CSS at Heroku with Utility Classes
</h2>
<p class="text-slate-900 dark:text-slate-50 text-lg">
Full Stack Radio
</p>
</div>
</div>
<div class="space-y-2">
<div class="relative">
<div class="bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
<div class="bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2" role="progressbar" aria-label="music progress" aria-valuenow="1456" aria-valuemin="0" aria-valuemax="4550"></div>
</div>
<div class="ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow">
<div class="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5"></div>
</div>
</div>
<div class="flex justify-between text-sm leading-6 font-medium tabular-nums">
<div class="text-cyan-500 dark:text-slate-100">24:16</div>
<div class="text-slate-500 dark:text-slate-400">75:50</div>
</div>
</div>
</div>
<div class="bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center">
<div class="flex-auto flex items-center justify-evenly">
<button type="button" aria-label="Add to favorites">
<svg width="24" height="24">
<path d="M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Previous">
<svg width="24" height="24" fill="none">
<path d="m10 12 8-6v12l-8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" aria-label="Rewind 10 seconds">
<svg width="24" height="24" fill="none">
<path d="M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5 5v3.111c0 .491.398.889.889.889H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<button type="button" class="bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center" aria-label="Pause">
<svg width="30" height="32" fill="currentColor">
<rect x="6" y="4" width="4" height="24" rx="2" />
<rect x="20" y="4" width="4" height="24" rx="2" />
</svg>
</button>
<div class="flex-auto flex items-center justify-evenly">
<button type="button" aria-label="Skip 10 seconds">
<svg width="24" height="24" fill="none">
<path d="M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19 5v3.111c0 .491-.398.889-.889.889H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Next">
<svg width="24" height="24" fill="none">
<path d="M14 12 6 6v12l8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button type="button" class="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500">
1x
</button>
</div>
</div>
扩展它,调整它,更改它。
Tailwind 包含一套开箱即用的精心制作的默认设置,但从调色板到间距比例、再到盒子阴影和鼠标光标,所有内容都可以自定义。
使用 tailwind.config.js 文件来构建你自己的设计系统,然后让 Tailwind 将其转换为你自己的自定义 CSS 框架。
module.exports = {
theme: {
fontFamily: {
display: ['Inter', 'system-ui', 'sans-serif'],
body: ['Inter', 'system-ui', 'sans-serif'],
},
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
secondary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
},
},
},
}
前沿是我们舒适的区域。
Tailwind 毫不掩饰地现代,并充分利用所有最新和最棒的 CSS 功能,让开发人员体验尽可能愉快。
我们拥有由 CSS 变量支持的一流 CSS 网格支持、可组合的变换和渐变、对 :focus-visible
等现代状态选择器的支持,以及更多内容。
<div class="grid grid-flow-col grid-rows-2 grid-cols-3 gap-8">
<div>
<img src="/mountains-1.jpg" alt="" loading="lazy">
</div>
<div class="col-start-3">
<img src="/mountains-2.jpg" alt="" loading="lazy">
</div>
<div>
<img src="/mountains-3.jpg" alt="" loading="lazy">
</div>
<div>
<img src="/mountains-4.jpg" alt="" loading="lazy">
</div>
<div class="row-start-1 col-start-2 col-span-2">
<img src="/mountains-5.jpg" alt="" loading="lazy">
</div>
</div>
世界一流的 IDE 集成。
担心记住所有这些类名?VS Code 的 Tailwind CSS IntelliSense 扩展程序可以满足您的需求。
在您的编辑器中获得智能自动完成建议、linting、类定义等,无需任何配置。
<div class="w-full flex items-center justify-between block p-6 space-x-6">
<div class="flex-1 truncate">
<div class="flex items-center space-x-3">
<h3 class="text-slate-900 text-sm font-medium truncate">Jane Cooper</h3>
<span class="text-teal-600">Admin</span>
</div>
<p class="mt-1 text-slate-500 text-sm truncate">Regional Paradigm Technician</p>
</div>
<img class="w-10 h-10 bg-slate-300 rounded-full shrink-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="" loading="lazy">
</div>
<div class="border-t border-slate-200">
<div class="-mt-px flex">
<div class="w-0 flex-1 flex border-r border-slate-200">
<a href="#" class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-slate-700 font-medium border border-transparent rounded-bl-lg hover:text-slate-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150">
<svg class="w-5 h-5 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
<span class="ml-3">Email</span>
</a>
</div>
</div>
</div>
'flex' 应用与 'block' 相同的 CSS 属性。
cssConflict [1, 20]
'block' 应用与 'flex' 相同的 CSS 属性。
cssConflict [1, 54]
使用 Tailwind UI 进一步加快速度。
Tailwind UI 是由我们(Tailwind CSS 的创建者)设计和开发的一系列美观、完全响应的 UI 组件。它有数百个可供选择的现成示例,并且保证帮助您找到您想要构建内容的完美起点。
了解更多信息