听说还有人不会TailwindCss?最全实践指南它来啦(样式篇-上-附源码与效果展示)

4,215 阅读11分钟

逆熵而行,向阳而生,我是向阳花!继前一篇《TailwindCSS最全实际指南-环境篇》之后,本文是此系列第二篇文章-样式篇,此系列文章共分为:

  • 环境篇包括Tailwind简介、·tailwindcss的优势如何快速创建项目turbopack简介及优势、TailwindCss相关插件(官方插件和类名排序插件的用法,以及其它特殊场景如何做排序,包括clsx类名拼接额外知识拓展等)已有css知识体系如何快速跟TailwindCss做关联等等
  • 样式篇-上:如何使用系统预设样式?如何自定义样式?宽高如何撑满容器屏幕?如何撑满设备屏幕?如何定义视口安全高度?如何定义视口布局高度? 和 如何定义动态视口高度?、尺寸size-xx、边距(marginpaddingspace)、边框(borderdivideoutline)、字体相关(大小样式加粗字符间距行高)、文本排版(对齐方式颜色超出时的处理方式换行空白字符的处理)等等,还会包含一些容易忽略的css知识点。每个案例都附加源码与效果展示,主打一个让你不用实操一学就会!
  • 样式篇-下:下篇我们一起来学习布局FlexboxGrid以及TailwindCss的核心功能-如何定制?
  • 答疑篇:会整理一些TailwindCss使用过程中常见的一些踩坑点及解决方案、比如TailwindCssunocss的区别、如何覆盖默认的尺寸让1单位值不等于4px听闻tailwindcss 会明显降低vite 热更新的速度😱?等等,如果你使用过程中也碰到了有趣的问题,也可以评论区一起交流 ☕️。

⚠️ 学前必知 ⚠️

  1. 本系列文章所有案例项目中,TailwindCss版本是3.4.1,Next框架版本为15.0.3
  2. 如果你也想跟我一起从0-1体验一下Tailwindcss,但又嫌创建项目麻烦,可通过官方的 Playground在线快速体验。

⚠️ 学前必会 ⚠️

系统预设默认样式值的最小值或者我们可以将其理解为“步长”为1(如下图),代表0.25rem,对应4px,如果想用其它数值就可以随意自定义了,具体如何自定义下文会介绍。 1_AgAAJm8hGTcP_t7kIMhO3pmS4rpiNUQd.gif

废话不多说我们直奔主题开启TailwindCss的体验之旅~

宽高

基础宽高

  • 使用系统预设宽高:w-xx、h-xx

其中w表示宽度,h表示高度,h-14表示高度为3.5rem,对应56px;同理,w-52则表示宽度为13rem,对应208px

2_AgAAJm8hGTexrKFmVq9LvIuCoP1glDGc.png

  • 如何自定义其它数值?

可以使用方括号[]自定义任意数值,比如pxremem等。

3_AgAAJm8hGTcINU5JbHBNUaYwd9dS8BlO.png

4_1.png

关于em和rem的区别相信无需我多言吧?rem是相对于根元素(html)的,em是相对于其父元素的,比如上述例子中我将他们的父元素特意设置成了14px,根元素为16px,所以此时8rem就不等于8em了(效果如上图)。

  • 如何自定义百分比数值?

我们可以使用w-分子/分母h-分子/分母表示

5_1.png 6_1.png

  • w-fullw-screen

w-fullw-screen分别表示撑满容器的100%撑满设备屏幕的100%,其中w-screen相当于100vw

7_1.png

8_1.png

  • h-svhh-lvhh-dvh
  1. h-svh 表示100svh,代表视口安全高度

优势:在移动设备上,浏览器的地址栏等界面元素可能会在用户滚动或与页面交互时出现或隐藏,这会导致视口高度发生变化。使用100svh可以让元素(如一个全屏的容器)在这种动态变化的环境中,尽可能地占满可视的安全区域,避免出现因为视口高度变化导致布局混乱的情况

  1. h-lvh 表示 100lvh,代表布局视口高度

优势:例如,一个具有固定头部和底部导航栏的页面,中间内容区域希望能够填满剩余的布局视口高度,可以将中间内容区域的高度设置为100lvh,减去头部和底部导航栏的高度,这样可以保证内容区域在布局视口内的高度布局符合预期

  • h-dvh 表示 100dvh,代表动态视口高度

优势:在一些具有复杂交互的网页应用中,如表单页面,当软键盘弹出时,视口高度会发生变化。使用100dvh可以让页面的某些元素(如表单下方的提示信息区域)能够根据动态变化的视口高度自动调整大小,保证在软键盘弹出和隐藏等各种状态下,页面布局依然能够保持合理的显示效果

上述是视口高度相关的介绍,当然视口宽度也是一样的。

最大、最小宽高

