在按需加载的基础上，如何提取 CSS 样式并且打包为一个 CSS 文件

admin

我的解决方案。不仅仅可以tailwindcss其他的也可以了

        "devDependencies": {
                "autoprefixer": "^10.2.4",
                "browser-sync": "^2.26.14",
                "browser-sync-webpack-plugin": "^2.3.0",
                "cross-env": "^6.0.3",
                "laravel-mix": "^6.0.11",
                "postcss": "^8.2.10",
                "postcss-import": "^14.0.0",
                "postcss-nested": "^5.0.3",
                "postcss-nested-ancestors": "^2.0.0",
                "resolve-url-loader": "^3.1.2",
                "tailwindcss": "^2.1.2"
        }


PurgeCSS 可以针对指定网页仅保留使用到的样式。实际上如果你使用 tailwindcss 的自定义配置，是可以配合 PurgeCSS 使用的。
我自己写了一个预处理工具，Tailwind CSS 本质不就是一堆缩写和 CSS 语法糖嘛，也不是很难。我个人不适合用 PurgeCSS 之类的自动裁切工具，因为一些 TailwindCSS 样式，是 JS 动态添加到 class 上的。原先静态 dom 里没有，PurgeCSS 就没办法正确提取所需要的所有样式，只能自己写了。
@3dwelcome purgecss 是可以处理 js 里面的 class 的，另外也可以自己写 extractorhttps://purgecss.com/extractors.html#default-extractor
@Mutoo 我说的 js 里的 class，不单是“bg-red-500”字符串，而是拼接后的字符串。比如 var styleval = "bg"+"-" + color + "-" + value;如果这都能猜到，那工具就神了。
@3dwelcome 那你大可直接把 bg-*-* 加到白名单里呀，何必猜呢。
@Mutoo @3dwelcome 谢谢，现在看来我还是要放弃它了。 用 Webpack 也不能实现我所需要的。 太难了 QAQ
https://www.npmjs.com/package/sass不喜欢 sass 语法当个 css 用也行，可以打包成一个文件