tailwindcss-patch

tailwindcss-patch

[中文(zh-cn)]

get tailwindcss context at runtime ! extract all classes into file!

• tailwindcss-patch
  • Setup
  • Usage
  • Cli
    • Extract all class into a json
  • Nodejs API
  • Config
    • Init Config File
  • Migration form v1 to v2
    • 0. cli command change
    • 1. default remove * in json array result
  • What's next?

Nodejs version should >= 16.6.0

Setup

1. Install package

<yarn|npm|pnpm> add -D tailwindcss-patch

1. Patch tailwindcss

npx tw-patch install

1. Add prepare script (keeps patch persisted after npm install)

package.json

{
  /* ... */
  "scripts": {
    "prepare": "tw-patch install"
  }
}

Usage

Cli

Extract all class into a json

npx tw-patch extract

default there will be a json in .tw-patch/tw-class-list.json in your project.

you can custom this behavior by config 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()

Config

Init Config File

npx tw-patch init

Then there will be a ts file called tailwindcss-mangle.config.ts exist in your cwd.

The config as follows:

import { defineConfig } from 'tailwindcss-patch'

export default defineConfig({})

you can custom tw-patch behavior by patch option:

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

Migration form v1 to v2

0. cli command change

{
- "tw-patch"
+ "tw-patch install"
}

1. default remove * in json array result

[
- "*",
  "text-[99px]",
  "text-[100px]"
]

What's next?

At the moment I just extracted all the tool classes to actually get the context of tailwindcss to analyze. You can add more functionality to this project by giving me issue or pr.

Of course, the extracted JSON isn't just for you to look at. You can analyze it, and I use it as a data file for my tailwindcss-mangle.

The tailwindcss-mangle itself is an obfuscation tool to obfuscate the tools generated by tailwindcss, see the next article for more details on how to use it.