DiscordDiscordDocs

无需离开您的HTML，即可快速建立一个前沿的网站。

一个以实用为先的CSS框架，包含了诸如 flex, pt-4, text-center and rotate-90 这样的类，可以直接在你的标记中构建任何设计。.

开始吧
“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

<figure class="bg-gray-100 rounded-xl">
  <img class="w-32 h-32" 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>

"最佳实践 "其实并不可行。

我已经写了 几千字的文章 来解释为什么传统的 "语义类名"是CSS难以继续发展下去的原因，但事实是你可能不会认同我说的这些，除非你真的愿意尝试一下。如果你能控制住想吐槽的冲动，给Tailwindcss一个机会，我真的认为你会怀疑之前使用css的那种方式的。

亚当-维森
Tailwind CSS作者

  • 我觉得自己像个傻吊，直到现在才使用Tailwind CSS。

    Ryan Florence
    Remix & React Training
    Original tweet by Ryan Florence

  • 老铁，如果你现在问我该怎么入门编程，那我肯定会告诉你去学习HTML+CSS与Tailwind CSS。

    Guillermo Rauch
    Vercel
    Original tweet by Guillermo Rauch

  • 我没有任何设计经验，但我使用Tailwind可以轻松地做出好看的网站，这货就是我理想中的CSS框架

    Sara Vieira
    CodeSandbox

  • 前几天我用Tailwind CSS重新设计了feltpresence.com。它太棒了！我只给了自己几个小时的时间，就把它搞好了。我只给了自己几个小时的时间，把它弄在一起，现在焕然一新。。

    Ryan Singer
    Basecamp

  • 我一开始使用@tailwindcss。立刻就喜欢上了他们的响应式修改器，详尽的文档，以及自定义调色板，太特么的方便了。

    Dacey Nolan
    Software Engineer
    Original tweet by Dacey Nolan

  • 在上手的第一秒，我就喜欢上了这货。

    Gilbert Rabut Tsurwa
    Web Developer
    Original tweet by Gilbert Rabut Tsurwa

  • 在俺们单位，我很纳闷为什么上一个秃头程序员会在我们的项目中使用tailwindcss，但在之后几天之内，我就成为了tailwind的粉丝，然后在我所有的个人项目中使用了它。

    Madeline Campbell
    Full-Stack Developer
    Original tweet by Madeline Campbell

  • @tailwindcss有一个很讨厌的地方--一旦你在一些项目中使用了它，再写普通的CSS就会很蛋疼。

    Graeme Houston
    JavaScript Developer
    Original tweet by Graeme Houston

  • 好吧，我正式加入了@tailwindcss的自来水军。从来没有想过建立网站可以如此不可思议的快速和灵活，屌爆了！

    Aaron Bushnell
    Programmer @ TrendyMinds
    Original tweet by Aaron Bushnell

  • 在CSS上工作了十几年，Tailwind让我的生活更轻松。它仍然是CSS，你可以使用flex，grid等，但相比之前，Tailwind更快编写和更容易维护。

    Head of Learning @ Nuxt.js
    Full-Stack Developer
    Original tweet by Head of Learning @ Nuxt.js

  • 好吧，我刚才仔细研究了一下@tailwindcss，此时此刻，我一脸懵逼，css还可以这么玩。

    Ken Wheeler
    React Engineer
    Original tweet by Ken Wheeler

  • 在过去的几个月里，我一直在使用@tailwindcss，它太牛逼了。我之前已经用过一些css框架，但要论实用和速度......那你来这里算找对地方了。

    Jad Limcaco
    Designer
    Original tweet by Jad Limcaco

  • 在过去两周终于在一个真正的客户项目中使用了@tailwindcss，以后我再也不想用手写CSS了。我是一个啥也不信的人，但此时此刻就想为tailwind吹水宣传一波。

    Luke Redpath
    Ruby & iOS Developer
    Original tweet by Luke Redpath

  • 没想到我会喜欢上@tailwindcss......用它做了一天的POC，爱不释手! 真希望在我们开始公司设计系统的时候，这个东西就已经存在了，现在在考虑用tailwindcss重构一下。

    Jon Bloomer
    Front-End Developer
    Original tweet by Jon Bloomer

  • @tailwindcss 一开始怎么看怎么不爽，但现在我已经深深的迷上了它。这也太棒了吧

    Andrew Gilliland
    Front-End Developer
    Original tweet by Andrew Gilliland

