Tailwind CSS是什么？
Tailwind CSS是utility-first(功能类优先)的CSS框架，功能类优先是指在一组受约束的原始功能类的基础上构建复杂的组件，Tailwind CSS内置了很多CSS类，直接放在HTML class属性中，以代替CSS。
项目中安装配置Tailwind CSS很简单，这里不再赘述，看官网文档即可。使用Tailwind CSS后，我们不再去写内联样式或者css文件，而是在html标签的class属性中写一连串类名就行了。如图：
为什么使用Tailwind CSS？
最主要的我觉得有4个：
- 有利于样式维护，可以看看作者写的这篇文章，CSS Utility Classes and "Separation of Concerns"。
- 减少了命名负担，写的样式的时候不用花大量时间考虑class命名了，提高了工作效率。
- Tailwind CSS使用了JIT技术，使得打包出来的样式文件体积很小。
- 非常易用的设计系统API。可以很容易地适配任何设计系统。大型网站一般都有设计系统，设计系统就是一套design token和UI规范，design token限制了样式能用的值是在一个范围内甚至是枚举的。Tailwind CSS是有限的原子功能类集合，所以它天然切合设计系统。
Tailwind CSS 原理
Tailwind CSS设计的很巧妙，它在螺蛳壳里造道场，利用class属性就实现了整套css语法。 细心的你肯定想到了，class属性只是css众多选择器中的一个，css语法中还有类型、ID 选择器、属性选择器、伪类和伪元素、关系选择器、媒体查询等，那么Tailwind CSS是怎么实现的呢？
答案是变体，它满足css中class语法外的其他需求，比如伪类、伪元素。底层原理是Tailwind CSS是postcss插件，它可以利用postcss的能力，扫描到使用的变体，生成相应名称的功能类。 比如：伪类hover变体，语法为：
<button class="bg-sky-500 hover:bg-sky-700">
Save changes
</button>
其背后的功能类是：
.bg-sky-500 {
background-color: #0ea5e9;
}
.hover\:bg-sky-700:hover {
background-color: #0369a1;
}
变体分为固定变体和动态变体2种。
固定变体
固定变体的语法为：, 可以理解为条件语法，在满足条件的时候，对应的class才会生效。
使用变体后，你可以不用去关心css语法有哪些选择器，不用去记忆属性选择器、伪类和伪元素等等，你只要关心我想要用什么条件去匹配html元素。👀变体速查表
响应式
Tailwind CSS的响应式是通过响应断点变体，它是基于媒体查询的：
| Breakpoint prefix | Minimum width | CSS |
|---|---|---|
| sm | 640px | @media (min-width: 640px) { ... } |
| md | 768px | @media (min-width: 768px) { ... } |
| lg | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
| 2xl | 1536px | @media (min-width: 1536px) { ... } |
所有功能类都支持响应断点变体，例如：
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -|
<img class="w-16 md:w-32 lg:w-48" src="...">
动态变体
还有一种动态变体，作用是在万不得已的时候让你使用任意值的方式，语法为[], 例如：
<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
<!-- ... -->
</div>
甚至Tailwind CSS中没有对应css属性的类时，也能用[]
<div class="[mask-type:luminance]">
<!-- ... -->
</div>
甚至你想在class类中达到使用自定义选择器的效果
<ul role="list">
{#each items as item}
<li class="[&:nth-child(3)]:underline">{item}</li>
{/each}
</ul>
背后会生成相应的class
.\[\&\:nth-child\(3\)\]\:underline:nth-child(3) {
text-decoration-style: underline
}
Tailwind CSS类的记忆规律
Tailwind CSS就感觉学习了一遍英语，我们知道背英语单词其实是一件很痛苦的事情，所以很多人最后放弃了Tailwind CSS。最近我尝尝在思考有没有什么方式减轻记忆 Tailwind CSS的负担，遗忘的越慢我们才能真正的把Tailwind CSS用起来。
Tailwind CSS类是功能类，以功能去索引查询逐渐忘却css属性，才是 Tailwind CSS原汁原味食用方式。但是作为前端切图仔，我们实际工作中一般都是拿到了UI设计稿会有标注并且有css代码，即使某些情况下我们去抄别的网站的样式，通过浏览器devtools看到的也是css代码。所以实际工作场景中，我们需要做一次人肉转换，看到css代码 再将其转化为 Tailwind CSS类，当然有些UI工具已经不需要这层转换了，比如figma有Tailwind CSS插件，可以直接copy Tailwind CSS类而不是 css代码。
Tailwind CSS需要以class类表示样式，那么必然得用<名称>-<值>的形式才能表达出一个具体的css属性和属性值，当然有少数是名称就表达了css属性和属性值。我统计了Tailwind CSS的功能类，可以分为6个类别的<名称>-<值>形式。嫌麻烦的可以直接滚动到最后看记忆规律结论。
1. 属性值
| Class | Properties |
|---|---|
| block 等 | display: block; |
| static 等 | position: static; |
| visible 等 | visibility: visible; |
| isolate 等 | isolation: isolate; |
| antialiased 等 | -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; |
| italic 等 | font-style: italic; |
| ordinal 等 | font-variant-numeric: ordinal; |
| underline 等 | text-decoration-line: underline; |
| uppercase 等 | text-transform: uppercase; |
2. 前缀 + 属性值
3个单词属性名变2个单词做前缀，2个单词属性名变1个单词做前缀。
| Class | 举例 | Properties |
|---|---|---|
| aspect-{value} | aspect-square | aspect-ratio: 1 / 1; |
| columns-{number} | columns-1 | columns: 1; |
| break-after-{value} | break-after-auto | break-after: auto; |
| break-before-{value} | break-before-auto | break-before: auto; |
| break-inside-{value} | break-inside-auto | break-inside: auto; |
| box-decoration-{value} | box-decoration-clone | box-decoration-break: clone; |
| box-{value} | box-border | box-sizing: border-box; |
| float-{value} | float-right | float: right; |
| clear-{value} | clear-left | clear: left; |
| overflow-{value} | overflow-auto | overflow: auto; |
| overflow-x-{value} | overflow-x-auto | overflow-x: auto; |
| overscroll-{auto,contain,none} | overscroll-auto | overscroll-behavior: auto; |
| overscroll-x-{auto,contain,none} | overscroll-x-auto | overscroll-behavior-x: auto; |
| {top,right,bottom,left,inset}-{size} | inset-0 | inset: 0px; |
| z-{number} | z-0 | z-index: 0; |
| order-{number} | order-1 | order: 1; |
| gap-{size} | gap-0 | gap: 0px; |
| justify-{value} | justify-normal | justify-content: normal; |
| justify-items-{value} | justify-items-start | justify-items: start; |
| justify-self-{value} | justify-self-auto | justify-self: auto; |
| place-content-{value} | place-content-center | place-content: center; |
| place-items-{value} | place-items-start | place-items: start; |
| place-self-{value} | place-self-auto | place-self: auto; |
| whitespace-{value} | whitespace-normal | white-space: normal; |
| hyphens-{value} | hyphens-none | hyphens: none; |
| content-{value} | content-none | content: none; |
| bg-clip-{keyword} | bg-clip-border | background-clip: border-box; |
| bg-repeat-{keyword} | bg-repeat | background-repeat: repeat; |
| bg-origin-{keyword} | bg-origin-border | background-origin: border-box; |
| opacity-{percentage} | opacity-0 | opacity: 0; |
| mix-blend-{value} | mix-blend-normal | mix-blend-mode: normal; |
| bg-blend-{value} | bg-blend-normal | background-blend-mode: normal; |
| border-{collapse,separate} | border-collapse | border-collapse: collapse; |
| border-spacing-{size} | border-spacing-0 | border-spacing: 0px 0px; |
| table-{auto,fixed} | table-auto | table-layout: auto; |
| caption-{top,bottom} | caption-top | caption-side: top; |
| accent-{color} | accent-current | accent-color: currentColor; |
| cursor-{value} | cursor-auto | cursor: auto; |
| caret-{color} | caret-current | caret-color: currentColor; |
| pointer-events-{none,auto} | pointer-events-none | pointer-events: none; |
| scroll-{auto,smooth} | scroll-auto | scroll-behavior: auto; |
| touch-{value} | touch-auto | touch-action: auto; |
| will-change-{value} | will-change-auto | will-change: auto; |
3. 后缀 + 属性值
| Class | 举例 | Properties |
|---|---|---|
| start-{size} | start-0 | inset-inline-start: 0px; |
| end-{size} | end-0 | inset-inline-end: 0px; |
| basis-{size} | basis-0 | flex-basis: 0px; |
| grow-{number} | grow-0 | flex-grow: 0; |
| shrink-{number} | shrink-0 | flex-shrink: 0; |
| row-span-{number} | row-span-1 | grid-row: span 1 / span 1; |
| row-start-{number} | row-start-1 | grid-row-start: 1; |
| row-end-{number} | row-end-1 | grid-row-end: 1; |
| content-{value} | content-normal | align-content: normal; |
| items-{value} | items-start | align-items: flex-start; |
| self-{value} | self-auto | align-self: auto; |
| underline-offset-{size} | underline-offset-0 | text-underline-offset: 0px; |
| indent-{size} | indent-0 | text-indent: 0px; |
| align-{value} | align-baseline | vertical-align: baseline; |
| scale-{percentage} | scale-0 | transform: scale(0); |
| rotate-{angle} | rotate-0 | transform: rotate(0deg); |
| translate-x-{size} | translate-x-0 | transform: translateX(0px); |
| skew-x-{angle} | skew-x-0 | transform: skewX(0deg); |
| origin-{value} | origin-center | transform-origin: center; |
| select-{value} | select-none | user-select: none; |
4. 替换词
Tailwind CSS将一些属性中的单词进行了简写和替换。
| 简写 | 全拼 |
|---|---|
| m | margin |
| p | padding |
| t | top |
| r | right |
| b | bottom |
| l | left |
| x | left & right |
| y | top & bottom |
| s | inline-start |
| e | inline-end |
| px | 1px |
| col | column |
| full | 100% |
| min | min-content |
| max | max-content |
| fit | fit-content |
| screen | 100vw |
| leading | line-height |
| bg | background |
| rounded | border-radius |
| Class | 举例 | Properties |
|---|---|---|
| p{t,r,b,l,x,y,s,e}-{size} | p-0 | padding: 0px; |
| m{t,r,b,l,x,y,s,e}-{size} | m-0 | margin: 0px; |
| w-{size} | w-0 | width: 0px; |
| min-w-{size} | min-w-0 | min-width: 0px; |
| max-w-{size} | max-w-0 | max-width: 0rem; |
| h-{size} | h-0 | height: 0px; |
| min-h-{size} | min-h-0 | min-height: 0px; |
| max-h-{size} | max-h-0 | max-height: 0rem; |
| grid-cols-{number} | grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); |
| grid-rows-{number} | grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); |
| col-span-{number} | col-span-1 | grid-column: span 1 / span 1; |
| auto-cols-{size} | auto-cols-auto | grid-auto-columns: auto; |
| auto-rows-{size} | auto-rows-auto | grid-auto-rows: auto; |
| tracking-{size} | tracking-tighter | letter-spacing: -0.05em; |
| leading-{size} | leading-1 | line-height: .25rem; |
| scroll-m{t,r,b,l,x,y,s,e}-{size} | scroll-m-0 | scroll-margin: 0px; |
| scroll-p{t,r,b,l,x,y,s,e}-{size} | scroll-p-0 | scroll-padding: 0px; |
5. 多态
多态是指一种模式对应多个属性。
| Class | 举例 | Properties |
|---|---|---|
| object-{value} | object-contain | object-fit: contain; |
| object-{side} | object-bottom | object-position: bottom; |
| flex-{direction} | flex-row | flex-direction: row; |
| flex-{value} | flex-wrap | flex-wrap: wrap; |
| flex-{number} | flex-1 | flex: 1 1 0%; |
| font-{sans,serif,mono} | font-serif | font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; |
| font-{weight} | font-thin | font-weight: 100; |
| list-{value} | list-inside | list-style-position: inside; |
| list-{value} | list-disc | list-style-type: disc; |
| text-{size} | text-xs | font-size: 0.75rem; line-height: 1rem; |
| text-{side} | text-left | text-align: left; |
| text-{color} | text-black | color: rgb(0 0 0); |
| text-{ellipsis,clip} | text-ellipsis | text-overflow: ellipsis; |
| decoration-{color} | decoration-current | text-decoration-color: currentColor; |
| decoration-{value} | decoration-solid | text-decoration-style: solid; |
| decoration-{size} | decoration-0 | text-decoration-thickness: 0px; |
| bg-{attachment} | bg-fixed | background-attachment: fixed; |
| bg-{color} | bg-current | background-color: currentColor; |
| bg-{side} | bg-bottom | background-position: bottom; |
| bg-{auto,cover,contain} | bg-auto | background-size: auto; |
| border-{size} | border-0 | border-width: 0px; |
| border-{color} | border-black | border-color: rgb(0 0 0); |
| border-{value} | border-dashed | border-style: dashed; |
| outline-{size} | outline-0 | outline-width: 0px; |
| outline-{color} | outline-current | outline-color: currentColor; |
| outline-{value} | outline-dashed | outline-style: dashed; |
| outline-{size} | outline-offset-0 | outline-offset: 0px; |
| shadow-{size} | shadow-sm | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); |
| shadow-{color} | shadow-black | --tw-shadow-color: #000; |
| snap-{value} | snap-start | scroll-snap-align: start; |
| snap-{normal,always} | snap-normal | scroll-snap-stop: normal; |
| snap-{value} | snap-x | scroll-snap-type: x var(--tw-scroll-snap-strictness); |
6. 其他
| Class | 举例 | Properties |
|---|---|---|
| isolation-auto | isolation: auto; | |
| invisible | visibility: hidden; | |
| flex-1 | flex: 1 1 0%; | |
| flex-auto | flex: 1 1 auto; | |
| flex-initial | flex: 0 1 auto; | |
| grow | flex-grow: 1; | |
| shrink | flex-shrink: 1; | |
| order-first | order: -9999; | |
| order-last | order: 9999; | |
| order-none | order: 0; | |
| row-auto | grid-row: auto; | |
| row-span-full | grid-row: 1 / -1; | |
| gap-x-{size} | gap-x-0 | column-gap: 0px; |
| gap-y-{size} | gap-y-0 | row-gap: 0px; |
| subpixel-antialiased | -webkit-font-smoothing: auto; | |
| not-italic | font-style: normal; | |
| normal-nums | font-variant-numeric: normal; | |
| list-image-none | list-style-image: none; | |
| no-underline | text-decoration-line: none; | |
| normal-case | text-transform: none; | |
| truncate | overflow: hidden;text-overflow: ellipsis;white-space: nowrap; | |
| break-normal | overflow-wrap: normal;word-break: normal; | |
| break-words | overflow-wrap: break-word; | |
| break-keep | word-break: keep-all; | |
| inset-x-{size} | inset-x-0 | left: 0px;right: 0px; |
| inset-y-{size} | inset-y-0 | top: 0px;bottom: 0px; |
| line-clamp-{number} | line-clamp-1 | overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1; |
| bg-no-repeat | background-repeat: no-repeat; | |
| bg-gradient-{direction} | bg-gradient-to-t | background-image: linear-gradient(to top, var(--tw-gradient-stops)); |
| outline-none | outline: 2px solid transparent;outline-offset: 2px; | |
| outline | outline-style: solid; | |
| resize-y | resize: vertical; | |
| resize-x | resize: horizontal; | |
| resize | resize: both; | |
| snap-align-none | scroll-snap-align: none; |
总结
虽然Tailwind CSS有6种命名方式，看起来很多很杂，但是我们使用代码编辑器的时候，一般都有提示器可以极度减少记忆，比如vscode插件Tailwind CSS IntelliSense。Tailwind CSS命名占比最多的是前缀 + 属性值,多态也基本可以算作前缀 + 属性值，也就是当我们敲出属性名的前几个词的时候，一般能出现提示，如果没有则尝试后缀 + 属性值, 如果还没有出现提示则尝试属性值。最后替换词和其他，可以提前记忆一下，替换词大部分是常用的width、height、top等数量不多，其他大部分是容易命名冲突的属性默认值或者简化命名功能类。
