使用 tailwindcss-patch@2 來提取你的類名吧

• 使用 tailwindcss-patch@2 來提取你的類名吧
  • 安裝
  • 使用方式
    • 命令行 Cli
      • 開始提取吧
    • Nodejs API 的方式來使用
  • 配置
    • 初始化
  • What’s next?

tailwindcss-patch 是一個 tailwindcss 生態的擴展項目。也是 tailwindcss-mangle 項目重要的組成部分。

最近我發布了 tailwindcss-patch 的 2.x 版本，主要添加了一個配置文件讀取和工具類名提取額功能。

讓我們來看看怎么使用它吧。

安裝

選擇你喜歡的包管理器

<yarn|npm|pnpm> add -D tailwindcss-patch

1. 給 tailwindcss 打補丁

npx tw-patch install

1. 在 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 生成的工具類，具體的使用方式就看下篇文章吧。