Tailwind CSS

Tailwind CSS 是一种实用主义的 CSS 框架。它通过为 HTML 中的每个元素提供一组预设的实用的 CSS 类来实现快速的样式设置。

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

相比于传统的 CSS 框架，Tailwind CSS 的理念更加简洁。它不会给 HTML 元素默认应用任何样式。相反，它提供一系列的工具类，你可以根据需要选择性地将这些类应用到元素上,来构建你的样式。

一些 Tailwind CSS 的主要特点：

• 无需编写自定义 CSS，完全通过添加工具类来构建页面样式
• 响应式设计内置，通过 Screen 尾部的类名来设置不同屏幕尺寸的样式，如 sm: 、md: ，lg: 等
• 高度可定制化，可以通过修改配置文件完全定制 Token、颜色、字体等
• 支持purgecss 来移除未使用的 CSS，实现最终 CSS 文件的最小化
• 支持 PostCSS，可以使用各种 PostCSS 插件
• 与 JS 框架无关，可以在 React、Vue 或原生 HTML 中使用

举个简单的例子，如果你想一个 div 设置 padding、 text-center 和文本颜色，使用 Tailwind 可以这样写：

<div class="p-4 text-center text-blue-500">...</div>