Using the CLI, generating custom classnames creates a tailwindcss-classnames.ts file that is over 100MB

[Dandandans]

Environment:

• TailwindCSS version: 2.2.16
• tailwindcss-classnames version: 2.2.3
• Node.js version: 14.15.5

Current Behavior

After migrating Tailwind to JIT mode, using the CLI to generate custom classnames ouputs a tailwindcss-classnames.ts file that is over 112 MB. The previous size is 858 KB.

Expected Behavior

Generate a reasonably sized classnames file.

How to Reproduce

Run tailwindcss-classnames -i tailwind.config.js -x custom-tailwind-classes.ts -o tailwindcss-classnames.ts to generate classnames.

Possible solutions (Optional)

Additional Questions

• I've searched the issues list and this is not a duplicate
• I'm willing to fix this error

[muhammadsammy]

This is because JIT engine produces a lot of additional classnames.

A workaround is to ignore the generated file by git and generate it locally and/or on CI e.g. if you have a "start" npm script that builds and starts the app, you would add a prestart script: "prestart": "tailwindcss-classnames -i tailwind.config.js -x custom-tailwind-classes.ts -o tailwindcss-classnames.ts" and the file will be generated every time you start the app.

I will also try to add minification feature to the CLI to reduce the size of generated file as possible

[chensusays]

I'm also seeing this issue due to JIT mode being enabled but adding the prestart script did not make difference for me. I'm turning JIT mode off for now but looks like Tailwind v3 will have JIT mode enabled as default.

[muhammadsammy]

Making the file ignored by Git and generating it automatically by prestart does not actually solve the whole problem, but it solves version control problem with large files.

Also as @Dandandans suggested, File size can be reduced with this alternative approach