掌握Tailwind CSS的小技巧

前情

Tailwind CSS是一款将基础CSS全部拆分为原子级别的框架。它通过扫描所有HTML、JavaScript和模板中的CSS类名来生成静态CSS代码，并自动写入一个文件中。

自从接触了Tailwind CSS后，我已经将其定为项目的标配。使用一段时间后，我发现了一些使用注意的小技巧，这些小技巧可以帮助我更顺利地使用Tailwind CSS，并减少新手的入门负担。

Tips内容

Tips 1：无所不能[]

Tailwind CSS虽然提供了很多基础样式如w-1、p-1、m-1等，但业务总是变化莫测。遇到基本样式无法满足需求时，可以自由定义符合自己需求的原子化样式名，我很少使用Tailwind CSS自带的原子化样式名。大部分尺寸和颜色通过[]来实现。

Tips 2：样式优先级控制!

Tailwind CSS的优先级相对较低，当与其它样式冲突时，可以通过使用!来提高样式优先级。我有一篇博文专门介绍了如何提升Tailwind CSS的等级。

Tips 3：一些比较生僻的原子化样式

这些样式名对我来说比较生僻，可以特意记住。其它原子化样式如flex、border-、text-等都是比较好记的。

Tips 4：一些使用上有一定技巧的原子化样式

目前还没有找到超过三个的渐变实现方法，如果有小伙伴知道，请留言分享。

Tips 5：用好官方文挡和插件

我第一次知道Tailwind CSS是同事推荐的。以前对原子化CSS概念有所了解，但知道那要记很多样式才感到有些压力。直到自己使用后才发现，在使用Tailwind CSS的时候并没有特别大的心理压力。主要原因是大部分样式都很容易联想到：如文本text-、背景bg-、边框border-、marginm-、paddingp-等都是很容易理解的，甚至跟原始样式有关系。稍微用一用就记住了，实在想不起来可以在官方文挡中搜索答案。

使用好官方插件可以帮助你记住更多，但不需要记住太多，有一定印象输入首字母就会有对应的提示。

VS Code插件地址：Tailwind CSS IntelliSense - Visual Studio Marketplace

HBuilderX插件地址：Tailwind CSS语言服务 - DCloud 插件市场。因为我在开发uni-app的项目中使用了这些插件，所以附上HBuilderX下的提示效果图。

WebStorm 自带对 Tailwind CSS 的提示功能，无需安装插件。

使用 Tailwind CSS 有很多好处：

首先，不用再费心去取样式名了，都是原子化的样式，随手拈来。

其次，项目CSS体积大大缩小，以前用样式名时，你会在不同地方重复书写同样的样式，现在全部都变成了一个原子化CSS。

最后，提高UI还原效率，原始开发方法经常要在样式和 HTML 间切来切去，很浪费时间，现在基本可以做到不离开 HTML 就还原出 UI。

理想的 Tailwind CSS 是完美的东西，但任何事物都有两面性。使用 Tailwind CSS 目前遇到的问题：

1. 使用 Tailwind CSS 会导致冗长的样式名，目前我身边有些同事就对此持反对态度，觉得没眼花缭乱。

2. 元素定位不是很方便，调试时很难通过样式名很快找到元素在代码中的位置。

并不是所有原生支持 Tailwind CSS，为了使用 Tailwind CSS 需要额外配置一些东西。