如何将Tailwind CSS生成的样式结果导出为独立CSS文件？

Tailwind 原生就支持你需要的能力，不需要额外引入第三方工具，操作流程如下：

• 第一步：配置扫描路径
  打开你的tailwind.config.js文件，在content字段中填入所有页面模板的路径匹配规则，确保Tailwind可以扫描到40万个页面中所有实际使用的类名，示例配置：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    // 此处路径替换为你项目实际的页面/模板文件路径规则
    content: ["./pages/**/*.html", "./components/**/*.{vue,jsx,tsx}"],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 第二步：编写入口CSS
  新建一个全局CSS入口文件（比如命名为global.css），写入Tailwind的基础指令：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

  如果你有多个页面重复使用的类名组合，可以额外用@apply封装为自定义类，进一步减少HTML文件的体积，示例：

  @layer components {
    /* 封装后所有页面直接用.btn-primary即可代替后面的所有类 */
    .btn-primary {
      @apply bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700 transition-colors;
    }
  }
  

• 第三步：构建生成独立CSS文件
  执行Tailwind的构建命令，输出独立的公共CSS文件：

  npx tailwindcss build -i ./global.css -o ./dist/common.css
  

  生成的common.css仅包含所有页面实际用到的类名对应的样式规则，体积通常仅为几KB到几十KB，你直接在所有页面统一引入该文件即可。
  如果你已经接入Vite、Webpack等构建工具，只要按照对应框架的Tailwind集成规则完成配置，构建产物里的CSS文件就是自动提取完成的公共样式，不需要手动执行上述构建命令。

内容的提问来源于stack exchange，提问作者Just a learner