Tailwind CSS
目录
引入原因：
css增长，样式错乱
调试
规范：在class上原子化css
特点：把class当行内style动态属性用
优点
不用命名样式
不用想并不重要的CSS变量名
缺少命名逻辑
不用撰写维护和模板【对应的独立css块】
不用不停滚动屏幕切换鼠标光标位置【vue】
打包后的css文件占用空间变小：因为在class上原子化css
CSS文件占比小（几kb），不用优化
插件：自带各种类名提示
类型长且重复多次： @layer @apply指令扩展
编辑
类名的命名规则
参考链接
安装 - TailwindCSS中文文档 | TailwindCSS中文网
中文更友好：
Tailwind CSS 中文网
扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件
引入原因：
css增长，样式错乱
多个 class 里都包含了类似的样式，但你需要写多次，css 会一直增长
css 没有模块作用域，所以可能你在这里加了一个样式，结果别的地方样式错乱了。
调试
在 chrome devtools 里可以直接看到有啥样式，而且样式之间基本没有交叉，很容易调试：
之前写法容易多个 class 的样式相互覆盖，还要确定优先级和顺序
规范：在class上原子化css
「Atomic/Utility-First CSS」是和「Semantic CSS 」(语义化 CSS ) 相对的一种 CSS 规范。
原子 class 样式是只是作用在某个 html 标签的
特点：把class当行内style动态属性用
优点
不用命名样式
不用想并不重要的CSS变量名
缺少命名逻辑
不用撰写维护和模板【对应的独立css块】
不用不停滚动屏幕切换鼠标光标位置【vue】
打包后的css文件占用空间变小：因为在class上原子化css
CSS文件占比小（几kb），不用优化
插件：自带各种类名提示
插件名：Tailwind CSS IntelliSense
类型长且重复多次： @layer @apply指令扩展
类名的命名规则
1.布局类：
2.flex: 相当于 display: flex;
3.grid: 相当于 display: grid;
4.justify-between: 相当于 justify-content: space-between;
5.items-center: 相当于 align-items: center;
6.间距和尺寸类：
7.m-4: 相当于 margin: 1rem;
8.p-2: 相当于 padding: 0.5rem;
9.w-1/2: 相当于 width: 50%;
10.h-8: 相当于 height: 2rem;
11.文本和颜色类：
12.text-lg: 相当于 font-size: 1.125rem;
13.text-blue-500: 相当于 color: #4299e1;
常见的文本大小类：
text-xs: 额外小text-sm: 小text-base: 基础（默认大小）text-lg: 大text-xl: 额外大text-2xl: 双倍额外大text-3xl: 三倍额外大text-4xl: 四倍额外大text-5xl: 五倍额外大text-6xl: 六倍额外大
rounded-sm: 小圆角，比较小的圆角样式。rounded: 中等圆角，是默认的圆角样式。rounded-md: 中等圆角，稍大于默认圆角。rounded-lg: 大圆角，相对较大的圆角样式。rounded-xl: 非常大的圆角，比rounded-lg更大。rounded-full: 完全圆角，将元素变成圆形。
14.响应式类：
15.lg:flex: 在大屏幕上应用 flex 样式。
16.sm:w-full: 在小屏幕上应用 width: 100%; 样式。
Tailwind CSS 的类名遵循一种基于功能和直观的命名规律。以下是一些常见的规律：
1.基础形式： 类名通常由一个或多个单词组成，描述了一个具体的样式或功能。
<!-- 示例：字体大小 -->
<p class="text-lg">This is a paragraph.</p>
2.缩写： 为了简化和提高可读性，Tailwind 使用缩写形式的类名。
<!-- 示例：边距和内边距 -->
<div class="m-4 p-2">Content</div>
3.组合类名： 你可以组合多个类名以应用多个样式。
<!-- 示例：组合类名 -->
<div class="flex items-center space-x-4">
<!-- ... -->
</div>
4.变体类名： 使用响应式前缀和状态类名可以根据屏幕大小或状态应用样式。
<!-- 示例：响应式和状态类名 -->
<div class="lg:flex hover:bg-gray-200">
<!-- ... -->
</div>
5.颜色和尺寸： 颜色和尺寸类名通常包含有关样式的信息。
<!-- 示例：颜色和尺寸类名 -->
<button class="bg-blue-500 text-white p-2">Click me</button>
总体而言，Tailwind CSS 的命名规律强调清晰、简洁和功能导向。这种直观的命名风格使得在 HTML 文件中阅读和理解样式更加容易。
参考链接
TailwindCSS的使用，看这一篇就够了！ - 掘金
一次就能看懂的Tailwind CSS介绍 - 掘金
UnoCSS给了我一个不用tailwindcss的理由 - 掘金
为什么真的有人讨厌 TailWindCSS ? - 掘金
快速掌握 Tailwind：最流行的原子化 CSS 框架 - 掘金