使用 tailwindcss-patch@2
来提取你的类名吧
tailwindcss-patch
是一个 tailwindcss
生态的扩展项目。也是 tailwindcss-mangle
项目重要的组成部分。
最近我发布了 tailwindcss-patch
的 2.x
版本,主要添加了一个配置文件读取和工具类名提取额功能。
让我们来看看怎么使用它吧。
安装
选择你喜欢的包管理器
<yarn|npm|pnpm> add -D tailwindcss-patch
- 给
tailwindcss
打补丁
npx tw-patch install
- 在
npm
的prepare
hook
里加入指令
package.json
{
/* ... */
"scripts": {
"prepare": "tw-patch install"
}
}
使用方式
命令行 Cli
开始提取吧
npx tw-patch extract
默认情况下,执行成功后会有一个 json
文件 .tw-patch/tw-class-list.json
在你的项目中出现。
当然,你可以通过配置文件 tailwindcss-mangle.config.ts
来自定义这个行为。
Nodejs API 的方式来使用
import { TailwindcssPatcher } from 'tailwindcss-patch'
const twPatcher = new TailwindcssPatcher(/* options */)
// do patch
twPatcher.patch()
// get all contexts at runtime
twPatcher.getContexts()
// get all class generated by tailwindcss utilities
twPatcher.getClassSet()
配置
初始化
npx tw-patch init
这样在你的当前的 cwd
中就会出现一个 tailwindcss-mangle.config.ts
文件:
import { defineConfig } from 'tailwindcss-patch'
export default defineConfig({})
你可以通过 patch
字段来自定义它的行为:
import { defineConfig } from 'tailwindcss-patch'
export default defineConfig({
patch: {
output: {
filename: 'xxx.json',
loose: true,
removeUniversalSelector: true
},
tailwindcss: {
config: 'path/to/your-tailwind.config.js',
cwd: 'project/cwd'
}
}
})
What’s next?
目前我只是提取了所有的工具类,实际上可以获取 tailwindcss
的上下文进行分析。你可以给我提 issue
或者 pr
的方式,来为这个项目添加更多的功能,
当然,提取之后这个 json
当然也不是只是给你看看的。你可以对它进行一些分析,而我是把它作为我 tailwindcss-mangle
的数据文件来使用的。
tailwindcss-mangle
本身是一个混淆工具,用来混淆 tailwindcss
生成的工具类,具体的使用方式就看下篇文章吧。