Tailwind CSS

20th August 2020 at 2:19pm
Web UI Framework

Tailwind CSS 非常优秀:

  • 文档 非常好,详细同时深入浅出
  • 提供的 utility 非常全面和方便
  • 容易将 CSS 复用

Tailwind CSS 与普通的 CSS 框架(如 Bootstrap、Bulma 等)不同,它侧重于灵活性,侧重于提供各种各样的 utilities 让你可以流畅地设计样式。所以它并不提供现成的 UI 组件。这导致普通开发者,如果没有很强的设计能力,难以 copy-and-paste 来生产一个相对好看的页面。当然官方也意识到了这个问题,所以有这些产出是来解决这个问题的:

  • 作者开发了 Tailwind UI。虽然写着 UI,但是它不是传统的 UI 库,而是将一些好看的 UI 用 Tailwind CSS 写成 HTML 代码片断,这样你可以直接复制拷贝使用
  • 官方的 components 文档,提供了一些常见组件的示例
  • 官方编写的 custom forms,提供了表单组件样式的聚合样式,如 form-input, form-textarea, form-select

同时,它的第三方生态也不足够好。awesome-tailwind-css 上的项目缺乏商业公司支持,难免质量一般。因此使用 Tailwind CSS 时你需要花一些精力把常见的组件(比如 navbar)做出来。同时你要有好的设计能力。

如果你要自己做页面设计,非常建议看看 Tailwind CSS 的 screencast,以及作者 Adam Wathan 的 YouTube 频道,有非常好的案例教学。

TOC