Tailwind CSS一些你需要记住的原子类

前情

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

使用Tailwind CSS有快二年了，有插件的支持和一些原子化类名本身就有一定语义在使用上还是比较流畅的，但是有一些原子化类名是我每次使用心里都会咯咚一下的，费此思索的，还有一些特殊原子类是可以简化实现效果的，今天整理总结一下并当复习了。

先小思考一下

为了加深印象，我们采用先问后解答的方式，你可以看一下如下这些CSS应该用什么原子化类名，如果你都能轻松答出来，那这篇文章余下内容你也就不用再往下看了，省点精力去做点更棒的事情吧。

设置元素宽高？
文字加粗和斜体？
设置文字行高？
设置文字间距？
单行超出省略？
多行超出省略？
设置图片背景？
设置背景图片尺寸？
设置盒子阴影？
调整transform变换基点？
怎么使用伪类？
怎么使用伪元素？

看一看这些特殊原子化类名

对于上面这些CSS效果，是我平时工作中常碰到的，也是我在初始使用Tailwind CSS时候感觉并不是特别顺畅的地方，我们一起看一看吧。

设置元素宽高？

设置宽可以使用w-，设计高可以用h-，其实Tailwind CSS有提供更便捷的方式

对于正方形你可以直接使用size- $100px$ ,它相当于你同时设置w- $100px$ h- $100px$
撑满父级的宽高，除了使用w- $100%$ ,你可以使用w-full，高度也是同理
对于铺满视口你可以使用w- $100vh$ ,你也可以使用w-screen，高度也是同理

文字加粗和斜体？

这也粗细也不是特别绕的原子化类名，但是因为在一开始字体大小颜色都是text-开头类名的时候，就容易混淆，这个特别留意一下即可，我基本也只会记font-bold/font-normal，对于其它的我是直接使用font- $500$ 这样来控制精细，顺便告诉你一个事，绝大部浏览器只能渲染出font-normal(font- $400$ )和font-bold(font- $700$ )，你正常按设计稿写即可，至于渲染成什么样那就交给浏览器了，优雅降级

文字斜体也就二个样式名**italic(斜体 )/not-italic(正常文本),**容易受text-/font-开头的原子化类名影响，其实是特殊的二个原子化样式名

设置文字行高？

CSS的行高样式是 line-height，但是Tailwind CSS里面设置行高是使用的leading-,例如leading- $1.5em$ /leading- $36px$ ,我遇到的第一个让我蒙的原子化样式就是这个，我是完全想不到与line-height有什么相关性，只能记住了

设置文字间距？

文字这一块第二个让我蒙的就是文字间距，因为CSS里设置文字间距是letter-spacing，但是Tailwind CSS里面设置文字间距是使用的**tracking-，例如tracking- $10px$ ，**我第一时间想到的是输入letter好让插件带出来，但是并没有，感觉只能记住了

单行超出省略？

我开始使用Tailwind CSS实现单行省略的时候都是使用几个原子化类别组合来实现的,后面才发现它有提供一个组合的原子类名叫做**truncate，**你只需要设置一下宽度即可实现单行的文本省略了

多行超出省略？

我一开始是添加一个类名，使用标准的CSS去实现的，也是后来才发现有现成的类名：line-clamp-1~line-clamp-6 ，如果你想自由指定多行那就用line-clame- $行数$

设置图片背景？

设置背景颜色是bg-color，设置图片是bg- $url('../static/example.webp')$

设置背景图片尺寸？

有提供bg-cover/bg-contain，这些都是一些自适应的不太可控的设置背景图片尺寸，我们有时间需要按自己要求的尺寸，那就用它bg- $length:750px_auto$

设置盒子阴影？

有提供一些现成的阴影的样式，但是对于前端各式各样的效果有些力不从心，依靠shadow- $0_35px_60px_-15px_rgba(0,0,0,0.3)$ 可以随心所欲定制你阴影效果

调整transform变换基点？

默认有提供一些特殊位置的变换基点原子化类名，如：origin-center/origin-top-right等等，但是如果想设置具体的数据就得使用origin- $33%_75%$

怎么使用伪类？

最常用的就是a标签的4个伪类，如link/visited/hover/active，一种是自身的伪类，一种是父级触发伪类修改子孙元素的样式

html 复制代码

	<!-- 自身伪类 -->
  <button class="bg-violet-500 hover:bg-[red] focus:bg-[green] active:bg-[blue] ...">
    Save changes
  </button>

  <!-- 父级伪类 -->
  <a href="#" class="group ...">
      <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
    </div>
    <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
  </a>

体验地址：play.tailwindcss.com/NRl6HgORQT

怎么使用伪元素？

伪元素用的最多的就是::before/::after,使用示例如下

html 复制代码

<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
    Email
 </span>

总结

本文收集了我平时使用Tailwind CSS开发项目，遇到的一些不太好理解的原子类，希望能对于正在准备入手或者已经在使用的人有一些小帮助；其实遇到真想不起来的也没必要不爽，那就大胆查文挡吧，对于使用Tailwind CSS实现比较复杂，你写常规CSS也不会冲突的，重要的实现项目需求。

如果你在使用中有其它更好的一些小发现，也不吝分享出来，一起学习一起进步。

温馨提示：用好官方文挡和插件

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

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

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

HBuilderX插件地址：Tailwind CSS语言服务 - DCloud 插件市场。因为我写这篇文章的时候正在开发uni-app的项目，附上HBuilderX下的提示效果图

WebStorm默认就支持Tailwind CSS提示，无需安装插件