Visual Studio 代码 - 使用 Tailwind JIT CSS 在保存时编译

Posted 2023-03-06

【中文标题】Visual Studio 代码 - 使用 Tailwind JIT CSS 在保存时编译

【英文标题】：Visual Studio code - compile on save with Tailwind JIT CSS

【发布时间】：2021-09-18 13:25:55

【问题描述】：

我正在使用 Reactjs 应用程序、Tailwind JIT CSS 和 Visual Studio 代码编辑器构建一个网站。我在使用 VScode 时遇到了“保存时编译”的问题。当我在文件中更改 CSS 时，例如：App.js 文件中的 className="ml-6"，然后保存该文件。然后 VScode 将自动编译并运行，但是当我检查浏览器的效果时没有任何变化。我认为 VScode 只为修改后的文件重新编译。所以 Tailwind JIT CSS 没有被编译。 （请注意，必须重新编译 Tailwind JIT 才能更新 CSS。） 我可以通过对 tailwind.config.js 文件进行任何更改并保存它来解决此问题。然后 VScode 将重新编译 Tailwind jit CSS，并且浏览器中的 web 更新为 css。 但这会减慢编码和调试速度。您能否在不更改 tailwind.config.js 文件的情况下帮助我在保存时重新编译 以获取 CSS？非常感谢。

【问题讨论】：

您好，欢迎来到 SFSE！我知道你在寻求帮助，但我认为你可能来错地方了。虽然我们确实使用 VS Code，并且我们可以在 Salesforce 中使用 React，但我不确定我们是否是最适合您的资源。我们旨在回答有关 Salesforce 技术的问题，而您的书面问题不符合该标准。我将要求将其移至Stack Overflow，这非常适合您的问题。你应该很快就会在那里得到答案。不过，如果您确实有 Salesforce 特定的问题，我们很乐意提供帮助！

是的，很抱歉。非常感谢您的支持。

无需道歉，它发生的频率比您想象的要频繁得多。当您可以在其他地方得到答案时，让您在这里等待只是一种伤害。

@BietKhong，让我看看你的tailwind.config.js

@JsWizard 是的，当然：module.exports = mode: 'jit', purge: [ './public/**/*.html', './src/**/*.js,jsx,ts,tsx,vue', ], darkMode: false, // or 'media' or 'class' theme: extend: screens: 'md-992px':'992px', 'lg-1200px':'1200px', , , , variants: extend: , , plugins: [],

【参考方案1】：

我建议您在完全熟悉 TailwindCSS 用法后使用 JIT 模式。除非您有特定原因使用JIT 模式，否则只需将其作为一般用法删除即可。

JIT 模式在您创作模板时按需生成样式，而不是在初始构建时提前生成所有内容。

因此，如果您在 tailwind.config.js 中使用错误或遗漏的自定义设置，那么它将无法按您的预期进行。

尽管如此，想使用JIT，然后仔细检查这个Doc。

我没有发现您的代码无法正常工作的任何其他原因。 我希望你成功！ :)

ps.. 请删除你的 ./src/assets/css/src 文件夹和文件^^

【讨论】：

我的代码可以正常工作。但是当我使用 css 进行修改时，例如 className="md:w-[90px]"，在我保存更改后 VScode 编译器不会编译 css。我不得不在tailwind.config.js 中做一个小改动，例如：在任意行的末尾添加一个空格“”，然后保存。

所以我的问题出在编译器上，而不是完全出在 css 上。我希望我的 css 可以在保存后编译。