基于约束的

一个用于设计系统的API。

功能类可以帮助你在系统的约束下工作，而不是在你的样式表中堆满任意的值。它们可以让你轻松地在颜色选择、间距、排版、阴影以及其他一切构成一个精心设计的系统的东西上保持一致。

了解更多 ->

Width

  • w-64
  • w-56
  • w-48
  • w-40
  • w-32
  • w-24
  • w-20
  • w-16
  • w-12
  • w-10
<ul class="space-y-4">
  <li>
    <div class="w-64 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-56 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-48 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-40 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-32 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-24 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-20 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-16 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-12 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-10 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
</ul>

构建任何东西

想弄个什么就弄个什么，真的。

因为Tailwind是如此的低门槛，它从不鼓励你设计同一个网站两次。即使使用相同的调色板和大小比例，在下一个项目中，很容易建立一个外观完全不同的相同组件。

开始吧 ->
<div class="flex">
  <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-xl font-semibold">
        Classic Utility Jacket
      </h1>
      <div class="text-xl font-semibold text-gray-500">
        $110.00
      </div>
      <div class="w-full flex-none text-sm font-medium text-gray-500 mt-2">
        In stock
      </div>
    </div>
    <div class="flex items-baseline mt-4 mb-6">
      <div class="space-x-2 flex">
        <label>
          <input class="w-9 h-9 flex items-center justify-center bg-gray-100 rounded-lg" name="size" type="radio" value="xs" checked>
          XS
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="s">
          S
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="m">
          M
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="l">
          L
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="xl">
          XL
        </label>
      </div>
      <div class="ml-auto text-sm text-gray-500 underline">Size Guide</div>
    </div>
    <div class="flex space-x-3 mb-4 text-sm font-medium">
      <div class="flex-auto flex space-x-3">
        <button class="w-1/2 flex items-center justify-center rounded-md bg-black text-white" type="submit">Buy now</button>
        <button class="w-1/2 flex items-center justify-center rounded-md border border-gray-300" type="button">Add to bag</button>
      </div>
      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-gray-400 border border-gray-300" type="button" aria-label="like">
        <svg width="20" height="20" fill="currentColor">
          <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-gray-500">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>

性能

它的代码量很小。

Tailwind 在打包构建时自动删除所有未使用的CSS，这意味着您的最终CSS包是可能最小的。事实上，大多数Tailwind项目向客户提供的CSS不到10KB。

了解更多 ->
Production build
2,413.4KB
Purged
0 unused classes
fixed flex-col rounded-sm shadow px-4 justify-content text-center flex-shrink-0 md:text-left h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto text-lg text-purple-500 md:text-left text-gray-600 text-green-400 text-blue-500 rounded-pill p-4 max-w-screen-xl mt-5 leading-7 whitespace-nowrap sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none flex-1 xl:mx-0 xl:grid-cols-4 border border-gray-200 text-4xl leading-6 leading-10 font-extrabold leading-5 h-5 w-5 text-green-500 text-5xl leading-none font-extrabold text-white tracking-tight border-t text-sm border-indigo-600 py-4 font-medium px-5 flex items-center space-x-3 text-base leading-6 text-white absolute right-full ml-4 bottom-0 transform -translate-x-1/2 py-3 mx-4 w-full duration-150 h-full transition py-0 pl-4 pr-8 border-transparent bg-transparent text-gray-500 px-5 py-3 appearance-none underline bg-indigo-700 min-w-full divide-y divide-gray-200 items-baseline text-indigo-600 hover:text-indigo-500 
<div class="fixed inset-0 flex items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
  <div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto">
    <div class="rounded-lg shadow-xs overflow-hidden">
      <div class="p-4">
        <div class="flex items-start">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="ml-3 w-0 flex-1 pt-0.5">
            <p class="text-sm font-medium text-gray-900">
              Successfully saved!
            </p>
            <p class="mt-1 text-sm text-gray-500">
              Anyone with a link can now view this file.
            </p>
          </div>
          <div class="ml-4 flex-shrink-0 flex">
            <button class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

