大多数 CSS 框架包揽了太多工作。

其它 CSS 框架内建了各种预先设计的组件,例如按钮(buttons)、卡片(cards)和警告框(alerts)等,这些组件在一开始可能会加速你的开发进度,但是当你需要通过定制化的设计使你的网站能够脱颖而出时,这些组件会给你带来更大的痛苦。

Tailwind 与他们不同。

与其它 CSS 框架不同的是,Tailwind 并不提供预先设计好的内建组件。相反,Tailwind 提供了更基础的工具类(utility classes),可以让你直接在 HTML 源码上构建一个完全定制化的设计。

Woman paying for a purchase
Marketing
Finding customers for your new business

Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

如果你厌倦了与框架之间的斗争、费尽心力覆盖内建的样式以及争夺优先级的战争,Tailwind 就是为你而生的。

进一步了解 Tailwind 提倡的工具集优先的开发流程 →


天生就支持响应式布局

Tailwind 的每一个工具类都支持响应式布局,让你无需书写任何 CSS 代码即可轻松构建响应式界面。

Tailwind 使用更直观的类似 {screen}: 的命名前缀,这样可以很容易地注意到哪些是响应式类(class),同时还能保持原始类名(class name)的可识别性和完整性。

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

进一步了解基于 Tailwind 的响应式设计 →


组件友好

虽然你只需使用工具类(utility classes)就可以完成 很多 工作,但是随着项目的发展,将常见模式提取为更高级别的抽象可能会更有用。

Tailwind 提供了从重复模式中 提取组件 的工具,使得修改一处代码能够容易地更新多个实例:

<!-- Using utilities: -->
<button class="bg-blue-500 hover:bg-blue-600 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-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-600;
  }
</style>

进一步了解如何利用 Tailwind 提取组件 →


天生可定制

Tailwind 支持定制。包括颜色( colors)、边框尺寸(border sizes)、字体粗细(font weights)、间距(spacing utilities)、断电(breakpoints)、阴影(shadows)等等都可以定制。

Tailwind 是基于 PostCSS 开发的,通过 JavaScript 代码进行配置,这意味着你可以完全发挥真正的编程语言的能力。

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

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      tablet: '768px',
      desktop: '1024px',
    },
    colors: {
      primary: {
        100: '#ebf8ff',
        300: '#90cdf4',
        500: '#4299e1',
        700: '#2b6cb0',
        900: '#2a4365',
      },
      secondary: {
        100: '#fffff0',
        300: '#faf089',
        500: '#ecc94b',
        700: '#b7791f',
        900: '#744210',
      },
    },
    extend: {
      boxShadow: {
        huge: '0 30px 60px -15px rgba(0, 0, 0, .25)'
      }
    }
  }
}

进一步了解定制 Tailwind →