min-w-[]max-w-[] 分别表示最小最大宽度,min-h-[]max-h-[] 分别表示最小和最大高度

max-w-52为例,代表最大宽度13rem,208px

9_1.png

10_1.png

尺寸size

通过size可快速创建一个指定宽高的正方形元素

⚠️注意⚠️ 部分低版本可能并没有这个属性,我使用的案例TailwindCss版本是3.4.1

11_AgAAJm8hGTeegPjt3uVNJocGWwvaqV2u.png

12_1.png

边距

margin

image.png

padding

image.png

space

写过React框架antd项目的同学一定非常清楚,space代表间距。具体值有space-x-xxspace-y-xx,分别表示xy两个方向的间距,值会根据所选自动计算。

13_AgAAJm8hGTcsD0a262RFMIJWFeg67fIG.png

边框

border

⚠️ 注意 ⚠️

  • 如果直接写border-t则表示border-top-width: 1px,下边框同理
  • 如果直接写border则表示border:1px
  • 定义线宽
borderborder-width: 1px
border-xx4个方向的border均为xx
border-tborder-top-width: 1px
border-t-xxborder-top-width: xx
border-b-xxborder-bottom-width: xx
border-l-xxborder-left-width: xx
border-r-xxborder-right-width: xx
border-x-xxborder-right-width: xx; border-left-width: xx;
border-y-xxborder-top-width: xx; border-bottom-width: xx
  • 定义线颜色: border-色系-色值

14_AgAAJm8hGTc_rtSdxl5CLbAnaxWjErvx.png

15_1.png

  • 定义线类型
border-solidborder-style: solid
border-dashedborder-style: dashed
border-dottedborder-style: dotted
border-doubleborder-style: double

16_1.png

  • 自定义线弧度
roundedborder-radius: 0.25rem; /* 4px */
rounded-mdborder-radius: 0.375rem; /* 6px */
rounded-lgborder-radius: 0.5rem; /* 8px */
rounded-fullborder-start-start-radius: 9999px; border-end-start-radius: 9999px;

17_1.png

divide

定义水平方向或者垂直方向元素的border值,举例:

divide-xborder-right-width: 0px => border-left-width: 1px;
divide-x-2border-right-width: 0px; => border-left-width: 2px;
divide-yborder-top-width: 1px; => border-bottom-width: 0px;
divide-y-2border-top-width: 2px; => border-bottom-width: 0px;

以水平方向举例如下,垂直方向同理。想起之前给多个元素定义边框还需手动出来重叠,这种方式是真香😄

image.png

19_AgAAJm8hGTfu9dKEIixJ56RMAwFWzgZT.png

outline

定义元素轮廓,适用于button按钮等场景,可快速为元素添加类似border带圆角的效果,可自定义outline的颜色宽度偏移等。

20_AgAAJm8hGTdtmbnzXulGh45kcos4672s.png

文本排版

字体

  • FontSize

21_AgAAJm8hGTdgpwG4QRpKxbXxmIR2Kk6u.png

具体取值如下:

text-xsfont-size: 0.75rem /* 12px /;line-height: 1rem / 16px */;
text-smfont-size: 0.875rem /* 14px /;line-height: 1.25rem / 20px */;
text-basefont-size: 1rem /* 16px /;line-height: 1.5rem / 24px */;
text-lgfont-size: 1.125rem /* 18px /;line-height: 1.75rem / 28px */;
text-xlfont-size: 1.125rem /* 18px /;line-height: 1.75rem / 28px */;
  • FontStyle

定义文本倾斜效果,值为italicnot-italic,默认not-italic

22_AgAAJm8hGTd4MVOlIzJIRYt_Mz1Vtts0.png

23_AgAAJm8hGTfyMlmzGA1AaYSLGyN7_8ho.png

  •  FontWeight

定义字体加粗效果

24_AgAAJm8hGTcDFCt65yRBhYkcwU6Mi4BJ.png

  • 字符间距tracking 定义字符间的间距

25_AgAAJm8hGTdiKPawA_JBna0YrHfTZZcD.png 使用效果如下图:

26_AgAAJm8hGTfXJRgMvnJBCJvSBKBvOZfO.png

行高

⚠️ 注意 ⚠️

除了具体数值以外,其它行高数值诸如1.251.5代表的都是比例因子,代表行高字体大小倍数,这么定义的优势是拥有继承特性且能实现按比例变化的响应值

对应具体数值如下:

leading-xxline-height: xxrem
leading-noneline-height: 1
leading-tightline-height: 1.25
leading-snugline-height: 1.375
leading-normalline-height: 1.5
leading-relaxedline-height: 1.625
leading-looseline-height: 2

代码书写及对应效果如下:

27_AgAAJm8hGTfgJnVsM0VFsJCPw6eYSe0w.png

Text文本

文本对齐方式-TextAlign

