快速 UI 开发 CSS 框架 Tailwind CSS

快速 UI 开发 CSS 框架 Tailwind CSS

MIT
HTML/CSS
跨平台
2017-11-29
王练

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

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

Tailwind 仅仅是一个 CSS 框架,它还是构建设计系统的引擎。

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

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

示例:

下面是一个用 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>
的码云指数为
超过 的项目
加载中

评论(7)

开源中国最帅没有之一
表现分离很好,但是很多情况下尤其是大网站你会发现后期很难维护,为什么?因为这样做html和css是相互依赖的,这个库提供的仅仅是样式的辅助。你可以用这个库加上bem方法进一步抽象。写出更有扩展性的代码。
LearnShare
LearnShare
h-16 mb-4 这种一个 class 代替一个或多个 CSS 属性的用法,完全是错误的。 不符合内容与表现分离的原则,也带来大量冗余样式(h-0 h-1 h-2 h-3 h-4 h-5...)
司徒永超
司徒永超
这开发风格有些奇怪,更像是用 class 写精简版的 css 样式。
圣艾夫斯传说
圣艾夫斯传说
无需写一行css,写了一堆自定义class;还不相当于一个是通用标准,一个是“自造”规则;形式化,自欺欺人……
DcV
DcV
看不出优势何在
洞悉
洞悉
感觉比直接写 css还要慢 ,css3 calc flex 这些特性 简介 直观
浔__
浔__
这样会啰嗦,跟直接写style差不多了

暂无资讯

暂无问答

暂无博客

返回顶部
顶部