移动端优先

响应式的一切。

在CSS中使用大量复杂的媒体查询进行操作很麻烦，因此Tailwind可让您直接在HTML中构建响应式设计。

将屏幕尺寸扔到任何功能类的前面，看着它在特定的断点处神奇地使用。

了解更多 ->
workcation.com

Entire house

Beach House in Collingwood

4.94 (128)
·
Collingwood, Ontario

Hosted by Kevin Francis

Check availability
<div class="grid grid-cols-1 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8 md:py-16">
  <div class="relative z-10 col-start-1 row-start-1 px-4 pt-40 pb-3 bg-gradient-to-t from-black sm:bg-none">
    <p class="text-sm font-medium text-white sm:mb-1 sm:text-gray-500">Entire house</p>
    <h2 class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl">Beach House in Collingwood</h2>
  </div>
  <div class="col-start-1 row-start-2 px-4 sm:pb-16">
    <div class="flex items-center text-sm font-medium my-5 sm:mt-2 sm:mb-4">
      <svg width="20" height="20" fill="currentColor" class="text-violet-600">
        <path d="M9.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118l-2.8-2.034c-.784-.57-.381-1.81.587-1.81H7.03a1 1 0 00.95-.69L9.05 3.69z" />
      </svg>
      <div class="ml-1">
        <span class="text-black">4.94</span>
        <span class="sm:hidden md:inline">(128)</span>
      </div>
      <div class="text-base font-normal mx-2">·</div>
      <div>Collingwood, Ontario</div>
    </div>
    <hr class="w-16 border-gray-300 hidden sm:block">
  </div>
  <div class="col-start-1 row-start-3 space-y-3 px-4">
    <p class="flex items-center text-black text-sm font-medium">
      <img src="/kevin-francis.jpg" alt="" class="w-6 h-6 rounded-full mr-2 bg-gray-100">
      Hosted by Kevin Francis
    </p>
    <button type="button" class="bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2 rounded-lg">Check availability</button>
  </div>
  <div class="col-start-1 row-start-1 flex sm:col-start-2 sm:row-span-3">
    <div class="w-full grid grid-cols-3 grid-rows-2 gap-2">
      <div class="relative col-span-3 row-span-2 md:col-span-2">
        <img src="/beach-house.jpg" alt="" class="absolute inset-0 w-full h-full object-cover bg-gray-100 sm:rounded-lg" />
      </div>
      <div class="relative hidden md:block">
        <img src="/beach-house-interior.jpg" alt="" class="absolute inset-0 w-full h-full object-cover rounded-lg bg-gray-100" />
      </div>
      <div class="relative hidden md:block">
        <img src="/beach-house-view.jpg" alt="" class="absolute inset-0 w-full h-full object-cover rounded-lg bg-gray-100" />
      </div>
    </div>
  </div>
</div>

状态变化

鼠标滑过和点击状态？我们实现了。

想在鼠标滑过上进行样式设计? hover: 在你要添加的类的开头。适用于 focus, active, disabled, focus-within, focus-visible, 甚至是我们自己发明的特别的状态，比如 group-hover.

了解更多 ->

Projects

New
  • Title
    API Integration
    Category
    Engineering
    Users
  • Title
    New Benefits Plan
    Category
    Human Resources
    Users
  • New Project
