Howto auto purge generated css in tailwind 4?

[stupkad]

I have setup a very minimalistic example following the installation guide, the guide https://tailwindcss.com/docs/installation/tailwind-cli. The index.html only includes three utility classes text-3xl font-bold underline, but the generated output.css is approx 50kB in size (minified).

Do I miss something, or is this as expected?

Is there a possibility to ONLY include this three utility classes in the generated outout? Nothing else.

[wongjn]

It could be that you do not have a .gitignore ignoring node_modules, hence Tailwind will pick up classes inside the files there and generate surplus classes. Try adding a .gitignore file to the root of the project:

node_modules

[Kareem-AEz]

I have a .gitignore file:

However, even after building the project, all the classes are still present:

I'm using Vite with React.

[wongjn]

Those are your theme tokens, not CSS class rules. They are exposed in CSS by design: https://tailwindcss.com/docs/theme#using-your-theme-variables

[J05HI]

@wongjn yeah, but why are unused theme tokens still present in the output?
They should be purged too.

[wongjn]

They are exposed by design: https://tailwindcss.com/docs/theme#using-your-theme-variables

Though, they are looking to change this, see:

• Only expose used CSS variables #16211
• Revert: Only expose used CSS variables #16403

[J05HI]

@wongjn
Great! Thanks!