get tailwindcss context at runtime ! extract all classes into file!
Nodejs version should >=
16.6.0
- Install package
<yarn|npm|pnpm> add -D tailwindcss-patch
- Patch tailwindcss
npx tw-patch install
- Add
prepare
script (keeps patch persisted after npm install)
package.json
{
/* ... */
"scripts": {
"prepare": "tw-patch install"
}
}
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
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
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'
}
}
})
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.