如何从 Tailwind 中拆分生成的 CSS 代码？

Question

我正在寻找一种解决方案，将 Tailwind PostCSS 插件（与 purgecss 插件结合使用）生成的大 CSS 文件拆分为多个 CSS 文件（每个消费者 JS 文件一个 CSS 文件）。可以通过查看 JS 文件中使用的选择器（即 p-1 和 m-1 等类名）来检测 JS 文件消耗的 CSS 规则。

知道如何实现这一点或类似的东西吗？

Answer 1

我能够部分解决这个问题。

首先，从postcss.config.js 中删除所有顺风代码。然后在包含文件的文件夹中创建tailwind.config.js，即使用tailwind类。

这是我的基本演示示例。

文件夹中有两个文件：

App.vue
tailwind.config.js

App.vue：

<template>
  <div
    id="app"
    class="flex flex-col flex-no-wrap items-center content-center justify-center"
  >
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "I'm from vue file"
    };
  }
};
</script>

<style lang="scss">
@import "scss/dynamic/tailwind.scss";

#app {
  color: $red;
}
</style>

scss/dynamic/tailwind.scss（在任何文件中轻松访问tailwind）：

@tailwind components;
@tailwind utilities;

tailwind.config.js：

module.exports = {
  purge: {
    mode: "all",
    content: [__dirname + "/App.vue"]
  },
  theme: {},
  variants: {},
  plugins: []
};

webpack.config.js（仅 css 部分）：

...
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        plugins: env => {
          const dir = env._module.context;
          const config = dir + "/tailwind.config.js";

          return fs.existsSync(config)
            ? [require("tailwindcss")(config)]
            : [];
        }
      }
    },
    {
      loader: "sass-loader",
      options: {
        data: `@import "scss/static/abstracts";`
      }
    }
  ]
}
...

最后我有一个动态加载的 css 文件，如下所示：

.flex{display:flex}.flex-col{flex-direction:column}.flex-no-wrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-center{justify-content:center}.content-center{align-content:center}#app{color:red}

问题，我仍然有：

• 如果多个文件（在一页上动态加载）使用相同的类，则 css 代码会重复
• 我需要多个配置文件 + 每个文件夹只有一个配置文件。
• 主app.scss 的配置文件在.blade.php 文件中看不到类，可能与文件路径有关：

const path = require("path");

module.exports = {
  purge: [
    path.resolve("../../../../views/base.blade.php"),
    path.resolve("../../../../views/page/home.blade.php")
  ],
  theme: {},
  variants: {},
  plugins: []
};