Use tailwindcss-patch 2.x to extract your classNames

[sonofmagic]

Use tailwindcss-patch 2.x to extract your classNames

tailwindcss-patch is an extension to the tailwindcss ecosystem. It is also an important part of the tailwindcss-mangle project.

I recently released 2.x version of tailwindcss-patch, which adds a configuration file reading and tool class name extraction feature.

Let's see how to use it. It's fairly simple!

• Use tailwindcss-patch 2.x to extract your classNames
  • Setup
  • Usage
  • Cli
    • Extract all class into a json
  • Nodejs API
  • Config
    • Init Config File
  • What's next?

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

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.

[rix0rrr]

I want this feature very badly, to build an optimized build pipeline that can skip rebuilding Tailwind if some files changed, but not the actual list of classes in those files.

But I'm not too keen on "patching" my Tailwind version as advertised here.

Is there any chance we can get a feature like this (extract the list of found classes and write it somewhere, say a JSON file) in upstream Tailwind?