在不离开 HTML 的情况下快速构建现代网站。

一个实用程序优先的 CSS 框架,包含 flexpt-4text-centerrotate-90 等类,这些类可以组合起来在标记中直接构建任何设计。

开始使用
<figure class="bg-slate-100 rounded-xl dark:bg-slate-800">
  <img class="w-24 h-24" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 space-y-4">
    <blockquote>
      <p class="text-lg">
        “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>
      <div>
        Sarah Dayan
      </div>
      <div>
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>
“Tailwind CSS 见过的 唯一 能够 在大 团队中 扩展 框架。 易于 定制, 适应 任何 设计, 并且 构建 大小 很小。”

Sarah Dayan

Algolia 的员工工程师

“最佳实践”实际上不起作用。

我写了 几千字 来解释为什么传统的“语义类名”是 CSS 难以维护的原因,但事实是,在你真正尝试之前,你永远不会相信我。如果你能抑制住呕吐的冲动,给它一个机会,我真的认为你会想知道你以前是如何使用 CSS 的。

Adam Wathan
Tailwind CSS 的创建者

推荐

  • 我感觉自己像个白痴,直到现在才开始使用 Tailwind CSS。

    Remix 和 React 培训
  • 如果我必须推荐一种现在开始编程的方法,那将是 HTML + CSS 和 Tailwind CSS。

  • 我没有设计技能,但使用 Tailwind,我实际上可以轻松制作出美观的网站,而且它是我在 CSS 框架中想要的一切。

    Sara Vieira
    CodeSandbox
  • Tailwind CSS 是地球上最棒的 CSS 框架。

  • 我开始使用 @tailwindcss。我立即爱上了他们的响应式修改器、详尽的文档,以及自定义调色板的轻松程度。

    软件工程师
  • 从使用它的那一刻起就爱上了它。

    Web 开发人员
  • 关于 @tailwindcss 有一件事很糟糕 - 一旦你在一些项目中使用过它,再次编写普通的 CSS 就会非常痛苦。

    JavaScript 开发人员
  • 好吧,我正式*全部*加入了 @tailwindcss 的炒作行列。从未想过构建网站可以如此快速且灵活。

    TrendyMinds 的程序员
  • 好吧,@tailwindcss 刚刚让我茅塞顿开,现在我觉得自己像个 #!@%&$% 白痴。

    React 工程师
  • 过去几个月我一直在使用 @tailwindcss,它太棒了。我之前已经使用了一些实用程序类,但优先使用实用程序... 这就是方法。

    设计师
  • 在过去的两周里,终于在真正的客户项目中使用了 @tailwindcss,我再也不想手动编写 CSS 了。我曾经持怀疑态度,但炒作是真的。

    Ruby 和 iOS 开发人员
  • 我没想到我会喜欢 @tailwindcss... 花了一天时间在 POC 中使用它,爱上了它!我希望在我们开始公司设计系统时就有这个,认真考虑进行全面重建

    前端开发人员
  • @tailwindcss 起初看起来不太好,但现在我迷上了它。

    前端开发人员
  • 一旦你开始使用 tailwind,就再也回不去了。

  • 我为每个项目都使用 @tailwindcss,因为它消除了 css 的大部分烦恼,而且速度快很多倍

  • 它改变了我的业务轨迹。我能够在三分之一的时间内设计出外观更好、性能更好、更易于访问的组件。

  • 我的第一个顺风项目运行得很好,但真正厉害的是几个月后重新回到它,并且在进行新的更改时节省了大量时间。我立刻就知道所有内容如何组合在一起。

  • 在真实项目中使用 Tailwind 之前,它看起来就像纯意大利面。现在,这是我制作网站的唯一方式。简单、快速、可扩展。

  • Tailwind 是一个经典示例,说明在评估技术时你需要抛开先入为主的观念。体验和生产力远远领先于你可能基于老派 CSS 思维所相信的东西!

  • Tailwind CSS 是一个与众不同的框架。它不会将你限制在既定设计中,而是为你提供工具和标准化,以便构建你想要的东西。

  • 我记得第一次看到实用程序优先 CSS 时感到很害怕。但在过去几个月里,在越来越多的项目中使用 Tailwind 只是在网络上构建事物的一种令人愉悦的新方式。

  • 当我开始使用 @tailwindcss 时,我最初持怀疑态度,直到我现在需要将 @sveltejs 组件复制到其他位置,并且我无需担心任何样式损坏。

  • @tailwindcss 使你更擅长 CSS。改变我的想法。

  • 太棒了!我不是设计师或前端开发人员;直到去年我发现 Tailwind,自 90 年代初以来,我还没有做过任何 CSS。Tailwind 和 Tailwind UI 意味着我现在可以快速创建美观的前端,这非常强大。令人难以置信的项目。

  • 我承认,直到去年,我都是 @tailwindcss 的一个大怀疑论者。我想“我为什么要输入数百万个类,它们只是抽象出单个 CSS 属性?”到目前为止,我觉得在构建 UI 时我的工作效率提高了一倍。这真是太棒了。

  • 我即将完成我公司使用 TypeScript 和 @tailwindcss 重写前端的为期数月的项目。不过,每次重新实现一个组件时,我都会想,“哇,这次容易多了。”Tailwind 很棒。

    LaunchPathInc 联合创始人/首席技术官
  • 凭借我们必须完成的大量工作,跳过将脑电波转换为 CSS,并且能够使用 Tailwind 以思想的速度进行实施,我作为一名全栈开发人员的生活从未如此幸福。

  • Tailwind 使得新开发人员可以轻松进入前端项目,而无需担心理解“某些”开发人员的类层次结构及其背后的思维过程这一脑力活动。

    UI 设计师/开发人员
  • Tailwind 彻底改变了我们开发团队的游戏规则。它使我们能够更快地行动,保持 UI 的一致性,并专注于我们想要做的工作,而不是编写 CSS。

    全栈开发人员

