Tailwind PostCSS 内联注入样式，而不是生成 CSS 文件答案

【问题标题】：Tailwind PostCSS inject styles inline instead of generating a CSS fileTailwind PostCSS 内联注入样式，而不是生成 CSS 文件
【发布时间】：2022-06-30 16:54:49
【问题描述】：

我正在使用 PUG + Tailwind + PostCSS 来生成使用基本 NPM 脚本生成的静态单页 HTML 文件（如下图）

我希望最终的 HTML 将顺风样式直接内联到 index.html 页面中，而不是生成为 .css 文件，而 index.html 文件中引用了它们。

而不是使用外部文件：

link(rel="stylesheet" href="styles.css")

我想要这个：

<style>
  // all my (tailwind) CSS here
</style>

显然，注入必须在 Pug 编译后发生并且顺风也已编译。

我的问题是，有 Tailwind 插件还是 PostCSS-cli 插件/设置？

我一直在寻找几个小时没有运气。

这是我的 NPM 脚本：

"start": "npm run build && npm run css",
"build": "pug -O src/data/index.js -P -w src/html/index.pug -o dist",
"css": "postcss -o ./dist/styles.css ./src/css/*.css --watch",

【问题讨论】：

我很好奇，你得到答案了吗？
@AirOne - 我没有
@vsync 如果你对 Rollup 感兴趣，我可以为你发布一个我最终得到的解决方案，虽然不是很好，但你得到了静态捆绑的 css。

标签： css pug tailwind-css postcss

【解决方案1】：

您可以随时禁用 css“清理”，独立于 pug 编译 css 并将它们与 webpack 链接在一起。

参见this question 和this webpack plugin。

希望它有帮助，一次。至少它会起作用。

【讨论】：