tailwindcss 从0到1

Posted 2023-03-21

参考技术A Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex , pt-4 , text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计

[图片上传失败...(image-475de9-1636387074601)]

个人总结 tailwind css 功能主要包括三部分：

tailwind css 提供了一套以移动优先的，响应式样式类, 类似原bootstrap 可直接使用

[图片上传失败...(image-87b874-1636387074601)]

tailwind css 为处理响应式，伪类， 伪元素提供类型作用范围限定类

样式扩展，使我们能组合现有基础类或定义自己的样式类.

通过 taildwind.config.js 配置文件，能实现更多自定义功能

配置主要分为：

tailwind css 提供的预设类很多，一般根据官方文档，按照功能查询所需的类名。

总结几条规则：

个人觉得 tailwind css 的主要优势在于提供了一套自定义样式模板的工具，并有一个完整的可扩展的基础示例 预设样式 。

非常适合有UI设计体系或要求统一UI视觉的产品, 通过组合基础样式模板，统一样式规范，提高编写效率。

如果UI本身就没有统一规范的化，还是内联样式文件来的灵活些。

这一套有点像组件库为了可配置主题而抽离出来的组件样式变量。

官方文档