我们在讲颜色的时候，说tailwind开箱的时候就定义了很多颜色，比如cyan-500，yellow-700等，虽然我们没讲到元素的宽高边框框线内外边距等，但前面的示例代码中或多或少的都出现了类似p-2, m-2, w-30, h-30这样的tailwind类名，大致也能猜出来分别是在设置padding/margin/width/height等，这种尺寸样式后面总跟个数字，但实际上这个数字代表的既不是像素，也不是rem或者em。
tailwind中的很多类名，都是由<样式>-<值>这样的语法组成的，比如：
| 类名 | 样式简写 | CSS样式 | 值简写 |
|---|---|---|---|
bg-cyan-500 |
bg |
background-color |
cyan-500 |
p-2 |
p |
padding |
2 |
m-2 |
m |
margin |
2 |
w-30 |
w |
width |
30 |
h-30 |
h |
height |
30 |
现在问题是：“值简写”代表的实际值，到底是定义在哪里的？我们又如何改写这些定义呢？
你可以简单的把tailwind背后的工作原理理解为：
m-2这样的类名时，tailwind会自动的根据全局变量中基本尺寸的定义，为用户生成一个CSS类定义我们用npm新建一个项目：
mkdir LearnTailwind05
cd LearnTailwind05
npm init -y
npm install tailwindcss @tailwindcss/cli在目录下新建一个input.css和index.html，内容如下：
@import "tailwindcss";<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="m-2 w-30 h-30 bg-cyan-400"></div>
</body>
</html>然后在命令行运行
npx @tailwindcss/cli -i ./input.css -o ./output.css --watch然后在浏览器中打开index.html，一个青色的方框就显示出来了。
过程也不难理解，就是tailwind引擎会扫描当前目录下的所有HTML文档，看看你用了哪些类名，比如我们用了m-2 w-30 h-30 bg-cyan-400这几个类名，它就会根据这些类名生成对应的CSS类定义，并把这个东西输出在output.css中去。
而那个神奇的input.css，其实就是tailwind的配置文件，现在这个配置文件里只写了一行孤单的@import "tailwindcss";，但实际上这行语句背后，拉进来了一个神奇的东西:node_modules/tailwindcss/theme.css
这里，就定义了tailwind引擎在生成类名时的很多全局变量，它里面的主要内容大致是这样写的：
@theme default {
// 先是定义了全局默认使用的三个字体家族
--font-sans: ***; // 无衬线字体
--font-serif: ***; // 衬线字体
--font-mono: ***; // 等宽字体
// 再是定义了所有颜色的值
--color-red-50: ***;
...
...
...
--color-stone-950: ***;
--color-black: #000;
--color-white: #fff;
// 再定义了基础尺寸单位
--spacing: 0.25rem
// 再定义了视口断点
--breakpoint-sm: 40rem;
...
--breakpoint-2xl: 96rem;
// 再定义了容器断点
--container-3xs: 16rem;
...
--container-7xl: 80rem;
// 再设置了字号（字体高度）和行高
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
...
--text-9xl: 8rem;
--text-9xl--line-height: 1;
// 后面还有很多内容，这里就不一一列举了
}所以这里就破案了：颜色和基本尺寸单位都是在这里定义的，其中颜色是真的一个个定义的，而尺寸则是定义了--spacing这个东西，其值等于0.25rem
默认情况下，一个rem是16像素（默认情况下文档中<html>元素的font-size值，这个东西默认是16像素，当然，可以改），所以一个基础单位其实是4像素
在input.css中进行覆盖，如下：
@import "tailwindcss";
+@theme {
+ --spacing: 0.2rem;
+ --color-mint-500: oklch(0.72 0.11 178);
+ --breakpoint-3xl: 120rem;
+}
上面的写法中，
0.25rem改成了0.2remmint-500的颜色，原始的theme.css中是没有"mint"这个颜色的。我们现在可以使用bg-mint-500和text-mint-500这样的类了3xl的视口断点，现在我们可以使用3xl:这个断点前缀来组合类名了input.css里还能干什么？input.css里可以干不少事情，最基本的，就是必须有下面这行语句：
@import "tailwindcss";上面也说了，通过@theme，可以改写全局变量：
@theme {
--spacing: 0.2rem;
--color-mint-500: oklch(0.72 0.11 178);
--breakpoint-3xl: 120rem;
}除此之外，还可以指定一些代码文件，让tailwind引擎去扫描这些文件，查看这些文件中可能出现的各种tailwind类名，从而生成对应的样式定义：
@source "../node_modules/@my-company/ui-lib";比如上面的写法就是提示tailwind引擎去扫描一个具体的文件（夹），因为默认情况下tailwind引擎会自动的去当前目录下搜索源代码文件，但默认是不包括node_modules中的东西的。
除此外，还可以做很多事，但那些事日常开发中基本很少遇到，这里就不提了，有兴趣的去看官方文档