一文掌握 Tailwind CSS 基础
工欲善其事，必先利其器
先推荐一些好用的工具：
TailWind CSS 代码提示功能的 vscode 插件：Tailwind CSS IntelliSense
再推荐一个 Tailwind CSS 速查网站：https://tailwind.muzhifan.top/
本文假定读者已经有一定的 CSS 基础
1 宽高
1.使用预定义类名
如 w-10 h-20 etc..
1 个数字单位代表 0.25rem, 一般根元素 font-size 是 16px, 0.25rem 即 4px
w-1 => 0.25rem => 4px
w-10 -> 2.5 rem -> 40px
h-10 同理
2.指定具体值
如 w-[80px] 即 80px
w-[5rem] 即 5rem 默认 80px
w-[5em] 5*父元素 font-size
3.指定百分比、分数值
w-80 即 80%
w-1/2
4.跟随设备值
w-full 占据父元素 100%
w-screen 占据设备宽 100%
w-svw、w-lvw、w-dvw 跟随视窗宽度
一般使用 w-dvw 或 h-dvh, 表示当前视窗的宽度。随着视窗大小的变化而变化，适用于大多数响应式设计场景。
5.最大最小宽度
min-w-[]、max-w-[]
min-h-[]、max-h-[]
max-width-20, 即 5rem
max-wid-[20px]
max-width-[20%]
2. size 正方形
size-20： 一个宽高都为 20 的正方形
size-value 中，value 支持值为偶数
3. margin、padding、space 间距
mr-2: 右边距为 2。ml-v,mt-v,mb-b 同理
mx-2, 左右边距为 2
my-2, 上下边距为 2
mx-auto: margin: 0 auto;
padding 写法和 margin 同理
space 用于父元素，作用是设置子元素之间的间距
space-x-4, 子元素之间间距 4px，space-y-4 同理
4. 边框、弧度
边框宽度
通过 border-value 设定线宽，颜色的设置也很简单：border-颜色-数值。
border-t|b|l|r: 上|下|左|右边框. 如 border-t-2 即 border-top-width: 2px;
border-x|y：横向|纵向 边框
不加 value 时，默认 value 为 1px
边框类型
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; /_ 0.25 _ 16 = 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. 字体 大小 对齐方式 斜体加粗
文本大小
text-sm: 0.875rem, 一般为 14px
text-base、text-md、text-[16px]: 16px
text-lg：18px
text-xl: 20px
文本对齐方式
text-left 即 text-align:left
text-center、text-right、text-justify 同理
加粗
italic 即 font-style: italic;
font-thin 即 font-weight: 100;
font-light 即 font-weight: 300;
font-normal 即 font-weight: 400;
font-bold 即 font-weight: 700;
font-black 即 font-weight: 900;
6. 颜色 透明 渐变
<p className="text-red-500">islandZzz -- 文本颜色</p>
<p className="border-2 border-sky-500">islandZzz -- 边框颜色</p>
<p className="bg-orange-500">islandZzz -- 背景颜色</p>
<p className="bg-orange-500/75">islandZzz -- 背景颜色（75% 透明度）</p>
<p className="bg-orange-500/50">islandZzz -- 背景颜色（50% 透明度）</p>
<div className="bg-gradient-to-r from-purple-500 to-pink-500">
向右渐变（purple-500
标签：10,scale,一文,flex,Tailwind,text,font,border,CSS
From： https://www.cnblogs.com/ltfxy/p/18315143