<section class="px-4 sm:px-6 lg:px-4 xl:px-6 pt-4 pb-4 sm:pb-6 lg:pb-4 xl:pb-6 space-y-4">
  <header class="flex items-center justify-between">
    <h2 class="text-lg leading-6 font-medium text-black">Projects</h2>
    <button class="hover:bg-light-blue-200 hover:text-light-blue-800 group flex items-center rounded-md bg-light-blue-100 text-light-blue-600 text-sm font-medium px-4 py-2">
      <svg class="group-hover:text-light-blue-600 text-light-blue-500 mr-2" width="12" height="20" fill="currentColor">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 5a1 1 0 011 1v3h3a1 1 0 110 2H7v3a1 1 0 11-2 0v-3H2a1 1 0 110-2h3V6a1 1 0 011-1z"/>
      </svg>
      New
    </button>
  </header>
  <form class="relative">
    <svg width="20" height="20" fill="currentColor" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
      <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:border-light-blue-500 focus:ring-1 focus:ring-light-blue-500 focus:outline-none w-full text-sm text-black placeholder-gray-500 border border-gray-200 rounded-md py-2 pl-10" type="text" aria-label="Filter projects" placeholder="Filter projects" />
  </form>
  <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4">
    <li x-for="item in items">
      <a :href="item.url" class="hover:bg-light-blue-500 hover:border-transparent hover:shadow-lg group block rounded-lg p-4 border border-gray-200">
        <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 leading-6 font-medium text-black">
              {item.title}
            </dd>
          </div>
          <div>
            <dt class="sr-only">Category</dt>
            <dd class="group-hover:text-light-blue-200 text-sm font-medium sm:mb-4 lg:mb-0 xl:mb-4">
              {item.category}
            </dd>
          </div>
          <div class="col-start-2 row-start-1 row-end-3">
            <dt class="sr-only">Users</dt>
            <dd class="flex justify-end sm:justify-start lg:justify-end xl:justify-start -space-x-2">
              <img x-for="user in item.users" :src="user.avatar" :alt="user.name" width="48" height="48" class="w-7 h-7 rounded-full bg-gray-100 border-2 border-white" />
            </dd>
          </div>
        </dl>
      </a>
    </li>
    <li class="hover:shadow-lg flex rounded-lg">
      <a href="/new" class="hover:border-transparent hover:shadow-xs w-full flex items-center justify-center rounded-lg border-2 border-dashed border-gray-200 text-sm font-medium py-4">
        New Project
      </a>
    </li>
  </ul>
</section>

组件驱动

担心重复的问题？别担心

如果你一遍又一遍地重复相同的代码，你所要做的就是将它们提取到一个组件或模板局部，然后--您只有一个真实的来源，因此可以在一个地方进行更改。

了解更多 ->

Hank’s Juiciest Beef Burger

Time
20m
Difficulty
· Easy
Servings
· 4 servings
By
Hank Douglas
import Nav from ''
import NavItem from ''
import List from ''
import ListItem from ''

export default function Recipes({ recipes }) {
  return (
    <div className="divide-y divide-gray-100">
      <Nav>
        <NavItem href="/featured" isActive>Featured</NavItem>
        <NavItem href="/popular">Popular</NavItem>
        <NavItem href="/recent">Recent</NavItem>
      </Nav>
      <List>
        {recipes.map((recipe) => (
          <ListItem key={recipe.id} recipe={recipe} />
        ))}
      </List>
    </div>
  )
}

不喜欢组件框架，喜欢保持老派？使用Tailwind的@apply指令来提取重复的实用模式到自定义CSS类中，只需复制和粘贴类名到列表即可。

了解更多 ->

Weekly one-on-one

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

styles.css

.btn {
  @apply text-base font-medium rounded-lg p-3;
}

.btn--primary {
  @apply bg-rose-500 text-white;
}

.btn--secondary {
  @apply bg-gray-100 text-black;
}

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: 在黑夜模式激活时应用它。适用于背景色、文本色、边框色，甚至是开箱即用的渐变色，无需配置。.

了解更多 ->

Ep. 128

Scaling CSS at Heroku with Utility Classes

Full Stack Radio

