本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com
端午三天，你们在放假，而我，一个人躲在家里，苦练 tailwindcss。
我在准备这样一个学习项目，它与传统的文章 / 视频类学习不同，我会在教程中内置大量的可交互案例，提供沉浸式的学习体验，并且还可以支持实时修改代码观察案例更改结果。大家可以期待一下。
经过这个项目的历练，现在，我已熟练度拉满，彻底拿捏了 tailwindcss。
魔功大成！
这篇文章，就跟大家分享一下我在 tailwindcss 中已经使用到的高级用法。
一、彻底读懂配置文件 tailwind.config.js
二、定义自己喜欢的语法
二、定义自己喜欢的功能块
三、定义自己想要的插件
三、高级用法：简单实现皮肤切换
0
高端，从读懂配置文件开始
在使用 tailwindcss 时，我们可以在项目根目录创建一个配置文件 tailwind.confing.js，用于控制 tailwindcss 的语法，理论上来说，你可以把 tw 调整成任何你需要的形状。
使用如下指令，可以在根目录创建一个最简单的配置文件模板
npx tailwindcss init/** @type {import('tailwindcss').Config} */module.exports = { content: [], theme: { extend: {}, }, plugins: [],}content
content 选项是一个数组，用于指定 tailwindcss 语法生效的文件集合。
content: [ './pages/**/*.{js,jsx}', './components/**/*.{js,jsx}', './app/**/*.{js,jsx}', './src/**/*.{js,jsx}',]tailwind 使用 fast-glob 库来匹配文件。其中，* 匹配任意字符，** 匹配 0 个或者多个目录，{js, jsx} 匹配多个值。
配置完之后的文件数量越多，编译时的压力就越大，因此我们应该尽可能缩小 tailwindcss 的配置范围，只在需要它的地方使用。例如 utils 目录可能会包含大量的文件，但是不会使用 tailwindcss，那么我们就应该把他剔除掉。
当然我们还可以做其他的一些配置增强，但是大多都没什么用，对我来说，这里一个比较有用的配置项是 transform。我写的文章内容，源文件是 .md 格式，此时如果我想要在 .md 中使用 tailwindcss，那么就需要将其转换为 html 之后再适配 tailwindcss，我们就可以这样配置
const remark = require('remark')module.exports = { content: { files: ['./src/**/*.{html,md}'], transform: { md: (content) => { return remark().process(content) } } }, // ...}theme
theme 字段的配置是我们拿捏 tailwindcss 的核心关键。我们可以通过这个字段自定义任意语法。但是这个语法新人玩家容易看不懂，一长串不知道如何使用。我给大家讲解一下很快就很搞懂了
首先，theme 中包含了大量的字段，这些字段有 colors，textColor，这个是啥意思呢？就很迷惑。
✓
我们可以在这个地址中，查看默认的完整配置项 https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js#L5
其实，我们只需要利用好官方文档，就能很轻松的搞懂这些配置。theme 中的字段主要分为两类，一类表示 css 属性。一类表示配置。
例如在配置文件中，有一个 borderWidth的配置如下
borderWidth: { DEFAULT: '1px', 0: '0px', 2: '2px', 4: '4px', 8: '8px',},这看上去像是一个 css 属性，又像是一个配置项，那么我们可以去官方文档的如下地址中，直接查这个单词. 点开之后发现，这里确实是一个属性值。并且具体的缩写与写法，配置参数都一目了然，比只看官方文档更加具体。
又例如，我们在配置项中发现了一个属性 spacing
spacing: { px: '1px', 0: '0px', 0.5: '0.125rem', 1: '0.25rem', 1.5: '0.375rem', 2: '0.5rem', 2.5: '0.625rem', 3: '0.75rem', 3.5: '0.875rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem', 9: '2.25rem', 10: '2.5rem', 11: '2.75rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 24: '6rem', 28: '7rem', 32: '8rem', 36: '9rem', 40: '10rem', 44: '11rem', 48: '12rem', 52: '13rem', 56: '14rem', 60: '15rem', 64: '16rem', 72: '18rem', 80: '20rem', 96: '24rem',},然后对应去官方文档查一下，发现这是一个配置项。那么我们就可以知道，这可能会作为入参运用到其他属性的设置中去。
✓
我们也可以自己定义非 rem 的属性单位，使用数组遍历的方式生成 1px -> 500px 中比较常用的一些数值，具体要结合实际情况和设计规范来约定它的配置
有了这个配置项之后，我们就可以使用它作为入参去配置其他 css 属性，例如 margin 值。这里的 theme 表示一个 get 方法，可以获取到 theme 配置项中对应属性的具体值。例如这里的 theme('spacing') 就是获取到我们刚才的配置项
margin: ({ theme }) => ({ auto: 'auto', ...theme('spacing'),}),这样，margin 写法后面跟的数字，就是我们约定的 spacing 中具体的值了。
m-0.5 ，对应的值，就是 spacing 中的 0.5:0.125rem
theme 中的大多数属性值，都是 css 属性值，只有少数几个值是表示配置项，具体内容不用刻意去记忆，只需要在用到的时候查阅文档即可。如果你只是需要做简单粗暴的自定义修改，直接在默认配置的基础之上修改样式就可以
1
定义自己喜欢的语法
自定义语法更好的方式是使用 extend 配置去覆盖原有配置项。例如，我想要重新针对 background-color 定义一个语法写法如下，使用黑色的拼音缩写来表达颜色，使用数字来表示不同程度的黑色
bg-heise-0bg-heise-1bg-heise-2bg-heise-3bg-heise-4首先我们要做的第一件事情，是在官方文档中，找到 background color 对应的缩写是什么
然后在 extend 字段中，对应的字段里，配置自定义的语法，heise.
theme: { extend: { backgroundColor: { heise: { 0: 'rgba(0, 0, 0, 0)', 1: 'rgba(0, 0, 0, 0.1)', 2: 'rgba(0, 0, 0, 0.2)', 3: 'rgba(0, 0, 0, 0.3)', 4: 'rgba(0, 0, 0, 0.4)', },此时，我们的语法就是属性缩写开头的方式， bg-heise-0，我们可以看到，在文件中使用改语法时，智能提示已经有了我们自己定义的语法，完美！
2
定义自己想要的功能块
tailwindcss 有三个模块。
@tailwind base;@tailwind components;@tailwind utilities;base 表示样式重置模块。components 表示组件模块，utilities 表示功能模块，我们可以通过插件的形式，往这几个功能模块中新增我们想要的功能块。
例如，我希望自定义默认的 button 元素的样式，那么我们就可以往 base 模块中注入样式，首先引入插件方法
const plugin = require('tailwindcss/plugin')然后在 plugins 字段中新增配置样式
module.exports = { plugins: [ plugin(function({ addBase, theme }) { addBase({ 'button': { color: theme('colors.orange.700') } }) }) ]}然后，我在项目中写上如下代码，对应的结果如图所示，文字颜色变成了 orange.700
<button>自定义button默认样式</button>我们可以通过这中方式约定所有的基础样式，button, input 等都非常需要这样的约定。
当然，我们也可以通过类似的方式往 components 中新增样式。例如我希望新增一个 card 组件，用于表示一个区域的容器，那么我就可以这样写
plugin(({addComponents, theme}) => { addComponents({ '.card': { display: 'inline-block', padding: '1rem', border: '1px solid', borderRadius: '4px', borderColor: theme('colors.red.400'), margin: '1rem' } })}),然后我在项目中编写如下代码
<div className='card'> <button>自定义button默认样式</button></div>给力！
3
定义自己想要的插件
如下图所示，此时我们想要实现的一个功能是自定义字体大小的递增序列。具体的编号和对应的值都由我们自己来定 fsize-12，而不是通过默认的 text-xxx 来约定。
首先，我们先在 theme 中约定配置项，数量太多的时候，你也可以通过数组遍历来快速创建
theme: { fsizes: { 12: '12px', 14: '14px', 16: '16px', 18: '18px', 24: '24px', 32: '32px', }, ...然后，plugins 字段中，使用 matchUtilities 方法动态匹配后缀自增的 class
plugin(({matchUtilities, theme}) => { matchUtilities({ fsize: (value) => ({ fontSize: value }) }, { values: theme('fsizes') })})搞定，最后的演示结果如图所示
4
高级用法：简单实现皮肤切换
最后，我们再来一个具体的，实用功能的实现：皮肤切换。具体的实现方式仍然是利用 css 自定义变量来做到。
实现效果如图所示
✓
主题来源于 tailwindcss 官方教学视频
我们来看一下实现步骤。
首先，我们要在入口 css 中文件中，约定不同主题的 css 变量。
@layer base { :root { --color-text-base: #FFF; --color-text-muted: #c7d2f7; --color-text-inverted: #4f46e5; --color-fill: #4338ca; --color-button-accent: #FFF; --color-button-accent-hover: #eef2ff; --color-button-muted: 99, 102, 241; } .theme-swiss { --color-text-base: #FFF; --color-text-muted: #fecaca; --color-text-inverted: #dc2626; --color-fill: #b91c1c; --color-button-accent: #FFF; --color-button-accent-hover: #fef2f2; --color-button-muted: 239, 68, 68; } .theme-neon { --color-text-base: #111802; --color-text-muted: #2fc306; --color-text-inverted: #ebfacc; --color-fill: #b3ff17; --color-button-accent: #243403; --color-button-accent-hover: #374f05; --color-button-muted: 212, 255, 122; }}@layer base 表示这些定义会运用到 base 模块中。
定义好了主题之后，我们就需要去 extend 字段中自定义语法。首先是针对于文字颜色字段，该字段在 css 中为 color，不过在 tailwind 中，被重新定义了语义，称之为 text color
因此，我们要使用 textColor 来定义该语法，
extend: { textColor: { skin: { base: 'var(--color-text-base)', muted: 'var(--color-text-muted)', inverted: 'var(--color-text-inverted)', } },textColor 的对应缩写为 text，因此最终我们自定义的语法名如下所示
用同样的方式定义背景颜色
backgroundColor: { skin: { fill: 'var(--color-fill)', 'button-accent': 'var(--color-button-accent)', 'button-accent-hover': 'var(--color-button-accent-hover)', 'button-muted': ({opacityValue}) => { console.log(opacityValue) if (opacityValue !== undefined) { return `rgba(var(--color-button-muted), ${opacityValue})` } return `rgb(var(--color-button-muted))` }, }},在需要颜色的地方，我们使用自己定义好的语法来设置颜色。
他们的值，都由 var 来声明，对应到我们刚才定义的 css 变量。因此，这样做好之后，当我们改变 css 变量的生效结果，那么皮肤切换就能自定生成。
我们可以更改顶层父组件的 className 来做到变量名的整体切换。
实现完成之后，再来看一眼演示效果，没有问题，搞定！
5
总结
实践中的需求非常复杂，每个团队对于 UI 的设计规范不同，那么默认样式就很难满足所有团队的需求，因此，掌握如何将 tailwindcss 配置为你的形状，是在团队中推广和运用它的必要条件。
但是官方文档对于配置文件的讲解有一些缺漏，导致我也花了很长时间，查了不少资料才最终读懂，因此这篇文章我把缺漏的部分补上，有助于道友们更加方便理解它，并结合官方文档彻底拿捏 tailwindcss 的自定义配置。
-
友情链接
- 成为 React 高手，推荐阅读 React 哲学