text-lefttext-align: left
text-centertext-align: center
text-righttext-align: right
text-justifytext-align: justify
text-starttext-align: start
text-endtext-align: end

28_AgAAJm8hGTfboRvy4SBNXpEZRkGUWTzQ.png

文本颜色-TextColor

  • 使用系统预设色系 text-色系-色值

TailwindCss为我们提供了一系列丰富的可选配色色系,可先根据需求选择大概色系,比如bluegreypinkgreen等,然后再选择色值

  • 自定义颜色值

如果系统预设色值不够精确无法满足需求,可通过text-[#xxx]随意输入指定色值

29_AgAAJm8hGTc5bJxQqihG_IKHc1RtUiw3.png

TextOverflow

表示文本内容超出时的展示方式,内部也集成了我们最常见的设置文本超出时变成省略号的样式,具体取值如下:

truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsistext-overflow: ellipsis; // 当内容超出时展示省略号
text-cliptext-overflow: clip; // 当内容超出时裁剪掉

30_AgAAJm8hGTcmE_uYBVhL7oQ4_pGy9BAN.png

文本换行 text-wrap

具体的取值如下:

text-wraptext-wrap: wrap;换行
text-nowraptext-wrap: nowrap;不换行
text-balancetext-wrap: balance;平衡的换行,使每一行字符长度尽可能均匀
text-prettytext-wrap: pretty;不仅考虑平衡,还要考虑字符间距实现美观,比如避免末尾出现孤立的单个字符,更适合对排版要求比较高的场景比如新闻网站

31_AgAAJm8hGTf455k6UQVGtpfhRGF5RD1g.png

空白字符whiteSpace

whitespace-normalwhite-space: normal;多余空白字符合并为1个 + 根据文本响应式换行
whitespace-nowrapwhite-space: nowrap;多余空白字符合并为1个 + 不换行
whitespace-prewhite-space: pre;保留多余空白字符 + 按原始换行符换行
whitespace-pre-linewhite-space: pre-line;多余空白符合并为1个 + 保留原始换行的同时可根据空间自动换行
whitespace-pre-wrapwhite-space: pre-wrap保留多个空白字符 + 保留原始换行的同时可根据空间自动换行
whitespace-break-spaceswhite-space:break-spaces-

whitespace-break-spaces单独展开说一下:

  • 空格和制表符处理:在break - spaces模式下,空格和制表符会被保留,并且在文本换行时,它们会像普通字符一样被考虑。这意味着如果一个单词后面跟着一些空格或制表符,然后文本需要换行,这些空白字符会被移到下一行的开头,而不是像在normal模式下被简单地忽略或合并。例如,假设有一个长单词后面跟着几个空格,在break - spaces模式下,如果这个长单词在容器边缘处换行,那么这些空格会跟着单词一起换行,而不是消失。

  • 换行符处理换行符同样会被保留并且会强制文本换行。与pre - line不同的是,break - spaces在处理换行符时更加灵活,它不仅会在换行符处换行,还会考虑换行符前后的空白字符以及它们在换行后的布局

32_AgAAJm8hGTdjFq4Id3hHGq4T_7I6qrUc.jpeg

总结

本文我们全面且系统地学习了如何使用系统预设样式?如何自定义样式?宽高如何撑满容器屏幕?如何撑满设备屏幕?如何定义视口安全高度?如何定义视口布局高度? 和 如何定义动态视口高度?、尺寸size-xx、边距(marginpaddingspace)、边框(borderdivideoutline)、字体相关(大小样式加粗字符间距行高)、文本排版(对齐方式颜色超出时的处理方式换行空白字符的处理)等等,还会包含一些容易忽略的css知识点。每个案例都附加源码与效果展示

后续两篇 我们将一起学习布局FlexboxGrid以及TailwindCss的核心功能-如何定制?以及会整理一些TailwindCss使用过程中常见的一些踩坑点及解决方案、比如TailwindCssunocss的区别、如何覆盖默认的尺寸让1单位值不等于4px听闻tailwindcss 会明显降低vite 热更新的速度😱?等等。如果你使用过程中也碰到了有趣的问题,也可以评论区一起交流 ☕️。

逆熵而行,向阳而生,我是向阳花🌻!本文主要是给Tailwind初学者打造的,从而可以少走弯路快速学习!还望老司机们不喜轻喷,当然指教是非常欢迎的☕️。创作不易,如果本文对你相对有所帮助记得收藏,纯技术分享喜欢的话赞一个再走?😊☕️

以下是作者其它专栏的部分文章,感兴趣的也可以顺便进来逛逛~

《重学CSS 系列专栏》其它文章推荐:

《重学JavaScript系列专栏》其它文章推荐:

《手撕源码系列专栏》文章推荐

《Webpack配置从基础到高阶系列专栏》文章推荐