24:16
75:50
1.0x 
<div class="bg-white dark:bg-gray-800 rounded-tl-xl sm:rounded-t-xl p-4 pb-6 sm:p-8 lg:p-4 lg:pb-6 xl:p-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8">
  <div class="flex items-center space-x-3.5 sm:space-x-5 lg:space-x-3.5 xl:space-x-5">
    <img src="/full-stack-radio.png" alt="" width="160" height="160" class="flex-none w-20 h-20 rounded-lg bg-gray-100" />
    <div class="min-w-0 flex-auto space-y-0.5">
      <p class="text-lime-600 dark:text-lime-400 text-sm sm:text-base lg:text-sm xl:text-base font-semibold uppercase">
        <abbr title="Episode">Ep.</abbr> 128
      </p>
      <h2 class="text-black dark:text-white text-base sm:text-xl lg:text-base xl:text-xl font-semibold truncate">
        Scaling CSS at Heroku with Utility Classes
      </h2>
      <p class="text-gray-500 dark:text-gray-400 text-base sm:text-lg lg:text-base xl:text-lg font-medium">
        Full Stack Radio
      </p>
    </div>
  </div>
  <div class="space-y-2">
    <div class="bg-gray-200 dark:bg-black rounded-full overflow-hidden">
      <div class="bg-lime-500 dark:bg-lime-400 w-1/2 h-1.5" role="progressbar" aria-valuenow="1456" aria-valuemin="0" aria-valuemax="4550"></div>
    </div>
    <div class="text-gray-500 dark:text-gray-400 flex justify-between text-sm font-medium tabular-nums">
      <div>24:16</div>
      <div>75:50</div>
    </div>
  </div>
</div>
<div class="bg-gray-50 text-black dark:bg-gray-900 dark:text-white lg:rounded-b-xl py-4 px-1 sm:px-3 lg:px-1 xl:px-3 grid grid-cols-5 sm:grid-cols-7 lg:grid-cols-5 xl:grid-cols-7 items-center">
  <button type="button" class="mx-auto">
    <svg width="24" height="24" fill="none">
      <path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
    </svg>
  </button>
  <button type="button" class="hidden sm:block lg:hidden xl:block mx-auto">
    <svg width="17" height="18">
      <path d="M0 0h2v18H0V0zM4 9l13-9v18L4 9z" fill="currentColor" />
    </svg>
  </button>
  <button type="button" class="mx-auto">
    <svg width="34" height="39" fill="none">
      <path d="M12.878 26.12c1.781 0 3.09-1.066 3.085-2.515.004-1.104-.665-1.896-1.824-2.075v-.068c.912-.235 1.505-.95 1.5-1.93.005-1.283-1.048-2.379-2.727-2.379-1.602 0-2.89.968-2.932 2.387h1.274c.03-.801.784-1.287 1.64-1.287.892 0 1.475.541 1.471 1.346.004.844-.673 1.398-1.64 1.398h-.738v1.074h.737c1.21 0 1.91.614 1.91 1.491 0 .848-.738 1.424-1.765 1.424-.946 0-1.683-.486-1.734-1.262H9.797c.055 1.424 1.317 2.395 3.08 2.395zm7.734.025c2.016 0 3.196-1.645 3.196-4.504 0-2.838-1.197-4.488-3.196-4.488-2.003 0-3.196 1.645-3.2 4.488 0 2.855 1.18 4.5 3.2 4.504zm0-1.138c-1.18 0-1.892-1.185-1.892-3.366.004-2.174.716-3.371 1.892-3.371 1.172 0 1.888 1.197 1.888 3.37 0 2.182-.712 3.367-1.888 3.367z" fill="currentColor" />
      <path d="M1 22c0 8.837 7.163 16 16 16s16-7.163 16-16S25.837 6 17 6" stroke="currentColor" stroke-width="1.5" />
      <path d="M17 0L9 6l8 6V0z" fill="currentColor" />
    </svg>
  </button>
  <button type="button" class="mx-auto">
    <svg width="50" height="50" fill="none">
      <circle class="text-gray-300 dark:text-gray-500" cx="25" cy="25" r="24" stroke="currentColor" stroke-width="1.5" />
      <path d="M18 16h4v18h-4V16zM28 16h4v18h-4z" fill="currentColor" />
    </svg>
  </button>
  <button type="button" class="mx-auto">
    <svg width="34" height="39" fill="none">
      <path d="M12.878 26.12c1.781 0 3.09-1.066 3.085-2.515.004-1.104-.665-1.896-1.824-2.075v-.068c.912-.235 1.505-.95 1.5-1.93.005-1.283-1.048-2.379-2.727-2.379-1.602 0-2.89.968-2.932 2.387h1.274c.03-.801.784-1.287 1.64-1.287.892 0 1.475.541 1.471 1.346.004.844-.673 1.398-1.64 1.398h-.738v1.074h.737c1.21 0 1.91.614 1.91 1.491 0 .848-.738 1.424-1.765 1.424-.946 0-1.683-.486-1.734-1.262H9.797c.055 1.424 1.317 2.395 3.08 2.395zm7.734.025c2.016 0 3.196-1.645 3.196-4.504 0-2.838-1.197-4.488-3.196-4.488-2.003 0-3.196 1.645-3.2 4.488 0 2.855 1.18 4.5 3.2 4.504zm0-1.138c-1.18 0-1.892-1.185-1.892-3.366.004-2.174.716-3.371 1.892-3.371 1.172 0 1.888 1.197 1.888 3.37 0 2.182-.712 3.367-1.888 3.367z" fill="currentColor" />
      <path d="M33 22c0 8.837-7.163 16-16 16S1 30.837 1 22 8.163 6 17 6" stroke="currentColor" stroke-width="1.5" />
      <path d="M17 0l8 6-8 6V0z" fill="currentColor" />
    </svg>
  </button>
  <button type="button" class="hidden sm:block lg:hidden xl:block mx-auto">
    <svg width="17" height="18" viewBox="0 0 17 18" fill="none">
      <path d="M17 0H15V18H17V0Z" fill="currentColor" />
      <path d="M13 9L0 0V18L13 9Z" fill="currentColor" />
    </svg>
  </button>
  <button type="button" class="mx-auto border border-gray-300 rounded-md text-sm font-medium py-0.5 px-2 text-gray-500 dark:border-gray-600 dark:text-gray-400">
    1.0x
  </button>
