应用 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 patchtwPatcher.patch()// get all contexts at runtimetwPatcher.getContexts()// get all class generated by tailwindcss utilitiestwPatcher.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 生成的工具类，具体的应用形式就看下篇文章吧。