如何评价CSS框架TailwindCSS？

端午三天，你们在放假，而我，一个人躲在家里，苦练 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-0
bg-heise-1
bg-heise-2
bg-heise-3
bg-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))`},}
},