基于 TailwindCSS 的网页组件库站点 UIBak 上线说明

作者：探码科技，原文链接： http://www.tanmer.com/blog/769

关于产品定位

这是一个基于 TailwindCss 框架的模板组件库，为 Web 前端开发人员的 UI Kit 工具箱，完全免费开放，复制即用。同时，UIBak 也是配合创建一个基于Tailwind + Baklib CMS 的 UI 组件超市，方便制作Baklib CMS的用户可以通过超市库便捷寻找到各种可视化Web展示，以创建丰富的Web应用。

这里有两个初心：

一是为我们公司自研的数字内容体验云平台 Baklib 的低代码编辑器提供生态支持；
一是维护一个公共免费的 Web UI 库站点，为 TailwindCss 生态的中文环境添砖加瓦。

这里提到了“生态”，这是一个比较大的词，我想解释一下。

其实在准备上线UIBak网站的时候，我一直在思考“生态”这个问题。你如何理解“生态”这个事情呢？我目前的理解是：

国外SaaS的核心能力不是生态，是连接。也就说我做好一个核心场景，其他场景都通过API去连接，通过连接，帮助企业打造完整的数字化体验。所以国外的SaaS非常注重开放API用于连接。

国内的云平台、SaaS、软件厂商都不具备“开放API连接”的思维和条件，最多可成为“集成商”，通过合作寻找上下游打包形成一套解决方案。

对于”生态”的理解，我认为可以分解为：业务生态和技术生态。技术生态有如Rails,当公司采用Rails以后，就会围绕Rails寻找他上下游的各种技术，形成社区，圈子。业务生态有如Notion, 大家通过Notion这个“工具”，打造各种业务比如做成CRM，做成OA，做成可视化平台，做成简历，各种模板超市、应用超市，形成一个大市场。

Baklib 现有的客户画像主要是互联网软件公司的技术部门和运营部门，针对这个画像，我认为Baklib更适合打造一个技术生态，围绕“内容在Web上的各种输出表达”，提供Web内容表达的技术生态，比如CMS、Blog、FAQ、Guide、Wiki这是表达，Card, Grid, List, Alert, Tooltip这也是表达。

UI库发展思路有两个先：先满足自己，再满足别人；先满足别人，再满足自己。如果先满足自己，品牌化会很强，生态的发展速度会取决于我们。如果先满足别人，生态可能会发展更快，会推动 Baklib 的发展，到这种当时，没有一个硬IP背书，非常难以让人跟随。所以对比下来，UI库先面向我们Baklib去驱动发展。这就需要我们给Baklib的所有产品线设计一个业务模型，产品之间需要有关联性，相辅相成。

虽然我们说做个生态，但是生态的范围得收敛到我们能够支撑的范围。目前，为企业设计完整业务流程，是生态边界参考的重要依据。

关于产品设计

相比于其他 Web CSS 框架（如 Bootstrap），TailwindCss 非常吸引人的地方就是其预设了足够用的 class，需要什么样的样式，只需要查字典而不需要自定义 class，这个“约定大于配置”的理念，非常契合 Ruby on Rails 框架的理念[见 Rails Doctrine]，而 Baklib 是基于 Ruby on Rails 开发的，所以我们认为 TailwindCss 是作为协同低代码开发环境最优的选择。网上搜索有关“Tailwind UI ”，“Tailwind Templates”得到的结果：

TailwindUI, Flowbite, DaisyUI, Tailbits, WindUI, PrelineUI, TailGrids, XtendUI, VueTailwind, Best of Tailwind,UI Kit vs Component Library, My library / kit is not on this list, Tailwind UI, daisyUI, Mamba UI, Headless UI, Tailwind Elements, Xtend UI, Flowbite, Tailwind UI Kit, Meraki UI, Tailblocks, HyperUI, Kimia UI, Tailwind Starter Kit, Material Tailwind, Konsta UI, Preline

确定关键词： theme/css-bak/lib， UI, Templates, components, Kits，于是通过这些关键词查了一下域名，发现几乎都被注册了，以下是.com/.cn 域名中还可以被注册的：

bak-ui.com, bak-lib.com, UIBak.com，Libkit.cn，kitbak.cn，bakit.cn，bakkit.cn，uibase.cn，kitbase.cn，Libase.cn，Libbase.cn，bakbase.cn

最终选定了 UIBak.com/cn，主要是因为还有.com 域名，考虑到未来国际化的需要。

网上也有相关的竞品学习和参考：

TailwindCss: Rapidly build modern websites without ever leaving your HTML.

Tailwind UI - Official Tailwind CSS Components & Templates

Tailwind CSS component library - Flowbite

daisyUI — Tailwind CSS Components

Tailwind Component Library | Tailbits

Tailwind CSS Component Library | WindUI

Preline UI - Tailwind CSS component library

TailGrids: Tailwind UI Component Library, Kit and Templates