一个实用至上的 CSS 框架,包含诸如 flex, pt-4, text-center 和 rotate-90 等类,可以直接在你的标记中组合来构建任何设计。
<div class="flex flex-col items-center rounded-2xl"> <div> <img class="size-48 shadow-xl" alt="" src="/img/cover.png" /> </div> <div class="flex"> <span>Class Warfare</span> <span>The Anti-Patterns</span> <span class="flex"> <span>No. 4</span> <span>·</span> <span>2025</span> </span> </div></div>
为什么选择 Tailwind CSS?
Tailwind 不遗余力地追求现代化,并利用所有最新和最棒的 CSS 功能,使开发者体验尽可能愉快。
好吧,它并不是真正的尖端技术,但只需在任何实用程序前面添加屏幕尺寸,即可将其应用于特定断点。
这个阳光充足且宽敞的房间适合那些轻装旅行,并寻找一个舒适温馨的地方,让他们可以好好睡上一晚的人... 显示更多
显示更多如今的网站如果没有一些背景模糊效果,那还算什么网站?不断堆叠滤镜,直到你的设计师求你停下来为止。
如果你不喜欢灼伤你的视网膜,只需在任何颜色前面添加 dark:
,即可在暗黑模式下应用它。
自定义你的主题就像创建几个 CSS 变量一样简单。
@theme { --font-sans: "Inter", sans-serif; --font-mono: "IBM Plex Mono", monospace; --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --color-mint-100: oklch(0.97 0.15 145); --color-mint-200: oklch(0.92 0.18 145); --color-mint-300: oklch(0.85 0.22 145); --color-mint-400: oklch(0.78 0.25 145); --color-mint-500: oklch(0.7 0.28 145); --color-mint-600: oklch(0.63 0.3 145); --color-mint-700: oklch(0.56 0.32 145); --color-mint-800: oklch(0.48 0.35 145); --color-mint-900: oklch(0.4 0.37 145); --color-mint-950: oklch(0.3 0.4 145);}
现在,调色板使用了更鲜艳的广色域颜色,而你无需理解任何含义。
直接在 HTML 中使用网格实用程序可以更容易地推断复杂的布局。
过渡效果如你所愿 —— 在元素上添加一些实用程序,你就可以开始工作了。
transition duration-750linear
transition duration-750ease-out
transition duration-750ease-in-out
transition duration-750ease-in
Tailwind 使用 CSS 层,因此你无需担心特异性问题。
@layer theme, base, components, utilities;@layer theme { :root { /* Your theme variables */ }}@layer base { /* Preflight styles */}@layer components { /* Your custom components */}@layer utilities { /* Your utility classes */}
支持多种语言的文本方向不再是噩梦。
将一个元素标记为容器,以便让子元素适应其大小的变化。
<div class="@container"> <div class="grid grid-cols-1 @sm:grid-cols-2"> <img src="/img/photo-1.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> <img src="/img/photo-2.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> <img src="/img/photo-3.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> <img src="/img/photo-4.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> </div></div>
无需记住复杂的渐变语法 —— 只需几个实用程序类即可创建如丝般顺滑的渐变。
我们的下一代渲染引擎提供无与伦比的速度和效率,使创作者能够以前所未有的方式突破界限。
有时,两个维度是不够的。在 3D 空间中缩放、旋转和平移任何元素,以增加一丝深度。
工作原理
Tailwind 在为生产环境构建时会自动删除所有未使用的 CSS,这意味着你最终的 CSS 包是最小的。事实上,大多数 Tailwind 项目向客户端交付的 CSS 不足 10kB。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tailwind CSS</title> <link rel="stylesheet" href="/build.css" /> </head> <body> <button class=""></button> </body></html>
@layer utilities {}
真实世界的 Tailwind
由于 Tailwind 非常底层,它永远不会鼓励你两次设计相同的站点。你最喜欢的一些网站是用 Tailwind 构建的,你可能不知道。
现成的组件
Tailwind UI 是一个精美的、完全响应式的 UI 组件集合,由我们,Tailwind CSS 的创建者设计和开发。它拥有数百个即用示例供您选择,并保证帮助您找到您想要构建的完美起点。