使用 `tailwindcss-patch@2` 来提取你的类名吧

使用 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 生成的工具类，具体的使用方式就看下篇文章吧。