[Feature Proposal] Purge classes based on JS module import graph?

[mkarajohn]

From my understanding the way purging currently works is that the script simply scans your content directories and only includes classes found in those files (source). Works fine but: Is it possible/would you consider making this process a little more refined and only include classes from files that are actually imported in the project? (as an option maybe)

Right now if I have a component that is not used anywhere in the project, its classes will still be included in the generated CSS file.

Ideally that component's classes should be ignored until it's imported somewhere in the dependency graph.

The scenario I have in mind for this functionality are component libraries. It would be a nice optimisation to only generate CSS from the components you actually import in your project (instead of adding the node_modules path of the library to the content list and generate CSS from every single component in the library)

I experimented a little using https://github.com/dependents/node-dependency-tree with this config:

// deps.cjs

const dependencyTree = require('dependency-tree');
const fs = require('fs');

const config = {
  filename: './src/main.tsx',
  directory: './src',
  tsConfig: './tsconfig.json', // optional,
  filter: (path) => {
    return (
      path.indexOf('.ts') !== -1 ||
      path.indexOf('.js') !== -1 ||
      path.indexOf('.tsx') !== -1 ||
      path.indexOf('.jsx') !== -1
    );
  }, // optional
  noTypeDefinitions: false, // optional
};

const tree = dependencyTree(config);

const list = dependencyTree.toList(config);

fs.writeFile('deps.json', Buffer.from(JSON.stringify(list)), () => {});

//$ node deps.cjs

And then in the tailwind.config.js I am setting the content value as

import deps from './deps.json';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', ...deps],
  theme: {
    extend: {},
  },
  plugins: [],
};

And I got the result I was looking for: unused components' classes are not included in the final CSS file

[mkarajohn]

summoning @adamwathan (sorry!)

[moshie]

This would be very helpful!
Especially for component libraries using tailwind.
Currently tailwind pulls in all the css for all components across the library even if you're not using half of them anywhere in your application.

[wongjn]

A version of this feature is in Tailwind v4, from the v4 alpha release blog post:

You’ll notice that at least in these early alpha releases, it’s not even possible to configure your content paths. For most projects, you’re never going to need to do this ever again — Tailwind just finds your template files for you.

We do this using one of two ways depending on how you’ve integrated Tailwind into your project:

• Using the PostCSS plugin or the CLI, Tailwind will crawl your entire project looking for template files, using a bunch of heuristics we’ve built in to keep things fast, like not crawling directories that are in your .gitignore file, and ignoring binary file formats.

• Using the Vite plugin, we rely on the module graph. This is amazing because we know exactly what files you’re actually using, so it’s maximally performant, and with no false positives or negatives. We’re hoping to expand this approach outside of the Vite ecosystem with other bundler plugins in the future.

[moshie]

Thanks, was giving this a read after I posted my message.
Excited for this!