关于前端:使用-tailwindcsspatch2-来提取你的类名吧

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