tailwindcss v4的基础使用

一：前言

为什么要使用tailwindcss? 主要是因为可以减少命名和选择器的烦恼，不用去定义class类名了，每次要定义类名都想的头疼。然后使用tailwindcss来开发，可以减少 CSS 文件大小，只生成实际使用的样式，通过 PurgeCSS 移除未使用的 CSS，生产环境文件体积极小。最后就是内置了响应式设计，内置响应式前缀（sm:, md:, lg:, xl:, 2xl:，可以轻松创建移动优先的响应式布局。

二：安装

参考文档：https://tailwindcss.com/docs/installation/using-vite

我这边使用的是vite，那么就跟着vite的安装文档来走就行了（最好大家跟着文档来走）：

a.安装命令：

javascript 复制代码

npm install tailwindcss @tailwindcss/vite

b.在vite.config.ts中配置它

javascript 复制代码

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

c.导入

javascript 复制代码

@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 容器中垂直居中元素

javascript 复制代码

/* my-auto 相当于 */
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

mx-auto常用场景：水平居中块级元素

javascript 复制代码

/* 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>_;`

其实表格是这样子的，但是导入到csdn上解析不出来，要改太多就不改了，大家将就看，这个**是加粗的意思，格式问题

h-1:代表了height:0.25rem，也就是 height:4px

h-[5188px]，代表了：height:5188px

高度继承可以使用：h-full来进行继承

c.文字颜色和背景颜色：

文字颜色跟背景颜色没什么好说的，虽然预设了很多值，但是能用的没几个，因为ui有自己的审美，所以一般都是用：text-[#xxxxxx] bg-[#xxxxxx]

javascript 复制代码

<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更改状态：

javascript 复制代码

<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

e.定位：

positon是我常忘记的，直接写属性值就行了

javascript 复制代码

<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的虚线红色的下边框

javascript 复制代码

<div className="mt-10 border-b-2 border-red-500 border-dashed">测试红色虚线</div>

h.单行（多行）文本超出显示...

传统css：

javascript 复制代码

.my-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在tailwind中有两种，可以使用简写的，也可以使用完整的三个属性

javascript 复制代码

<div className="truncate">长文本...</div>

javascript 复制代码

<div className="whitespace-nowrap overflow-hidden text-ellipsis">长文本...</div>

多行的传统css：

javascript 复制代码

.text-ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示3行 */
  overflow: hidden;
}

Tailwind CSS 提供了 line-clamp 工具类

javascript 复制代码

<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>`

javascript 复制代码

<div class="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的效果

javascript 复制代码

display: grid;
grid-template-columns: repeat(3, 1fr);

在flex布局中有点麻烦，原因盒子肯定不止3个（所以子盒子不能使用flex:1，得使用百分比），超过3个就要使用flex-wrap: wrap;而且要考虑到盒子之间的间距：

javascript 复制代码

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flex-item {
  flex: 0 0 calc(33.333% - 12px); /* 减去 gap 的影响 */
}

例子2:项目实际例子

如图实现上面这个效果，如果要flex要用多少盒子嵌套，大家想一想应该有个基本的思维。

但是使用flex布局，只需要定义4列两行的布局。

javascript 复制代码

<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">Customer ID</span>
  <span>{detailData?.customerId}</span>
  <span className="text-s-body-m text-body-m">Bank CIF</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样式前面加一个!

javascript 复制代码

<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来自定义类名

javascript 复制代码

@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: 0 4px 4px 0 rgb(0 0 0 / 0.2);
  
}

使用：

这里定义了颜色，那么不管是文字还是背景则都可以使用这个自定义类名的颜色

javascript 复制代码

<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上的类名来实现（官方文档）

javascript 复制代码

@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);
}

javascript 复制代码

const toggleTheme = () => {
  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>

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`