使用Tailwind CSS的几个小Tips

前情

Tailwind CSS 是一个原子类 CSS 框架，它将基础的 CSS 全部拆分为原子级别。它的工作原理是扫描所有 HTML 文件、JavaScript 文件以及任何模板中的 CSS 类名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。Tailwind CSS 快速、灵活、可靠、没有运行时负担。自从接触了Tailwind CSS后，目前已经是我项目的标配了。

用了一段时间的Tailwind CSS，发现了一些使用注意Tips，知道这些小Tips可以让你使用Tailwind CSS更加顺利，同时对于新手减少入门的心智负担。

Tips内容

Tips 1：无所不能[]

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

<div class="w-[100px] h-[100px] text-[blue] font-[700] m-[10px] p-[10px] top-[10px] rounded-[10px] z-[999] bg-[green] border-[1px] border-[yellow] border-dashed shadow-[0_0_5px_rgba(0,0,0,.3)] ">
  中
</div>

体验链接：https://play.tailwindcss.com/MXx3AnIu4t

Tips 2：样式优先级控制!

<div class="w-[100px] h-[100px] bg-[green]" style="background-color:red">red</div>
<div class="w-[100px] h-[100px] !bg-[green]" style="background-color:red">green</div>

因Tailwind CSS是原子化CSS框架，它的优先级是相对比较低的，当遇到和别的样式冲突时，可以通过样式加!来提高样式优先级，我有一篇博文专门介绍Tailwind CSS等级提升的： Tailwind CSS样式优先级控制前情 Tailwind CSS 是一个原子类 CSS 框架，它将基础的 CSS 全 - 掘金 Tailwind CSS样式优先级控制 - ！win ！ - 博客园

体验链接：https://play.tailwindcss.com/T1UaU5b4yJ

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

<!-- 字体加粗font-来做的，不是text- -->
<div class="font-bold">font-</div>
<!-- 行高用leading- -->
<div class="leading-[32px] bg-[red]">line-height</div>
<!-- 字间距用tracking- -->
<div class="tracking-[10px]">tracking</div>
<!-- 单行溢出省略号用truncate -->
<div class="truncate w-[108px]">我们是明天的太阳，祖国的花朵，其实是牛马</div>
<!-- 多行省略号用line-clamp- -->
<div class="line-clamp-2 w-[108px]">我们是明天的太阳，祖国的花朵，其实是牛马</div>

上面这些样式名是我经常想不起来要查文挡的，个人觉得是比较生僻的，可以特殊记一下，其它原子化样式，都是比较好记的如flex、border-、text-、relative…，都是有一定关联的

体验链接：https://play.tailwindcss.com/RFUAGYVKwY

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

<!-- 二色渐变 -->
<div class="h-[30px] bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<!-- 三色渐变 -->
<div class="h-[30px] bg-gradient-to-r from-[green] from-10% via-[red] via-50% to-[yellow] to-90%"></div>
<!-- 鼠标hover,按下样式 -->
<div class="w-full h-[30px] bg-[red] hover:bg-[green] active:bg-[yellow]"></div>
<!-- 父级鼠标hover,按下，子孙元素样式 -->
<div class="w-full h-[60px] flex items-center group bg-[green]">
  <div class="w-full h-[30px] bg-[red] group-hover:bg-[green] group-active:bg-[blue]"></div>
</div>
<!-- 对于自定义背景图得用bg-[url()],背景尺寸的得需要使用bg-[length宽_高] -->
<div class="w-[100px] h-[100px] bg-[url('https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE')] bg-[length:100px_100px]"></div>

目前还没有找到渐变怎么实现超过三个的，如果有小伙伴知道，欢迎留言分享，谢谢

体验地址：https://play.tailwindcss.com/zBfuWpeR7f

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

我第一次知道Tailwind CSS是同事推荐的，在以前我有听过原子化CSS的概念，知道那要记很多样式，导致有一定的心理压力，所以一开始是排斥的，但直到自己使用后才发现，在使用Tailwind CSS的时候其实并没有特别大的心理压力。主要原因如下：

1. 大部分样式都很容易联想到，如文本：text-、背景：bg-、边框：border-、margin：m-、padding:p-，都是很容易理解的，甚至跟原始样式就有一定关系的,稍微用一用就记住了，实在想不想在官方文挡搜索很快也能找到答案
2. 用好官方的插件，你不需要记住太多，有一定印象输入首字母就会有对应的提示

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会导致冗长的样式名，目前我身边同事就很排斥，觉得没眼看
• 元素定位的不是特别方便，调试样式的时候，我很难通过样式名很快定位到元素在代码中位置
• 并不是原生支持，为了使用Tailwind CSS需要额外的配置

期望

上面只是个人在使用中发现的一些小Tips，如果你有好的Tips欢迎一起讨论，共同学习进步。

期待你的留言