如何获取项目中使用的TailwindCSS类名列表（含自定义类）

下面几种方法可以帮你提取项目里用到的所有Tailwind类名，包括p-[60px]这类自定义值类：

方法1：用Tailwind CLI直接输出 #

Tailwind CLI的--dry-run参数可以在不生成最终CSS文件的前提下，扫描并输出所有检测到的类名：

npx tailwindcss --dry-run

执行后终端会打印全部类名，要是想把结果保存成文件，直接重定向输出就行：

npx tailwindcss --dry-run > tailwind-classes.txt

方法2：解析已生成的CSS文件 #

如果已经完成项目构建，可直接从输出的CSS文件里提取类名，比如写个简单的Node.js脚本处理：

const fs = require('fs');
// 替换成你项目生成的CSS文件路径
const cssContent = fs.readFileSync('./dist/tailwind.css', 'utf8');

// 匹配各类Tailwind类名的正则，覆盖普通类和自定义值类
const classRegex = /\.[a-zA-Z0-9\-_\[\]\/:.]+(?=\{)/g;
// 去重后去除类名前的点号
const classes = [...new Set(cssContent.match(classRegex))].map(cls => cls.slice(1));

fs.writeFileSync('tailwind-classes.txt', classes.join('\n'));
console.log('类名列表已保存到tailwind-classes.txt');

把脚本放在项目根目录，修改CSS路径后执行node extract-classes.js即可。

方法3：通过PostCSS插件钩子提取 #

如果用PostCSS构建项目，可以在配置里加一个自定义插件，在Tailwind处理完成后自动提取类名：

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    {
      postcssPlugin: 'extract-tailwind-classes',
      Once(root) {
        const classes = [];
        root.walkRules(rule => {
          if (rule.selector.startsWith('.')) {
            const classNames = rule.selector.split(',').map(s => s.trim().slice(1));
            classes.push(...classNames);
          }
        });
        const uniqueClasses = [...new Set(classes)];
        require('fs').writeFileSync('tailwind-classes.txt', uniqueClasses.join('\n'));
      }
    }
  ]
};

每次执行构建时，都会自动生成包含所有类名的文件。

注意：以上方法会包含Tailwind自带的Preflight基础样式类，要是不需要，可以手动在结果里移除，或者在正则/脚本里添加过滤规则。

内容的提问来源于stack exchange，提问作者Salma