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 框架 - 掘金