原创 向阳花168 2024-12-07 09:03 重庆
点击关注公众号，“技术干货” 及时达！
❝逆熵而行，向阳而生，我是向阳花！继前一篇《TailwindCSS最全实际指南-环境篇》之后，本文是此系列第二篇文章-样式篇，此系列文章共分为：
「环境篇」：
包括Tailwind简介、·tailwindcss的优势、如何快速创建项目、turbopack简介及优势、TailwindCss相关插件（官方插件和类名排序插件的用法，以及其它特殊场景如何做排序，包括clsx类名拼接额外知识拓展等）、已有css知识体系如何快速跟TailwindCss做关联等等「样式篇-上」：如何使用
系统预设样式?、如何自定义样式?、宽高、如何撑满容器屏幕？和如何撑满设备屏幕？、如何定义视口安全高度？、如何定义视口布局高度？和如何定义动态视口高度？、尺寸size-xx、边距（margin、padding、space）、边框（border、divide、outline）、字体相关（大小、样式、加粗、字符间距、行高）、文本排版（对齐方式、颜色、超出时的处理方式、换行、空白字符的处理）等等，还会包含一些容易忽略的css知识点。每个案例都「附加源码与效果展示」，主打一个让你不用实操一学就会！「样式篇-下」：下篇我们一起来学习
布局、Flexbox、Grid以及TailwindCss的核心功能-如何定制？「答疑篇」：会整理一些TailwindCss使用过程中常见的一些踩坑点及解决方案、比如
TailwindCss跟unocss的区别、如何覆盖默认的尺寸让1单位值不等于4px？听闻tailwindcss 会明显降低vite 热更新的速度?？等等，如果你使用过程中也碰到了有趣的问题，也可以评论区一起交流 ☕️。⚠️ 学前必知 ⚠️
本系列文章所有案例项目中，TailwindCss版本是
3.4.1，Next框架版本为15.0.3如果你也想跟我一起从0-1体验一下Tailwindcss，但又嫌创建项目麻烦，可通过官方的 Playground在线快速体验。
⚠️ 学前必会 ⚠️
系统预设默认样式值的最小值或者我们可以将其理解为“步长”为1(如下图)，代表
❞0.25rem，对应4px，如果想用其它数值就可以随意自定义了，具体如何自定义下文会介绍。
废话不多说我们直奔主题开启TailwindCss的体验之旅~
宽高
基础宽高
使用系统预设宽高：w-xx、h-xx
其中w表示宽度，h表示高度，h-14表示高度为3.5rem，对应56px；同理，w-52则表示宽度为13rem，对应208px
如何自定义其它数值？
可以使用方括号[]自定义任意数值，比如px、rem、em等。
❝关于
❞em和rem的区别相信无需我多言吧？rem是相对于根元素(html)的，em是相对于其父元素的，比如上述例子中我将他们的父元素特意设置成了14px，根元素为16px，所以此时8rem就不等于8em了（效果如上图）。
如何自定义百分比数值？
我们可以使用w-分子/分母、h-分子/分母表示
w-full和w-screen
w-full和w-screen分别表示撑满容器的100%和撑满设备屏幕的100%，其中w-screen相当于100vw
h-svh、h-lvh、h-dvh
h-svh 表示100svh，代表视口安全高度
「优势」：在移动设备上，浏览器的地址栏等界面元素可能会在用户滚动或与页面交互时出现或隐藏，这会导致视口高度发生变化。使用100svh可以让元素（如一个全屏的容器）在这种动态变化的环境中，尽可能地占满可视的安全区域，避免出现因为视口高度变化导致布局混乱的情况
h-lvh 表示 100lvh，代表布局视口高度
「优势」：例如，一个具有固定头部和底部导航栏的页面，中间内容区域希望能够填满剩余的布局视口高度，可以将中间内容区域的高度设置为100lvh，减去头部和底部导航栏的高度，这样可以保证内容区域在布局视口内的高度布局符合预期
h-dvh 表示 100dvh，代表动态视口高度
「优势」：在一些具有复杂交互的网页应用中，如表单页面，当软键盘弹出时，视口高度会发生变化。使用100dvh可以让页面的某些元素（如表单下方的提示信息区域）能够根据动态变化的视口高度自动调整大小，保证在软键盘弹出和隐藏等各种状态下，页面布局依然能够保持合理的显示效果
上述是视口高度相关的介绍，当然视口宽度也是一样的。
最大、最小宽高
min-w-[] 和max-w-[] 分别表示最小和最大宽度，min-h-[] 和max-h-[] 分别表示最小和最大高度
以max-w-52为例，代表最大宽度13rem，208px
尺寸size
通过size可快速创建一个指定宽高的正方形元素
❝⚠️注意⚠️ 部分低版本可能并没有这个属性，我使用的案例TailwindCss版本是
❞3.4.1
边距
margin
padding
space
写过React框架antd项目的同学一定非常清楚，space代表间距。具体值有space-x-xx和space-y-xx，分别表示x和y两个方向的间距，值会根据所选自动计算。
边框
border
❝⚠️ 注意 ⚠️
❞
如果直接写
border-t则表示border-top-width: 1px，下边框同理如果直接写
border则表示border：1px
定义线宽
| border | border-width: 1px |
|---|---|
| border-xx | 4个方向的border均为xx |
| border-t | border-top-width: 1px |
| border-t-xx | border-top-width: xx |
| border-b-xx | border-bottom-width: xx |
| border-l-xx | border-left-width: xx |
| border-r-xx | border-right-width: xx |
| border-x-xx | border-right-width: xx; border-left-width: xx; |
| border-y-xx | border-top-width: xx; border-bottom-width: xx |
定义线颜色: border-色系-色值
定义线类型
| border-solid | border-style: solid |
|---|---|
| border-dashed | border-style: dashed |
| border-dotted | border-style: dotted |
| border-double | border-style: double |
自定义线弧度
| rounded | border-radius: 0.25rem; /* 4px */ |
|---|---|
| rounded-md | border-radius: 0.375rem; /* 6px */ |
| rounded-lg | border-radius: 0.5rem; /* 8px */ |
| rounded-full | border-start-start-radius: 9999px; border-end-start-radius: 9999px; |
divide
定义水平方向或者垂直方向元素的border值，举例：
| divide-x | border-right-width: 0px => border-left-width: 1px; |
|---|---|
| divide-x-2 | border-right-width: 0px; => border-left-width: 2px; |
| divide-y | border-top-width: 1px; => border-bottom-width: 0px; |
| divide-y-2 | border-top-width: 2px; => border-bottom-width: 0px; |
以水平方向举例如下，垂直方向同理。想起之前给多个元素定义边框还需手动出来重叠，这种方式是真香?
outline
定义元素轮廓，适用于button按钮等场景，可快速为元素添加类似border带圆角的效果，可自定义outline的颜色、宽度、偏移等。
文本排版
字体
FontSize
具体取值如下:
| text-xs | font-size: 0.75rem /* 12px /;line-height: 1rem / 16px */; |
|---|---|
| text-sm | font-size: 0.875rem /* 14px /;line-height: 1.25rem / 20px */; |
| text-base | font-size: 1rem /* 16px /;line-height: 1.5rem / 24px */; |
| text-lg | font-size: 1.125rem /* 18px /;line-height: 1.75rem / 28px */; |
| text-xl | font-size: 1.125rem /* 18px /;line-height: 1.75rem / 28px */; |
FontStyle
定义文本倾斜效果，值为italic和not-italic，默认not-italic
FontWeight
定义字体加粗效果
字符间距tracking定义字符间的间距
使用及效果如下图：
行高
❝⚠️ 注意 ⚠️
除了具体数值以外，其它行高数值诸如
❞1.25、1.5代表的都是「比例因子」，代表行高是字体大小的倍数，这么定义的优势是拥有继承特性且能实现按比例变化的响应值。
对应具体数值如下：
| leading-xx | line-height: xxrem |
|---|---|
| leading-none | line-height: 1 |
| leading-tight | line-height: 1.25 |
| leading-snug | line-height: 1.375 |
| leading-normal | line-height: 1.5 |
| leading-relaxed | line-height: 1.625 |
| leading-loose | line-height: 2 |
代码书写及对应效果如下：
Text文本
文本对齐方式-TextAlign
| text-left | text-align: left |
|---|---|
| text-center | text-align: center |
| text-right | text-align: right |
| text-justify | text-align: justify |
| text-start | text-align: start |
| text-end | text-align: end |
文本颜色-TextColor
使用系统预设色系 text-色系-色值
TailwindCss为我们提供了一系列丰富的可选配色色系，可先根据需求选择大概色系，比如blue、grey、pink、green等，然后再选择色值
自定义颜色值
如果系统预设色值不够精确无法满足需求，可通过text-[#xxx]随意输入指定色值
TextOverflow
表示文本内容超出时的展示方式，内部也集成了我们最常见的设置文本超出时变成省略号的样式，具体取值如下：
| truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
|---|---|
| text-ellipsis | text-overflow: ellipsis; // 当内容超出时展示省略号 |
| text-clip | text-overflow: clip; // 当内容超出时裁剪掉 |
文本换行 text-wrap
具体的取值如下：
| text-wrap | text-wrap: wrap; | 换行 |
|---|---|---|
| text-nowrap | text-wrap: nowrap; | 不换行 |
| text-balance | text-wrap: balance; | 平衡的换行，使每一行字符长度尽可能均匀 |
| text-pretty | text-wrap: pretty; | 不仅考虑平衡，还要考虑字符间距实现美观,比如避免末尾出现孤立的单个字符，更适合对排版要求比较高的场景比如新闻网站 |
空白字符whiteSpace
| whitespace-normal | white-space: normal; | 多余空白字符合并为1个 + 根据文本响应式换行 |
|---|---|---|
| whitespace-nowrap | white-space: nowrap; | 多余空白字符合并为1个 + 不换行 |
| whitespace-pre | white-space: pre; | 保留多余空白字符 + 按原始换行符换行 |
| whitespace-pre-line | white-space: pre-line; | 多余空白符合并为1个 + 保留原始换行的同时可根据空间自动换行 |
| whitespace-pre-wrap | white-space: pre-wrap | 保留多个空白字符 + 保留原始换行的同时可根据空间自动换行 |
| whitespace-break-spaces | white-space:break-spaces | - |
whitespace-break-spaces单独展开说一下：
「空格和制表符处理」：在break - spaces模式下，空格和制表符会被保留，并且在文本换行时，它们会像普通字符一样被考虑。这意味着如果一个单词后面跟着一些空格或制表符，然后文本需要换行，这些空白字符会被移到下一行的开头，而不是像在normal模式下被简单地忽略或合并。例如，假设有一个长单词后面跟着几个空格，在break - spaces模式下，如果这个长单词在容器边缘处换行，那么这些空格会跟着单词一起换行，而不是消失。
「换行符处理」：换行符同样会被保留，并且会强制文本换行。与pre - line不同的是，break - spaces在处理换行符时更加灵活，它不仅会在换行符处换行，还会考虑换行符前后的空白字符以及它们在换行后的布局
总结
本文我们全面且系统地学习了如何使用系统预设样式?、如何自定义样式?、宽高、如何撑满容器屏幕？和如何撑满设备屏幕？、如何定义视口安全高度？、如何定义视口布局高度？ 和 如何定义动态视口高度？、尺寸size-xx、边距（margin、padding、space）、边框（border、divide、outline）、字体相关（大小、样式、加粗、字符间距、行高）、文本排版（对齐方式、颜色、超出时的处理方式、换行、空白字符的处理）等等，还会包含一些容易忽略的css知识点。每个案例都「附加源码与效果展示」。
「后续两篇」 我们将一起学习布局、Flexbox、Grid以及TailwindCss的核心功能-如何定制？以及会整理一些TailwindCss使用过程中常见的一些踩坑点及解决方案、比如TailwindCss跟unocss的区别、如何覆盖默认的尺寸让1单位值不等于4px？听闻tailwindcss 会明显降低vite 热更新的速度?？等等。如果你使用过程中也碰到了有趣的问题，也可以评论区一起交流 ☕️。
点击关注公众号，“技术干货” 及时达！
