tailwindcss

一个用于快速 UI 开发的实用工具集 CSS 框架。

Tailwind 是一个用于快速 UI 开发的实用工具集 CSS 框架,设计理念是以实用为先,它提供了高度可组合的应用程序类,可帮助开发者轻松构建复杂的用户界面。它还提供了一个从实用模式中提取组件的工具,响应式风格可以满足不同设备上的开发。

与 Bootstrap、Foundation 或 Bulma 等框架不同,Tailwind CSS 并不是 UI 套件,因为它没有没有内置的 UI 组件,也没有默认的主题,完全需要开发者根据自身情况来定制设计。

每个 Tailwind 小应用都有多种尺寸,这使得创建响应式界面变得非常简单, 您可以自定义颜色,边框尺寸,字体,阴影等等,没有任何限制。

简单示例

下面是一个用 Tailwind 构建联系人卡片组件的例子,无需写一行 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>

效果如下:

文档

英文文档:https://tailwindcss.com/docs/what-is-tailwind/

中文文档:https://www.tailwindcss.cn/docs/what-is-tailwind

tailwindcss 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论