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

Posted 2023-02-19

【中文标题】如何从 Tailwind 中拆分生成的 CSS 代码？

【英文标题】：How to split generated CSS code form Tailwind?

【发布时间】：2019-11-04 23:29:03

【问题描述】：

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

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

【参考方案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 文件，如下所示：

.flexdisplay:flex.flex-colflex-direction:column.flex-no-wrapflex-wrap:nowrap.items-centeralign-items:center.justify-centerjustify-content:center.content-centeralign-content:center#appcolor: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: []
;

【讨论】：

所以，我可以通过修复配置文件：path.resolve(__dirname, "../../../../views/base.blade.php") 从.blade.php 获取课程。如果我知道动态加载的资产的顺序，并且有一些 purge-css 选项可以强制清除配置文件中指示的类，那么问题 1 似乎也得到了解决。将继续调查。