一：前言
为什么要使用tailwindcss? 主要是因为可以减少命名和选择器的烦恼，不用去定义class类名了，每次要定义类名都想的头疼。然后使用tailwindcss来开发，可以减少 CSS 文件大小，只生成实际使用的样式，通过 PurgeCSS 移除未使用的 CSS，生产环境文件体积极小。最后就是内置了响应式设计，内置响应式前缀（sm:, md:, lg:, xl:, 2xl:，可以轻松创建移动优先的响应式布局。
二：安装
参考文档：https://tailwindcss.com/docs/installation/using-vite
我这边使用的是vite，那么就跟着vite的安装文档来走就行了（最好大家跟着文档来走）：
a.安装命令：
npm install tailwindcss @tailwindcss/viteb.在vite.config.ts中配置它
import{defineConfig}from'vite'importtailwindcssfrom'@tailwindcss/vite'exportdefaultdefineConfig({plugins:[tailwindcss(),],})c.导入
@import"tailwindcss";d.在main.tsx中导入它：
注意把normalize.css和reset.css都可以干掉了，因为tailwindcss里面内置了基础样式重置系统
e.插件安装：
使用tailwindcss一定一定要安装插件，因为tailwindcss的内置样式实在太多了，不需要记也记不得这么全
这里我们使用：Tailwind CSS IntelliSense
这样子写的时候就有提示了：
三：使用
安装完成之后，就可以这样子使用它了：
四：一些常用的css样式在tailwind中的写法
a.最常用的margin和padding：
p-4：设置元素的内边距（padding）为 1rem，相当于：padding: 16px。
m-8：设置元素的外边距（margin）为 2rem， 相当于： padding: 32px。
mt-4：设置元素的上外边距为 1rem，相当于： margin-top: 16px。
my-1: 相当于:margin-top:4px和margin-bottom:4px的组合。
mx-1: 相当于:margin-left:4px和margin-right:4px的组合。
注意这里的单位是rem，如果不去更改html的font-size的大小话，一般就是1rem=16px
所以在不更改大小的前提下 p-1，就代表设置内边距为4px。
但是有个问题：就是上面很多都是预设值，但是ui有时候给的没有这个值，要使用自定义的值怎么办？
那么就用mt-[188px]这种格式：这就代表了:margin-top:188px。所有需要自定义的，都是使用[]这个来自定义，记得要带上单位
注意：这里一定要学会看文档
还有两个要记住的，就是mx-auto 和 my-auto
my-auto常用场景：在 flex 容器中垂直居中元素
/* my-auto 相当于 */.my-auto{margin-top:auto;margin-bottom:auto;}mx-auto常用场景：水平居中块级元素
/* mx-auto 相当于 */.mx-auto{margin-left:auto;margin-right:auto;}b.设置宽高：
这里只写高度，宽度同理
**h-**_**<number>**_ | height: calc(var(--spacing) * _<number>_); |
|---|---|
**h-full** | height: 100%; |
**h-screen** | height: 100vh; |
**h-dvh** | height: 100dvh; |
**h-dvw** | height: 100dvw; |
**h-[**_**<value>**_**]** | height: _<value>_; |
h-1:代表了height:0.25rem，也就是 height:4px
h-[5188px]，代表了：height:5188px
高度继承可以使用：h-full来进行继承
c.文字颜色和背景颜色：
文字颜色跟背景颜色没什么好说的，虽然预设了很多值，但是能用的没几个，因为ui有自己的审美，所以一般都是用：text-[#xxxxxx] bg-[#xxxxxx]
<div className="mt-10 text-[#50d71e] bg-blue-400">测试tailwindcss</div>文字加粗:
一般就是用font-normal 和 font-bold
**font-thin** | font-weight: 100; |
|---|---|
**font-normal** | font-weight: 400; |
**font-medium** | font-weight: 500; |
**font-bold** | font-weight: 700; |
**font-[**_**<value>**_**]** | font-weight: _<value>_; |
d.hover更改状态：
<buttonclass="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>e.定位：
positon是我常忘记的，直接写属性值就行了
<div className="pointer-events-none fixed bottom-0 left-0">{process.env.DEPLOY_TIME}</div>f.鼠标样式：
一般就用到这两个
**cursor-pointer** | cursor: pointer; |
|---|---|
**cursor-not-allowed** | cursor: not-allowed; |
g.border样式：
圆角：我们在css经常写：border-radius：50%来画圆 ，这里可以用rounded-full来处理。
如果只是一些圆角，那么可以使用预设值或者自定义值来处理
**rounded-xs** | border-radius: var(--radius-xs); _/* 0.125rem (2px) */_ |
|---|---|
**rounded-sm** | border-radius: var(--radius-sm); _/* 0.25rem (4px) */_ |
**rounded-md** | border-radius: var(--radius-md); _/* 0.375rem (6px) */_ |
**rounded-lg** | border-radius: var(--radius-lg); _/* 0.5rem (8px) */_ |
**rounded-xl** | border-radius: var(--radius-xl); _/* 0.75rem (12px) */_ |
**rounded-2xl** | border-radius: var(--radius-2xl); _/* 1rem (16px) */_ |
**rounded-none** | border-radius: 0; |
**rounded-full** | border-radius: calc(infinity * 1px); |
**rounded-[**_**<value>**_**]** | border-radius: _<value>_; |
如果是需要画一条红色的虚线,则比原来的boder-bottom:1px dash red麻烦点，这里分成了三个属性，分别是border-width（负责宽度和哪个方向的边框），border-color（负责颜色）和border-style（负责虚线还是实线）。
下面是一个2px的虚线红色的下边框
<div className="mt-10 border-b-2 border-red-500 border-dashed">测试红色虚线</div>h.单行（多行）文本超出显示…
传统css：
.my-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}在tailwind中有两种，可以使用简写的，也可以使用完整的三个属性
<div className="truncate">长文本...</div><div className="whitespace-nowrap overflow-hidden text-ellipsis">长文本...</div>多行的传统css：
.text-ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;/* 显示3行 */overflow:hidden;}Tailwind CSS 提供了 line-clamp 工具类
<div className="line-clamp-3">多行文本内容...</div>常用的 line-clamp 类：
line-clamp-1 - 显示1行
line-clamp-2 - 显示2行
line-clamp-3 - 显示3行
line-clamp-4 - 显示4行
line-clamp-5 - 显示5行
line-clamp-6 - 显示6行
line-clamp-none - 取消行数限制
i:响应式布局
| 前缀 | 屏幕宽度 | CSS 媒体查询 |
|---|---|---|
<font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">sm</font> | ≥640px | <font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">@media (min-width: 640px)</font> |
<font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">md</font> | ≥768px | <font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">@media (min-width: 768px)</font> |
<font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">lg</font> | ≥1024px | <font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">@media (min-width: 1024px)</font> |
<font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">xl</font> | ≥1280px | <font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">@media (min-width: 1280px)</font> |
<font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">2xl</font> | ≥1536px | <font style="color:rgb(53, 148, 247);background-color:rgba(59, 170, 250, 0.1);">@media (min-width: 1536px)</font> |
<divclass="text-sm md:text-base lg:text-lg"><!--移动端:小号字,平板:基础字号,桌面:大号字--></div>j:最重要的布局类（flex和grid布局）
1.flex布局
flex这里不多讲，一般大家都是用的比较多，主要是看看在tailwind里面是怎么写的
display:flex.(原来css) => flex（在tailwindcss里面）
justify-content（主轴排列方式）：
**justify-start** | justify-content: flex-start; |
|---|---|
**justify-end** | justify-content: flex-end; |
**justify-center** | justify-content: center; |
**justify-between** | justify-content: space-between; |
**justify-around** | justify-content: space-around; |
**justify-evenly** | justify-content: space-evenly; |
**justify-stretch** | justify-content: stretch; |
align-items（侧轴排列方式）：
**items-start** | align-items: flex-start; |
|---|---|
**items-end** | align-items: flex-end; |
**items-center** | align-items: center; |
**items-baseline** | align-items: baseline; |
**items-stretch** | align-items: stretch; |
flex方向：
**flex-row** | flex-direction: row; |
|---|---|
**flex-row-reverse** | flex-direction: row-reverse; |
**flex-col** | flex-direction: column; |
**flex-col-reverse** | flex-direction: column-reverse; |
flex换行：
**flex-nowrap** | flex-wrap: nowrap; |
|---|---|
**flex-wrap** | flex-wrap: wrap; |
**flex-wrap-reverse** | flex-wrap: wrap-reverse; |
flex属性：flex 是 CSS Flexbox 中的简写属性，用于同时设置 flex-grow、flex-shrink 和 flex-basis，控制弹性项目在容器中如何伸缩以适应可用空间
这里面最常用的就是flex-1：允许弹性物品根据需要大小变化
意思就是：比如在一个flex盒子中，里面有3个子盒子，有两个子盒子设置了flex-1，还有一个没有设置，那么当宽度变化时，这个没设置的盒子的宽度是固定的，两个flex-1的盒子宽度会随着父盒子宽度的增加而增加，减小而减小。
gap：（用于设置flex和grid布局中子盒子的间距，这个gap用的很多）
**gap-**_**<number>**_ | gap: calc(var(--spacing) * _<value>_); |
|---|---|
**gap-[**_**<value>**_**]** | gap: _<value>_; |
**gap-x-**_**<number>**_ | column-gap: calc(var(--spacing) * _<value>_); |
**gap-x-[**_**<value>**_**]** | column-gap: _<value>_; |
**gap-y-**_**<number>**_ | row-gap: calc(var(--spacing) * _<value>_); |
**gap-y-[**_**<value>**_**]** | row-gap: _<value>_; |
如下图，主要就是用于子盒子之间的间距的，可以使用gap-来设置统一的间距，也可以gap-x-来设置x轴的间距
2.grid布局
gird真的很好用，能省写很多盒子嵌套，虽然使用flex都能解决布局问题，但是有时候使用grid布局会更加的优雅。
这里建议去学习一下阮一峰老师的grid的文档：https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
举两个例子说明grid的好用：
例子1：三列等宽布局
这里写一个三列等宽的grid布局： 这里的1fr相当于flex布局中子盒子的宽度设置为：flex：1的效果
display:grid;grid-template-columns:repeat(3,1fr);在flex布局中有点麻烦，原因盒子肯定不止3个（所以子盒子不能使用flex:1，得使用百分比），超过3个就要使用flex-wrap: wrap;而且要考虑到盒子之间的间距：
.flex-container{display:flex;flex-wrap:wrap;gap:6px;}.flex-item{flex:00calc(33.333%-12px);/* 减去 gap 的影响 */}例子2:项目实际例子
如图实现上面这个效果，如果要flex要用多少盒子嵌套，大家想一想应该有个基本的思维。
但是使用flex布局，只需要定义4列两行的布局。
<div className="grid grid-flow-col grid-cols-4 grid-rows-[repeat(2,auto)] gap-2 border-b py-4"><span className="text-s-body-m text-body-m">Customer Name</span><span>{detailData?.clientName}</span><span className="text-s-body-m text-body-m">CustomerID</span><span>{detailData?.customerId}</span><span className="text-s-body-m text-body-m">BankCIF</span><span>{detailData?.cif}</span><span className="text-s-body-m text-body-m">Asset/Network</span><span>{detailData?.assetCode}({detailData?.chainCode})</span></div>可以看到，我这里基本上没有多余的盒子。
解释一下：\
3.列一下原类和在taiwindcss里面的写法
grid-template-columns：属性定义每一列的列宽
**grid-cols-**_**<number>**_ | grid-template-columns: repeat(_<number>_, minmax(0, 1fr)); |
|---|---|
**grid-cols-none** | grid-template-columns: none; |
**grid-cols-subgrid** | grid-template-columns: subgrid; |
**grid-cols-[**_**<value>**_**]** | grid-template-columns: _<value>_; |
**grid-cols-(**_**<custom-property>**_**)** | grid-template-columns: var(_<custom-property>_); |
grid-template-rows：属性定义每一行的行高。
**grid-rows-**_**<number>**_ | grid-template-rows: repeat(_<number>_, minmax(0, 1fr)); |
|---|---|
**grid-rows-none** | grid-template-rows: none; |
**grid-rows-subgrid** | grid-template-rows: subgrid; |
**grid-rows-[**_**<value>**_**]** | grid-template-rows: _<value>_; |
**grid-rows-(**_**<custom-property>**_**)** | grid-template-rows: var(_<custom-property>_); |
grid-auto-flow：默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行（假设定义了3行3列，则从第一行从左到右排列过去）。 默认值为：row，如果设置的是：column，那么就是"先列后行"
**grid-flow-row** | grid-auto-flow: row; |
|---|---|
**grid-flow-col** | grid-auto-flow: column; |
**grid-flow-dense** | grid-auto-flow: dense; |
**grid-flow-row-dense** | grid-auto-flow: row dense; |
**grid-flow-col-dense** | grid-auto-flow: column dense; |
justify-items属性：设置单元格内容的水平位置（左中右），align-items属性：设置单元格内容的垂直位置（上中下）
**justify-items-start** | justify-items: start; |
|---|---|
**justify-items-end** | justify-items: end; |
**justify-items-center** | justify-items: center; |
**justify-items-stretch** | justify-items: stretch; |
**items-start** | align-items: flex-start; |
|---|---|
**items-end** | align-items: flex-end; |
**items-center** | align-items: center; |
**items-baseline** | align-items: baseline; |
**items-stretch** | align-items: stretch; |
justify-content属性：是整个内容区域在容器里面的水平位置（左中右），align-content属性：是整个内容区域的垂直位置（上中下）。
这个的属性跟flex上的属性基本上是一致的，就不列了，主要是要知道这个属性是干嘛的。
l.使用!来达到最高等级
在css中使用!important来强制该样式为最高等级，在tailwindcss中只需要在对应的css样式前面加一个!
<div className="bg-[#0094fc] h-20 mt-10 !bg-[#917d35]"></div>背景色bg-[#917d35]会覆盖bg-[#0094fc]
m.复用类名
各种指令的效果请查看官方文档
只需要在index.css文件中使用@apply字段来应用多个样式
使用时这样子就行了：
效果：
注意：这里有个问题，就是虽然可以这样子复用类名，但是在输入的时候没有提示，相对来说没有特别友好。
n.自定义类名
tailwindcss. v4版本较v3版本有较大的升级，之前v3是在tailwind.config.js中自定义自己的样式。但是现在v4版本不需要了，只需要在统一的css文件里面进行定义即可。
现在使用@theme来自定义类名
@theme{/* 颜色扩展 - 这些会生成 text-brand-color, bg-brand-color 等类 */--color-brand-color:#c5d535;--color-bg-blue:#0094ff;/* 间距扩展 - 这些会生成 m-72, w-100 等类 */--spacing-100:400px;/* 字体大小扩展 - 这些会生成 text-menu-choice, text-title-l 等类 */--font-size-title-l:1.5rem;/* 阴影扩展 - 这些会生成 shadow-d-base, shadow-d-button 等类 */--shadow-d-button:04px4px0rgb(000/0.2);}使用：
这里定义了颜色，那么不管是文字还是背景则都可以使用这个自定义类名的颜色
<div className="bg-bg-blue mt-5">123</div><div className="bg-brand-color mt-5 text-brand-color">123</div>使用@theme来定义的在输入时就有提示，相对来说就友好很多了。
以下是可以定义的内容：
文档：https://tailwindcss.com/docs/theme#theme-variable-namespaces
| Namespace | Utility classes |
|---|---|
**--color-*** | Color utilities like**bg-red-500**, **text-sky-300**, and many more |
**--font-*** | Font family utilities like**font-sans** |
**--text-*** | Font size utilities like**text-xl** |
**--font-weight-*** | Font weight utilities like**font-bold** |
**--tracking-*** | Letter spacing utilities like**tracking-wide** |
**--leading-*** | Line height utilities like**leading-tight** |
**--breakpoint-*** | Responsive breakpoint variants like**sm:*** |
**--container-*** | Container query variants like**@sm:***and size utilities like **max-w-md** |
**--spacing-*** | Spacing and sizing utilities like**px-4**, **max-h-16**, and many more |
**--radius-*** | Border radius utilities like**rounded-sm** |
**--shadow-*** | Box shadow utilities like**shadow-md** |
**--inset-shadow-*** | Inset box shadow utilities like**inset-shadow-xs** |
**--drop-shadow-*** | Drop shadow filter utilities like**drop-shadow-md** |
**--blur-*** | Blur filter utilities like**blur-md** |
**--perspective-*** | Perspective utilities like**perspective-near** |
**--aspect-*** | Aspect ratio utilities like**aspect-video** |
**--ease-*** | Transition timing function utilities like**ease-out** |
**--animate-*** | Animation utilities like**animate-spin** |
o.自定义主题
tailwindcss中主题切换的原理：这里的主题切换主要是通过theme中定义css变量，然后切换时就切换html上的类名来实现（官方文档）
@import"tailwindcss";@theme{/* 主题切换的一些变量 */--color-main-color:var(--main-color);--color-secondary-color:var(--secondary-color);}/* 主题切换 CSS 变量定义 */:root{--main-color:rgba(232,176,176,0.87);--secondary-color:rgba(51,183,159,0.87);}.dark{--main-color:rgba(19,18,18,0.87);--secondary-color:rgba(52,5,5,0.87);}consttoggleTheme=()=>{document.documentElement.classList.toggle("dark");};<div>切换下面的主题盒子</div><Button type="primary"onClick={()=>toggleTheme()}>Button</Button><div className="bg-main-color w-100 h-100 text-secondary-color">主题相关的盒子</div>
