听说你还不会 Tailwind CSS(基础·上篇)

1. 前言

在使用 Vue 开发时,最常用的 UI 库就是 ElementUI 或 Ant Design Vue 了。 而在开发 React 时,特别是使用 Next.js 时,就不得不考虑 Tailwind CSS 这种方案了。

使用 Tailwind CSS 就像在使用 Bootstrap,写出对应类名就能快速创建样式。如果你对CSS很有感觉,那么掌握 Tailwind CSS 只要 1 小时。

适用范围:

虽然在 React 中结合得比较紧密,但是也同样适用于其他的主流框架,例如:Vite、Nuxt、Angular,甚至是 Laravel、Ruby on Rails......

文档在此:tailwindcss.com/docs/instal...

关于安装步骤就不再赘述了,官网上写得很详细了。

篇幅介绍:

  • 基础(上下)篇:Tailwind CSS 在应用中的基本使用方法
  • 进阶篇:如何复用样式以及 shadcn ui 的使用
  • 响应式篇:如何构建响应式网页

接下来以 3.4.1 版本为例,进入基础篇的具体内容。

2. 宽高

2.1 宽度高度

  1. 预定义数值类(w-数值h-数值

通过 w-数值h-数值 就能分别设定宽度和高度,例如:

html 复制代码
<div class="w-20 h-20 bg-blue-500">width and height</div>

w-1 的 1 表示 0.25 rem,即 4 px,以此类推,w-20 表示 5 rem,即 width: 80px;。同理,h-20 表示 height: 80px;

bg-blue-500 很好理解,就是 background-color 为蓝色,其中 500 表示某种饱和度的蓝色:数值越大颜色越深。

  1. 手动书写任意值(w-[]h-[]
html 复制代码
<div class="w-[80px] h-20 bg-blue-500">width and height</div>
<div class="w-[5rem] h-20 bg-blue-500">width and height</div>
<div class="w-[5em] h-20 bg-blue-500">width and height</div>

想要更加直观可控,以 width 为例,w-20 实际上等价于:w-[80px]w-[5rem]w-[5em]

  1. 百分比(w-分子/分母h-分子/分母
tsx 复制代码
<div class="w-1/2 h-20 bg-blue-300">w-1/2</div>
<div class="w-1/3 h-20 bg-blue-300">w-1/3</div>
<div class="w-1/4 h-20 bg-blue-300">w-1/4</div>

百分比的有效范围为:1/2, 1/3, 2/3, 1/4, 2/4, ..., 11/12,整数不在此范围,例如 2/2, 3/3 等。

  • w-1/2 👉 width: 50%;
  • w-1/3 👉 width: 33.333333%;
  • w-1/4 👉 width: 25%;
  1. w-fullw-screen

一般来说,占满宽度有两种情况。一个是占据容器的 100% 宽度,一个是占据设备屏幕的 100% 宽度。(另外还有 w-svww-lvww-dvw

tsx 复制代码
<div class="w-[500px] border">
	<div class="w-full h-20 bg-blue-100">w-full</div>
	<div class="w-screen h-20 bg-blue-100">w-screen</div>
</div>
  • w-full 👉 width: 100%;
  • w-screen 👉 width: 100vw;
  1. h-svhh-lvhh-dvh

在高度方面也是类似,也有 h-fullh-screen。由于设备的不同,考虑到手机 h5 之类的情况,使用以下更为灵活的发高度值:

h-svh 👉 height: 100svh;

h-lvh 👉 height: 100lvh;

h-dvh 👉 height: 100dvh;

在实际使用中,用起来第三种 h-dvh 会更加灵活。

2.2 最小/大宽度高度

  1. min-w-[]max-w-[]
  2. min-h-[]max-h-[]

这些一般用于响应式设计或防止溢出。下面是一个按钮文本防止宽度溢出的设计:

html 复制代码
<div class="inline-block min-w-20 h-10 leading-10 bg-green-200 text-center">
  btn
</div>
<br />
<div class="inline-block min-w-20 h-10 leading-10 bg-green-400 text-center">
  button
</div>
<br />
<div class="inline-block min-w-20 h-10 leading-10 bg-green-600 text-center">
  my long text button
</div>
  • min-w-20 👉 min-width: 5rem; /* 80px */
  • inline-block 👉 display: inline-block;
  • leading-10 👉 line-height: 2.5rem; /* 40px */
  • text-center 👉 text-align: center;

2.3 size

size-* 可以快速创建出一个正方形。注意,低版本的 Tailwind CSS 可能没有这个特性。

html 复制代码
<div class="w-20 h-20 bg-blue-500">width and height</div>

等价于:

html 复制代码
<div class="size-20 bg-blue-500">width and height</div>

3. 边距

外边距、内边距、空间间隔。

3.1 margin

tsx 复制代码
<div class="mr-2 inline bg-red-200">inline1</div>
<div class="mr-2 inline bg-red-300">inline2</div>
<div class="mr-2 inline bg-red-400">inline3</div>

mr-* 为例,表示右侧的外边距。

其他方位:

  • mt-* 👉 margin-top: _;
  • mb-* 👉 margin-bottom: _;
  • ml-* 👉 margin-left: _;
  • mx-* 👉 margin-left: _; margin-right: _;
  • my-* 👉 margin-top: _; margin-bottom: _;

内容区块水平方向居中:

html 复制代码
<main class="w-[1280px] mx-auto h-screen bg-sky-200">
  ...
</main>

mx-auto 👉 margin: 0 auto;

3.2 padding

html 复制代码
<p class="py-5 px-10 bg-yellow-300">#p1</p>
<p class="py-5 px-10 bg-yellow-400">#p2</p>
<p class="py-5 px-10 bg-yellow-500">#p3</p>

padding 部分和 margin 类似。

px-10 py-5

3.3 space

space-x-*space-y-* 写在容器上,用来控制子元素之间的间距。

  1. 水平方向排列
html 复制代码
<div class="space-x-4">
  <div class="inline-block bg-slate-400">01</div>
  <div class="inline-block bg-slate-500">02</div>
  <div class="inline-block bg-slate-600">03</div>
</div>
  1. 垂直方向排列
html 复制代码
<div class="space-y-4">
  <div class="bg-emerald-300">01</div>
  <div class="bg-emerald-400">02</div>
  <div class="bg-emerald-500">03</div>
</div>

space-x-4 以及 space-y-4 的间距效果

4. 边框

线宽、线类型、弧度。

4.1 线宽 + 颜色

html 复制代码
<div class="border border-sky-500 size-10"></div>
<div class="border-2 border-sky-500 size-10"></div>
<div class="border-4 border-sky-500 size-10"></div>

通过 border-* 设定线宽,颜色的设置也很简单:border-颜色-数值

如果想要设定某一方向的边框:border-*-数值

  • border-t-数值 👉 border-top-width: _;
  • border-r-数值 👉 border-right-width: _;
  • border-b-数值 👉 border-bottom-width: _;
  • border-l-数值 👉 border-left-width: _;
  • border-x-数值 👉 border-left-width: _; border-right-width: _;
  • border-y-数值 👉 border-top-width: _; border-right-width: _;

注意 ⚠️:如果不加数值(例如:border-t),表示特定方向上的线宽为 1px。border-0 就是 border-width: 0px;

4.2 线类型

border-solid 👉 border-style: solid;

border-dashed 👉 border-style: dashed;

border-dotted 👉 border-style: dotted;

border-double 👉 border-style: double;

4.3 弧度

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;

5. 文本

字体(大小、对齐方式、加粗......)

5.1 字体大小

和前述章节类似,有关字体大小的相关使用也可以通过 text-数值text-[] 的方式进行:

html 复制代码
<p class="text-sm">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-base">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-md">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-[16px]">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-lg">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>
<p class="text-xl">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officia.
</p>

其中,text-basetext-mdtext-[16px] 都是一样的,取浏览器的字体默认值 16px。

5.2 文本对齐方式

tsx 复制代码
<p class="text-left">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
  adipisci minima dolore sit quas officiis velit sint! Dicta ad ea
  quaerat, sapiente provident et nihil cupiditate est, vero quo soluta.
</p>
<p class="text-center">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
  adipisci minima dolore sit quas officiis velit sint! Dicta ad ea
  quaerat, sapiente provident et nihil cupiditate est, vero quo soluta.
</p>
<p class="text-right">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
  adipisci minima dolore sit quas officiis velit sint! Dicta ad ea
  quaerat, sapiente provident et nihil cupiditate est, vero quo soluta.
</p>
<p class="text-justify">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
  adipisci minima dolore sit quas officiis velit sint! Dicta ad ea
  quaerat, sapiente provident et nihil cupiditate est, vero quo soluta.
</p>

5.3 字体斜体与加粗

tsx 复制代码
<p class="italic">Lorem ipsum! -- italic</p>
<p class="font-thin">Lorem ipsum! -- font-weight: 100;</p>
<p class="font-light">Lorem ipsum! -- font-weight: 300;</p>
<p class="font-normal">Lorem ipsum! -- font-weight: 400;</p>
<p class="font-bold">Lorem ipsum! -- font-weight: 700;</p>
<p class="font-black">Lorem ipsum! -- font-weight: 900;</p>

6. 颜色

颜色在之前的案例中都有接触,主要为:字体颜色、边框颜色、背景颜色、背景渐变色图像。

tsx 复制代码
<p class="text-red-500">Lorem ipsum! -- 文本颜色</p>
<p class="border-2 border-sky-500">Lorem ipsum! -- 边框颜色</p>
<p class="bg-orange-500">Lorem ipsum! -- 背景颜色</p>
<p class="bg-orange-500/75">Lorem ipsum! -- 背景颜色(75% 透明度)</p>
<p class="bg-orange-500/50">Lorem ipsum! -- 背景颜色(50% 透明度)</p>
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
  向右渐变(purple-500 👉 pink-500)
</div>
<div class="bg-gradient-to-l from-transparent to-sky-500">
  向左渐变(sky-500 👈 transparent)
</div>
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
  向右渐变(indigo-500 👉 purple-500 👉 pink-500)
</div>

字体、边框、背景、不同透明度的背景颜色都很容易理解。需要提一点的是渐变色,这里需要用 from-颜色Avia-颜色Bto-颜色C 来表示从颜色 A 经过 B,最后过渡到 C 的颜色变化。

7. 总结

基础上篇从宽度高度开始逐步展现 Tailwind CSS 基本的使用规则,包括边距、边框、文本、颜色等常用的样式属性。从行文也可以看出,有了上面的铺垫,到了颜色部分其实就可以依靠以往的开发经验猜出对应的属性使用了。下篇将介绍伪类、布局定位、过渡、动画等常用属性。

相关推荐
风尚云网4 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02046 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing8 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月12 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆19 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China20 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q21 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海22 分钟前
Chrome离线安装包下载
前端·chrome
m512732 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html