无需离开你的HTML就能快速建立现代网站.

一个以功能类优先的CSS框架,包含了 flex, pt-4, text-center rotate-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 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.”

Sarah Dayan

Staff Engineer, Algolia

"最佳实践 "实际上并不可行。

我已经写了 几千字 来说明为什么传统的 "语义类名称 "是CSS难以维护的原因,但事实是,在你真正尝试之前,你可能不会相信我说的。如果你能抑制住吐槽的冲动,开始试着使用一下,我认为你会想知道用另外一种方式写css是什么样的体验

Adam Wathan
Tailwind CSS 作者

Testimonials

  • 我觉得自己像个白痴,直到现在还没有使用Tailwind CSS。

    Remix & React Training
  • 如果我不得不推荐一种今天进入编程行业的方式,那就是使用Tailwind CSS的HTML + CSS。

  • 我不会设计,有了Tailwind,我实际上可以轻松地做出好看的网站,它是我在CSS框架中想要的一切。

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

    Former WWE Champion
  • 我开始使用@tailwindcss。我一下子就爱上了他们的响应式修改器、详尽的文档,以及自定义调色板的简易性。

    Software Engineer
  • 我在使用它的那一刻就喜欢上了它。

  • 关于@tailwindcss,有一件事很糟糕--一旦你在少数项目中使用了它,再写正常的CSS就会很麻烦。

    JavaScript Developer
  • 好吧,我正式*全力*投入在宣传@tailwindcss的自来水行列中。从未想过建设网站可以如此快速和灵活。

    Programmer @ TrendyMinds
  • 好吧,@tailwindcss刚刚击中了我,现在我觉得自己像个#!@%&$%白痴。

    React Engineer
  • 在过去的几个月里,我一直在使用@tailwindcss,它很神奇。我以前已经用过一些实用类,但要想实用优先......这才是办法。

    Designer
  • 在过去两周里,我终于在一个真正的客户项目上使用了@tailwindcss,我再也不想用手写CSS了。我是个怀疑论者,但现在真的想宣传它。

    Ruby & iOS Developer
  • 我以为我不会喜欢@tailwindcss......花了一天时间用它来做POC,爱死它了 我希望在我们开始使用公司设计系统的时候就有这个软件,我在认真考虑彻底重建。

    Front-End Developer
  • @tailwindcss 起初看起来很奇怪,但现在我已经迷上了它。

    Front-End Developer
  • 一旦你开始使用tailwind,就没有回头路了。

  • 我在每个项目中都使用@tailwindcss,因为它消除了css的大部分烦扰,而且速度快了好几倍。

  • 它改变了我业务的轨迹。我能够在1/3的时间内设计出外观更好、性能更好、更容易使用的组件。

  • 我的第一个tailwind项目运行得很好,但真正让人兴奋的是,几个月后再去看它,省下了很多时间做新的改动。我立刻就知道一切是如何配合的。

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

  • Tailwind是一个典型的例子,说明为什么你在评估技术时需要把成见放在一边。它的经验和生产力比你基于老式CSS思维所认为的要高出一大截!

  • TailwindCSS是一个与众不同的框架。它不是将你限制在一个固定的设计中,而是给你提供工具和标准化,以建立你想要的东西。

  • 我记得当我第一次看到实用的第一个css时,我被惊呆了。 但在过去的几个月里,在越来越多的项目中使用Tailwind,这是一种在网络上构建事物的快乐的新方式。

  • 当我开始使用@tailwindcss时,我最初是持怀疑态度的,直到我现在需要将一个@sveltejs组件复制到不同的位置,我不需要担心我的任何样式会损坏。

  • @tailwindcss让你更擅长CSS。改变自己的想法。

  • 令人敬畏的东西! 我不是设计师或前端开发员;在去年发现Tailwind之前,我从九十年代初开始就没有做过任何CSS。Tailwind和Tailwind UI意味着我现在可以快速创造出漂亮的前端,这对我来说是一种极大的激励。令人印象深刻的项目。

  • 我承认在去年之前我一直对@tailwindcss持怀疑态度。我想 "我为什么要打一百万个只是抽象出单一CSS属性的类呢?" 到了现在,我觉得我在构建UI时的工作效率提高了一倍。 这真的很神奇。

  • 我用TypeScript和@tailwindcss重写我公司的前端,这个长达数月的项目即将完成。但是,每当我重新实现一个组件时,我都会想,"哇,这回可容易多了"。Tailwind是个好东西。

    Co-Founder/CTO @LaunchPathInc
  • 由于我们要做的运输量,跳过了脑电波到CSS的转换,并且能够使用Tailwind以思维的速度实施,我作为一个全栈开发者的生活从未如此幸福过。

  • Tailwind使新的开发者很容易进入前端项目,而不必担心理解 "某些 "开发者的类层次结构和背后的思维过程的心理锻炼。

    UI Designer/Developer
  • 对于我们的开发团队来说,Tailwind已经完全改变了游戏规则。它使我们能够更快地行动,保持我们的用户界面的一致性,并专注于我们想做的工作,而不是写CSS。

    Full-Stack Developer

