Tailwind 是什么?

Tailwind 是一个实用工具集 CSS 框架,用于快速构建定制化用户界面。

Tailwind 和其他前端框架,例如 Bootstrap、Foundation 或 Bulma,的不同之处在于:它不是一套 UI 组件库

Tailwind 没有默认主题,也没有任何内置的 UI 组件。

另一方面,Tailwind 不负责你的网站的外观是何模样,更不会强迫你改变设计决策。

如果你正在寻找这样一个框架:带有预先设计好的菜单组件用于构建网站,那么,Tailwind 可能不是你所要找的。

但是,如果你希望实现一套自己的设计理念,Tailwind 可能正是你所要找的。

工具集优先

创建一个用于构建定制化 UI 的框架意味着你无法在一般所熟悉的层面(例如 按钮、表单、卡、导航条等组件)上提供抽象层。

相反,Tailwind 提供了高度可组合、底层的工具类(utility classes),可以很容易地构建复杂的用户界面,并且不会让任何两个网站看起来长得很相似

下面这个响应式的联系卡是用 Tailwind 构建的,一行 CSS 代码都不用写:

Adam Wathan

Developer at NothingWorks Inc.

<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">Adam Wathan</p>
        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
      </div>
      <div>
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
      </div>
    </div>
  </div>
</div>

组件友好

虽然你能够用工具类(utility classes)做很多事,但是,有时组件才是最好的选择。

Tailwind 在重复的工具模式中提供了用于 提取组件类 的工具,让你能够修改一处的代码从而更新同一组件在不同地方的实例:

<!-- Using utilities: -->
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
  Button
</button>

<!-- Extracting component classes: -->
<button class="btn btn-blue">
  Button
</button>

<style>
  .btn {
    @apply .font-bold .py-2 .px-4 .rounded;
  }
  .btn-blue {
    @apply .bg-blue .text-white;
  }
  .btn-blue:hover {
    @apply .bg-blue-dark;
  }
</style>

从内核就支持响应式

每一个 Tailwind 工具类都是支持响应式的,这让构建响应式页面极其容易,只在 HTML 代码中即可完成。

Tailwind 使用了一个很直观的 {screen}: 前缀,这让它在保持原始的类名称(class name)的同时标记哪些是响应式类(responsive classes)。

1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

可定制

凡是能够定制的地方,Tailwind 就支持你定制它。

可定制的属性包括颜色(colors)、边框尺寸(border sizes)、字重(font weights)、间隔(spacing utilities)、断点(breakpoints)、阴影(shadows)等等。

Tailwind 是基于 PostCSS 开发的,通过 JavaScript 配置,这意味着你掌握了真正编程语言的全部能力。

Tailwind 不仅仅是一个 CSS 框架,更是一个创建设计系统的引擎

const colorPalette = {
  // ...
  'grey-lighter': '#f3f7f9',
  // ...
}

module.exports = {
  // ...
  backgroundColors: colorPalette,
  borderColors: {
    default: colorPalette['grey-lighter'],
    ...colorPalette,
  },
  // ...
}