</div>

定制化

扩展它，调整它，改变它。

Tailwind 包括一个专业的默认设置，但实际上，一切都可以定制--从调色板到间距比例，到方框阴影，到鼠标光标。.

使用tailwind.config.js文件来制作你自己的设计系统，然后让Tailwind将其转化为你自己的自定义CSS框架。.

了解更多 ->

Typography

font-display
Inter
font-body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi ultrices non pharetra, eros enim. Habitant suspendisse ultricies.

Color

bg-primary-{50-900}
bg-gray-{50-900}
module.exports = {
  theme: {
    fontFamily: {
      display: ['Inter', 'system-ui', 'sans-serif'],
      body: ['Inter', 'system-ui', 'sans-serif'],
    },
    colors: {
      primary: {
        50: '#eef2ff',
        100: '#e0e7ff',
        200: '#c7d2fe',
        300: '#a5b4fc',
        400: '#818cf8',
        500: '#6366f1',
        600: '#4f46e5',
        700: '#4338ca',
        800: '#3730a3',
        900: '#312e81',
      },
      gray: {
        50: '#fafafa',
        100: '#f4f4f5',
        200: '#e4e4e7',
        300: '#d4d4d8',
        400: '#a1a1aa',
        500: '#71717a',
        600: '#52525b',
        700: '#3f3f46',
        800: '#27272a',
        900: '#18181b',
      },
    },
  },
}

前沿功能

前沿是我们的舒适区。

Tailwind 是不折不扣的前沿，并利用所有最新的和最伟大的CSS功能，使开发者的体验尽可能的愉快。

我们拥有一流的 CSS 网格支持、由 CSS 变量驱动的可合成变换和渐变、对前沿状态选择器的支持，如 :focus-visible，以及更多。

了解更多 ->
1
2
3
4
5
<div class="grid grid-flow-col grid-rows-2 grid-cols-3 gap-4">
  <div>
    1
  </div>
  <div class="col-start-3">
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div class="row-start-1 col-start-2 col-span-2">
    5
  </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-gray-900 text-sm font-medium truncate">Jane Cooper</h3>
      <span class="text-teal-600">Admin</span>
    </div>
    <p class="mt-1 text-gray-500 text-sm truncate">Regional Paradigm Technician</p>
  </div>
  <img class="w-10 h-10 bg-gray-300 rounded-full flex-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-gray-200">
  <div class="-mt-px flex">
    <div class="w-0 flex-1 flex border-r border-gray-200">
      <a href="#" class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-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-gray-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的作者设计和开发。它有数百个现成的例子可供选择，并保证帮助您找到您想要建立的完美的起点。.

了解更多 ->