Tailwind CSS快速 UI 開發(fā) CSS 框架

Tailwind 是一個用于快速 UI 開發(fā)的實用工具集 CSS 框架，設(shè)計理念是以實用為先，它提供了高度可組合的應(yīng)用程序類，可幫助開發(fā)者輕松構(gòu)建復(fù)雜的用戶界面。它還提供了一個從實用模式中提取組件的工具，響應(yīng)式風格可以滿足不同設(shè)備上的開發(fā)。

與 Bootstrap、Foundation 或 Bulma 等框架不同，Tailwind CSS 并不是 UI 套件，因為它沒有沒有內(nèi)置的 UI 組件，也沒有默認的主題，完全需要開發(fā)者根據(jù)自身情況來定制設(shè)計。

Tailwind 僅僅是一個 CSS 框架，它還是構(gòu)建設(shè)計系統(tǒng)的引擎。

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

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

示例：

下面是一個用 Tailwind 構(gòu)建聯(lián)系人卡片組件的例子，無需寫一行 CSS ：

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