tailwindcss-patch

tailwindcss-patch

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

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

Nodejs version should >= 16.6.0

Setup

1. Install package

<yarn|npm|pnpm> add -D ts-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

Init Config File

tw-patch init

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

Extract all class into a json

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

import { TailwindcssPatcher } from 'tailwindcss-patch'

const twPatcher = new TailwindcssPatcher(/* options */)
// get all contexts at runtime
twPatcher.getContexts()
// get all class generated by tailwindcss utilities
twPatcher.getClassSet()

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]"
]