使用原子类
这篇笔记我们简要介绍TailwindCSS原子类的基本使用，以对TailwindCSS框架的用法和原子类的命名规则有一个基本认识。不过我们这里不会把TailwindCSS的官方文档完全抄一遍，我们实际开发中还是要结合官方文档，遇到不知道如何实现或没见过的类名要随时查询，这才是TailwindCSS的正确使用方式。
元素大小
宽和高
TailwindCSS中，元素大小使用w-、h-等原子类（即width、height的缩写）表达，对于min-width、max-height等属性，则使用min-w-、max-h-等对应写法，此外也支持w-full等写法，表达width: 100%等特殊样式。下面例子中我们创建了一个宽2rem、高1rem的<div>，为了便于观察，我们还将其背景颜色设置为了浅红色。
<div class="w-8 h-4 bg-red-300"></div>
这里我们可能会有疑问，为什么4表示1rem，这是什么换算关系？这是因为TailwindCSS使用0.25rem作为1个单位长度，假设根元素字体大小为16px，那么1单位长度也是4px。至于为什么这样设计，是因为这是一种最佳实践，方便开发者控制元素的间距和尺寸。
横纵比
我们可以用aspect-表达元素横纵比。
<div class="w-96 aspect-video bg-red-300"></div>
我们这里使用的aspect-video是个比较特殊的值，它实际上设置了16:9的横纵比，常用于视频，因此起名video。更通用的方式是给定值aspect-[16/9]，其中的比例可以是任意数字。
布局
浮动布局
浮动布局使用float-前缀的原子类表达，下面例子实现了让一个图片向左浮动。
<img src="1.png" class="w-24 float-left" />
<p>（大段文字内容）</p>
Position设置
TailwindCSS提供了static、relative、absolution、fixed等原子类，表达CSS中的position属性。下面例子编写了一个固定在页面右下角的按钮。
<div class="w-16 h-16 bg-red-300 rounded-full fixed bottom-16 right-16 flex items-center justify-center text-4xl font-bold text-white">+</div>
我们关注fixed这个类，代码中它配合bottom-16、right-16使用，表示该元素是悬浮的不随页面卷动的，并且距离底部和右侧都是4rem。
Columns
Columns用于实现固定的分列效果，下面例子实现等分成4列的<div>。
<div class="columns-4">
<div class="w-full h-8 bg-red-300"></div>
<div class="w-full h-8 bg-blue-300"></div>
<div class="w-full h-8 bg-green-300"></div>
<div class="w-full h-8 bg-yellow-300"></div>
</div>
列间距可以用gap-指定，默认值是gap-4。
<div class="columns-4 gap-4"></div>
Flex布局
对应CSS的Flex布局，TailwindCSS也封装了一系列的原子类简化布局的编写。下面例子比较复杂，如果对Flex布局不熟悉可以参考CSS相关章节。
<div class="container mx-auto mt-4 flex flex-wrap gap-y-4 justify-start align-top">
<div class="w-1/3 h-8 bg-red-300"></div>
<div class="w-1/3 h-8 bg-blue-300"></div>
<div class="w-1/3 h-8 bg-green-300"></div>
<div class="w-1/3 h-8 bg-yellow-300"></div>
<div class="w-1/3 h-8 bg-purple-300"></div>
</div>
代码中，flex表示使用Flex布局，flex-wrap表示允许换行，gap-y-4用于设置纵向间隔，justify-start和align-top指定了排列的方式。在Flex布局内部的元素上，我们创建了5个长度为width: 33.33%的<div>，并设置了其高度和背景颜色，这些<div>将根据Flex布局容器指定的参数进行自动排列。
Grid布局
类似Flex布局，TailwindCSS中对应CSS的Grid布局也提供了很多原子类。Grid和Flex在功能上有一定的重合，但Grid能够很轻松实现栅格布局，配置上比Flex更少，因此也十分常用，不过Grid布局是CSS中非常新的特性，可能很多开发人员未曾听说过，大多数人可能更习惯用Flex布局。
<div class="container mx-auto mt-4 grid grid-cols-3 gap-x-8 gap-y-4">
<div class="h-8 col-span-2 bg-red-300"></div>
<div class="h-8 bg-blue-300"></div>
<div class="h-8 bg-green-300"></div>
<div class="h-8 bg-yellow-300"></div>
<div class="h-8 bg-purple-300"></div>
</div>
代码中，我们创建了一个3列的栅格布局，grid表示使用Grid布局，grid-cols-3表示为3列栅格，gap-x-8和gap-y-4设定了横纵间距。内部的元素中，第一个div的col-span-2指定了该元素跨越两个列。
内外边距
TailwindCSS中，Padding内边距都以p开头命名，Margin外边距都以m开头命名。x表示同时设置左右边距，y表示同时设置上下边距，l、r、t、b则分别是对左右上下边距的单独设置。下面例子中，我们创建了一个左边距2rem，上边距1rem，内边距1rem的<div>。
<div class="ml-8 mt-4 p-4 bg-red-300">Hello, TailwindCSS!</div>
文字排版
在学习TailwindCSS的字体设置前，我们需要补充一点知识。字体可以分为Serif衬线字体、Sans-Serif非衬线字体、Mono等宽字体这几种，TailwindCSS基于这种分类提供了几个原子类：
font-sans：对应CSS为font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-serif：对应CSS为font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-mono：对应CSS为font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
此外对于中文渲染还有一点比较尴尬，TailwindCSS的默认设置可能导致中文的渲染效果较差，不过我们可以覆盖默认的字体原子类。下面例子中，我们仿照国内网站“简书”的字体设置，覆盖了默认的非衬线字体原子类。
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.html"],
theme: {
extend: {
fontFamily: {
"sans": ['"lucida grande"', '"lucida sans unicode"', 'lucida', 'helvetica', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"WenQuanYi Micro Hei"', 'sans-serif'],
},
},
},
plugins: [],
}
设置字体和样式
TailwindCSS提供了很多font-和text-开头的CSS类用于简化文字相关的设置。
<p class="text-lg subpixel-antialiased font-bold text-gray-700">我能吞下玻璃而不伤身体</p>
代码中，text-lg会同时设置字体和line-height，subpixel-antialiased是一个抗锯齿设置，font-bold表示使用加粗字体，text-gray-700指定了字体的颜色。
段落排版
TailwindCSS对常用的段落排版进行了封装，我们直接看一个例子。
div class="container mx-auto mt-8">
<div class="w-1/4 p-4 rounded border-solid border-2 border-gray-600 shadow-md">
<h3 class="text-lg font-bold">这是一个标题</h3>
<p class="text-gray-700 indent-8 line-clamp-3">我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体我能吞下玻璃而不伤身体</p>
</div>
/div>
代码中我们实现了一个类似卡片的效果，indent-8表示段落开头空格2rem，line-clamp-3表示文字最多展示3行，超出将截断并显示省略号。
背景
TailwindCSS封装了常用的背景设置属性，比如背景颜色、背景图片、背景的拉伸和平铺模式等。
下面代码设置<div>的颜色为浅红色。
<div class="bg-red-300 w-1/3 h-4"></div>
下面例子我们设置了一个渐变色。
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 w-1/3 h-4"></div>
下面例子我们设置了<div>使用图片作为背景，bg-cover指定让背景图片尽量覆盖容器，bg-center指定让背景图片居中。
<div class="w-96 h-64 bg-cover bg-center" style="background-image: url(bg.webp);"></div>
边框
TailwindCSS封装了边框常用的属性，下面我们以例子的形式进行介绍。
<div class="w-1/6 h-8 rounded border-4 border-solid border-purple-300"></div>
代码中，我们设置了圆角边框，边框的粗细为4px，实线边框，以及边框颜色。
特效和滤镜
下面例子我们设置了阴影。
<div class="w-1/6 h-8 rounded shadow-md"></div>
代码中我们设置了shadow-md表示使用中等大小的阴影，此外还可以设置shadow-lg、shdow-xl等。可以看到，TailwindCSS的审美还是很在线的，我们自己设置的阴影如果不由UI设计师调整一番参数，可能是比较丑的，而TailwindCSS的默认值就是比较美观的。
下面代码我们设置了透明度。
<div class="w-1/6 h-8 rounded bg-purple-400 opacity-85"></div>
opacity-85表示透明度为0.85。
下面代码我们使用了透明和滤镜特效，实现了一个类似毛玻璃导航条的效果。
<body class="bg-fixed bg-center" style="background-image: url(bg.webp);">
<div class="w-full h-16 bg-white bg-opacity-15 flex justify-start align-middle backdrop-blur-sm">
<h3 class="text-3xl m-auto pl-4">我的网站</h3>
<div class="flex-grow"></div>
</div>
</body>
代码中，bg-white和bg-opacity-15配置了使用白色背景，且背景色的透明度为0.15，如果使用原生CSS则需要采用RGBA的格式进行定义。此外backdrop-blur-sm设置了针对背景层的模糊特效。
动画
TailwindCSS对常用的动画效果进行了封装，下面是一些例子。
<button class="ease-in-out duration-150 bg-blue-400 shadow-sm hover:bg-blue-300 hover:shadow-md p-4 rounded text-white">点我</button>
代码中我们编写了一个带动画的按钮，它在鼠标悬浮（hover）时有不同的颜色和阴影设置，这形成了一个过渡特效。ease-in-out是动画插值设置，duration-150表示动画持续时间为150ms。
animate-spin能够实现转圈动画。
<img src="circle-notch-solid.svg" class="animate-spin" />
animate-ping的效果如下。
<div class="relative">
<div class="w-4 h-4 bg-blue-300 rounded-full relative left-0 top-0"></div>
<div class="w-4 h-4 bg-blue-400 rounded-full animate-ping absolute left-0 top-0 opacity-75"></div>
</div>
animate-pulse的效果如下。
<div class="w-1/6 h-8 bg-purple-300 animate-pulse"></div>
animate-bounce的效果如下。
<button class="px-4 py-2 shadow-sm bg-purple-300 text-white animate-bounce">↓点击显示内容↓</div>
伪类
TailwindCSS中，可以使用hover:、focus:、active:设置HTML控件处于不同状态下的样式，前面我们已经使用过了。
<button class="ease-in-out duration-150 bg-blue-400 shadow-sm hover:bg-blue-300 hover:shadow-md p-4 rounded text-white">点我</button>
上面代码实现的按钮中，在鼠标悬浮状态下，改变了颜色和阴影。