基于约束的

为你的设计系统提供一个API。

实用类帮助你在一个系统的约束下工作,而不是在你的样式表中的任意值。它们使你很容易在颜色选择上保持一致。间距、排版、阴影,以及其他一切构成一个良好设计的系统。

了解更多, utility-first fundamentals
  • 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是如此的低级,它从不鼓励你把同样的网站设计两次。即使使用相同的调色板和尺寸比例,也很容易在下一个项目中以完全不同的外观建立相同的组件在下一个项目中采用完全不同的外观。

开始吧, installation
<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" />
  </div>
  <form class="flex-auto p-6">
    <div class="flex flex-wrap">
      <h1 class="flex-auto text-lg font-semibold text-slate-900">
        Classic 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。

了解更多, optimizing for production
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
Terminal
npx tailwindcss -o build.css --content index.html -w

移动优先

响应一切。

在你的CSS中与一堆复杂的媒体查询搏斗是很糟糕的,所以Tailwind让你在你的HTML中建立响应式设计。在你的HTML中建立响应式设计。

将一个屏幕尺寸放在任何CSS类的前面,看着它神奇地展现在一个特定的断点上。

Learn more, responsive design
workcation.com
Tailwind UI - Official Tailwind CSS Components
Workcation - Find a trip that suits you
Headless UI – Unstyled, fully accessible UI components
<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: 在您要添加的class类的开头增加hover:即可. 方法同样适用于 focus, active, disabled, focus-within, focus-visible, 甚至是我们自己发明的花哨状态,比如 group-hover.

了解更多, handling hover, focus, and other states

Projects

New
  • Title
    API Integration
    Category
    Engineering
    Users
  • Title
    New Benefits Plan
    Category
    Human Resources
    Users
  • New project
<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 styles

Prognosis Negative

Rating
PG-13
Year
2021
Genre
Comedy
Runtime
1h 46m
Cast
Simon Pegg, Zach Galifianakis

Rochelle, Rochelle

Rating
R
Year
2020
Genre
Romance
Runtime
1h 56m
Cast
Emilia Clarke
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类中。

了解更多, reusing styles

Weekly one-on-one

Date and time
-
Location
Kitchener, ON
Description
No meeting description
Attendees
Andrew McDonald
Decline
Accept

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: ,在深色模式激活时应用它。对背景色、文本色、边框色,甚至渐变色都有效。

了解更多, dark mode

Ep. 128

Scaling CSS at Heroku with Utility Classes

Full Stack Radio

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" />
    <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框架。

了解更多, configuration

Typography

  • CSS class
    font-display
    Font name
    Inter
    Sample
    AaBbCc
  • CSS class
    font-body
    Font size
    14pt
    Sample
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.

Colors

  • CSS class prefix
    bg-primary
    Range
    50-900
    Sample
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,以及更多。

Learn more, grid template columns
<div class="grid grid-flow-col grid-rows-2 grid-cols-3 gap-8">
  <div>
    <img src="/mountains-1.jpg" alt="">
  </div>
  <div class="col-start-3">
    <img src="/mountains-2.jpg" alt="">
  </div>
  <div>
    <img src="/mountains-3.jpg" alt="">
  </div>
  <div>
    <img src="/mountains-4.jpg" alt="">
  </div>
  <div class="row-start-1 col-start-2 col-span-2">
    <img src="/mountains-5.jpg" alt="">
  </div>
</div>

编辑工具

世界级的IDE整合。

担心记不住所有这些类的名字吗?Tailwind CSS IntelliSense 扩展可以帮助你。

获得智能的自动完成建议、提示、类定义和更多,所有这些都在你的编辑器中进行,无需配置。在你的编辑器中,无需配置。

了解更多, editor setup
<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="">
</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>

Problems

  • 'flex' applies the same CSS property as 'block'.

  • 'block' applies the same CSS property as 'flex'.

现成的组件

使用Tailwind UI,开发更快。

Tailwind UI是一个美丽的、完全响应的UI组件的集合,由我们--Tailwind CSS的创造者--设计和开发。由我们,即Tailwind CSS的创建者设计和开发。它有数百个随时可用的例子它有数百个现成的例子供您选择,并保证能帮助您找到您想要建立的完美起点。你想要建立的东西。

了解更多