乐趣区

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

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

  • 应用 tailwindcss-patch@2 来提取你的类名吧

    • 装置
    • 应用形式

      • 命令行 Cli

        • 开始提取吧
      • Nodejs API 的形式来应用
    • 配置

      • 初始化
    • What’s next?

tailwindcss-patch 是一个 tailwindcss 生态的扩大我的项目。也是 tailwindcss-mangle 我的项目重要的组成部分。

最近我公布了 tailwindcss-patch2.x 版本,次要增加了一个配置文件读取和工具类名提取额性能。

让咱们来看看怎么应用它吧。

装置

抉择你喜爱的包管理器

<yarn|npm|pnpm> add -D tailwindcss-patch
  1. tailwindcss 打补丁
npx tw-patch install
  1. npmprepare 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 生成的工具类,具体的应用形式就看下篇文章吧。

退出移动版