使用 `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

给 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'
    }
  }
})