Prognosis Negative
- Star rating
- 2.66
- Rating
- PG-13
- Year
- 2021
- Genre
- Comedy
- Runtime
- 1h 46m
- Cast
- Simon Pegg, Zach Galifianakis
<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
Staff Engineer, Algolia
用于你的设计系统的 API。
工具类帮助你在系统的约束下工作,而不是在样式表中乱放任意值。 它们使与颜色选择、间距、排版、阴影以及构成精心设计的设计系统的所有其他内容保持一致变得容易。
了解更多, utility-first fundamentals<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>
它很小 — 永远不要再交付未使用的 CSS。
Tailwind 在为生产环境构建时会自动删除所有未使用的 CSS,这意味着你的最终 CSS 包可能是最小的。 事实上,大多数 Tailwind 项目向客户交付的 CSS 不到 10kB。
了解更多, optimizing for production1<!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
悬停和聚焦状态? 我们解决它们。
想在悬停时设置样式吗? 将 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>
担心冗余? 不需要。
如果你一遍又一遍地重复相同的工具,你所要做的就是将它们提取到一个组件或模板中,部分和全部 — 你拥有单一数据源,因此你可以在一个地方进行更改。
了解更多, reusing stylesimport 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:
放在任何颜色工具前面,以便在夜间模式处于激活状态时应用它。 适用于背景颜色、文本颜色、边框颜色,甚至渐变。
Ep. 128
Full Stack Radio
<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 扩展已涵盖。
获得智能自动补齐建议、代码检查、类定义等,所有这些都在你的编辑器中,无需配置。
<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' applies the same CSS property as 'block'.
cssConflict [1, 20]
'block' applies the same CSS property as 'flex'.
cssConflict [1, 54]