基于约束

用于你的设计系统的 API。

实用程序类可帮助你在系统约束内工作,而不是在样式表中填充任意值。它们使你可以轻松地保持颜色选择、间距、字体、阴影以及构成精心设计的系统的所有其他元素的一致性。

了解更多,实用程序优先的基本原理
  • w-64
  • w-60
  • w-56
  • w-52
  • w-48
  • w-44
  • w-40
  • w-36
<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。

了解更多,针对生产环境进行优化
index.html
tailwind.config.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/build.css">
</head>
<body>
<button class=""></button>
</body>
</html>
build.css
终端
npx tailwindcss -o build.css --content index.html -w

移动优先

响应一切。

在 CSS 中使用一堆复杂的媒体查询很糟糕,因此 Tailwind 让你可以在 HTML 中直接构建响应式设计。

在任何实用程序类前放置一个屏幕尺寸,并观察它在特定断点处神奇地应用。

了解更多,响应式设计
workcation.com
Tailwind UI - 官方 Tailwind CSS 组件
Workcation - 找到适合您的旅行
无头 UI – 无样式、完全可访问的 UI 组件
<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:。适用于 focusactivedisabledfocus-withinfocus-visible,甚至是我们自己发明的花式状态,如 group-hover

了解更多信息,处理悬停、焦点和其他状态

项目

新建
  • 标题
    API 集成
    类别
    工程
    用户
  • 标题
    新福利计划
    类别
    人力资源
    用户
  • 新建项目
<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>

组件驱动

担心重复?别担心。

如果您一遍又一遍地重复相同的实用程序,您所要做的就是将它们提取到组件或模板部分中,然后就这样 — 您就拥有了单一的事实来源,以便您可以在一个地方进行更改。

了解更多信息,重复使用样式

预后消极

评级
PG-13
年份
2021
类型
喜剧
片长
1 小时 46 分钟
演员
西蒙·佩吉、扎克·加利菲安纳基斯

罗谢尔,罗谢尔

评级
R
年份
2020
类型
爱情
片长
1 小时 56 分钟
演员
艾米莉亚·克拉克
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>
  )
}

不使用组件框架?

使用 Tailwind 的 @apply 指令,通过复制和粘贴类名列表,将重复的实用程序模式提取到自定义 CSS 类中。

了解更多信息,重复使用样式

每周一对一

日期和时间
-
地点
基奇纳,安大略省
说明
无会议说明
与会者
安德鲁·麦克唐纳
拒绝
接受

styles.css

.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;
}

index.html

</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

使用实用程序类在 Heroku 上扩展 CSS

全栈电台

24:16
75:50
<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 框架。

了解更多,配置

字体

  • CSS 类
    font-display
    字体名称
    Inter
    示例
    AaBbCc
  • CSS 类
    font-body
    字体大小
    14pt
    示例
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.

颜色

  • CSS 类前缀
    bg-primary
    范围
    50-900
    示例
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="">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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;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 属性。

  • 'block' 应用与 'flex' 相同的 CSS 属性。

现成的组件

使用 Tailwind UI 进一步加快速度。

Tailwind UI 是由我们(Tailwind CSS 的创建者)设计和开发的一系列美观、完全响应的 UI 组件。它有数百个可供选择的现成示例,并且保证帮助您找到您想要构建内容的完美起点。

了解更多信息