6. Tailwind CSS | NotionNext帮助手册

前言

TailwindCSS 是一个很棒的CSS类库，与其说是类库，不如说是一个超大的样式类工具集合，如果你掌握甚至习惯了 Tailwind 的语法。你会爱上它的。

每个月 npm 下载量高达 800 万次，jsDelivr 下载量高达 1000 万次，Star 数也突破 40K，依赖于它的 Packge 及 Github Repo 更是成千，足见其受欢迎程度。然而你需要使用它时，Node 的版本最好大于 12.13.0

TailWindCSS的粒度

越往下走，颗粒度越来越大，约束性变高，自由性不足。而 TailwindCSS 位于第二层。

上一代css框架是提供完整的设计输出，是组件级别，位于第四层，颗粒度大、约束性高，自由性不足。例如一个<Input>组件，框架已经帮你写好了所有样式，你只要把类名丢进去，一个input就被美化了。当然bootstrap还提供了sass版本，你可以通过修改变量来实现自定义，但毕竟自定义空间不大。

Tailwind提供的是设计规范，相当于理念层面的素材。比如还是input组件，你需要首先对input进行拆解，它的边框、字体、阴影、圆角等等，你要从框架里面把这些元素挑出来进行组合。

这样做极大的激发了设计师的创作想象力，也为设计师编程提供可能。

优点

庞大的样式类声明

Tailwind 提供大量的样式类声明，使得我们在编写页面样式的时候，基本可以不用写一行 style 就能实现大部分场景，比如我们有一个div，想通过 flex 布局实现垂直居中功能，我们需要编写如下CSS：

使用 Tailwind CSS 只需在元素 class 上声明如下：

便捷的响应式

要实现不同分辨率屏幕下的样式，只需要在样式前加上对应的断点前缀：

小巧轻量

生产版本的库大小只有8.7kb

简化代码

举一个完整的例子，你可能需要实现下面这样一个效果：

按照我们正常的写法，需要这样写:

但是使用Tailwind CSS，你只需要这样写就可以:

Visual Studio Code 插件支持

安装了插件后，即可体验飞快的开发

官方生态

组件参考

Tailwind CSS Components. Examples and templates

Tailwind CSS examples from components by the community. Tailwind chart, grids, inputs, forms, templates and much more

https://tailwindcomponents.com/

Tailwind CSS Components. Examples and templates

Tailwind CSS Components - Tailwind UI

Beautiful UI components and templates by the creators of Tailwind CSS.

https://tailwindui.com/components

内置颜色参考

Customizing Colors - TailwindCSS中文文档 | TailwindCSS中文网

Customizing the default color palette for your project.

https://www.tailwindcss.cn/docs/customizing-colors

Customizing Colors - TailwindCSS中文文档 | TailwindCSS中文网

总结

未来的css框架趋势必然是：更细化，更工程化。

它的美化效果不一定是最好的。但是它的这种工作方式，定会在不同公司得到发挥，特别是有统一设计团队，要统一UI的公司。对于这些公司而言，写好设计规范，接下来就是拼凑。如何设计师直接通过组合得出效果，对研发人员来说也节省了时间。

TailwindCss 相关资源

官方文档

中文文档 - Tailwind CSS 中文文档

Tailwind CSS 是一个功能类优先的 CSS 框架，它由 Adam Wathan 创建。本站提供 Tailwind CSS 官方文档中文翻译致力于为广大国内开发者提供准确的中文文档，助力开发者掌握并使用这一框架。

https://www.tailwindcss.cn/docs

题外-Tailwind CSS: 从副业产品到2百万美元的故事

我是 Adam Wathan，Tailwind CSS的发明者。

2020年7月份，Tailwind 的总安装量突破了1千万次，这让我非常惊讶。

我们从Tailwind UI中获得200万美元的收入，这是我们第一个商用的Tailwind CSS产品，是在第一个Tailwind CSS版本发布两年之后。

原文链接

Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business

This was originally posted as a thread on Twitter, but I thought I'd republish it here to give it a proper home. So about a month or so ago, Tailwind cracked 10 million total installs, which given its humble beginnings, completely blows my mind.

https://adamwathan.me/tailwindcss-from-side-project-byproduct-to-multi-mullion-dollar-business/

Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business

中文

独立开发变现周刊（第47期）：Tailwind CSS 从副业产品到2百万美元的故事

https://mp.weixin.qq.com/s/0Osip1_vIWu84Ux2G9CshA