tailwind-css - 在 Svelte 应用程序中使用 Tailwind CSS 时构建时间太长

Question

EDIT - By using SvelteKit starter app from here and applying tailwindcss as a adder by following steps through this repo I was able to compile the svelte-app with tailwindcss utilities in real-time.

But would still like to know about the issue I mentioned below and a fix for it.

尝试创建一个 Svelte 应用程序并向其添加 Tailwind CSS 框架。

到目前为止: 我已经安装了 svelte 应用程序并添加了 Tailwind CSS 和基于此的其他要求 website而且我能够在我的应用程序中使用 Tailwind 类和实用程序。

现在的问题是，即使是这样简单的项目，应用程序的构建时间也太长(~19 秒)，不适合使用。

All other file configs and properties are default other than the changes mentioned in the link above to add tailwind to a svelte project.

<!--------- App.svelte --------->
...

<main>
    <h1 class="text-purple-400">Hello World!</h1>
</main>


<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  ...
</style>

############################ Terminal output ############################

bundles src/main.ts → public\build\bundle.js...
created public\build\bundle.js in 18.7s

[2021-11-25 20:10:38] waiting for changes...
  [20:10:38] 200 ─ 0.87ms ─ /
  [20:10:38] 200 ─ 1.29ms ─ /global.css
  [20:10:38] 200 ─ 1.68ms ─ /build/bundle.js
  [20:10:38] 200 ─ 2.82ms ─ /build/bundle.css
  [20:10:38] 200 ─ 0.73ms ─ /favicon.png

所以到目前为止，我在那个过程中尝试和理解的是:

1. 构建时间过长是由于 Tailwind utilities.css在 <style> 中进行的每次更改后都会重建文件的应用程序。 (而且由于这是与 base.css components.css 相比最大的文件，因此需要更多时间)
2. 解决此问题的一种方法是单独导入这些 Tailwind 文件，这将避免重建 utilities.css每当在应用程序中进行样式更改时。 (我不清楚这将如何解决问题)

我通读了许多与此相关的 GitHub 讨论，但我仍然无法解决我的问题，也无法理解单独导入文件有何不同？

所以我的最后一个问题是:

解决此问题的方法是什么(使用 Tailwind 时减少构建时间)以及该修复方法如何解决问题？

提前谢谢你:)。

附言- 这是我在这里的第一个问题，对于任何错误，我们深表歉意。

Answer 1

我也遇到了同样的问题。对我来说https://github.com/svelte-add/svelte-add工作正常。您可以使用以下命令添加 tailwind 和 postcss

npx svelte-add postcss
npx svelte-add tailwindcss

**编辑 1:- **您还可以将 tailwind.config.js 选项中的清除选项设置为以下值之一，这也会加快构建时间。

purge:{
   enabled: true
}

或

const production = !process.env.ROLLUP_WATCH;
purge:{
  enabled: production
}