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

Nodejs version should >= 16.6.0

Setup

1. Install package

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

2. Patch tailwindcss

npx tw-patch install

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