Tailwind CSS 样式未在 Svelte 应用程序中呈现

Question

我已经使用“npm create vite@latest”设置了一个 svelte 应用程序，选择使用 Svelte 和 TypeScript。我使用 Vite 作为服务器，并且我还按照here的说明安装了 TailWind CSS。

我的tailwind.config.cjs代码：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./webapp/**/*.{svelte,html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

我当前的app.css代码：

@tailwind base;
@tailwind components;
@tailwind utilities;

我在 src 文件夹中创建了一个路由文件夹，其代码是：

<script>
  import "../app.css";
</script>

<slot />

我不断收到此错误：

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

我已停止服务器并再次运行它，但出现了相同的问题。我已经检查了内容目录一百万次，甚至尝试使用特定的文件路径。我似乎无法让它发挥作用。谁能帮我解决这个问题吗？我还附上了我的工作文件夹的图像。我真的很感激所提供的任何见解。

或多或少如上所述；在阅读了大量文档和观看无数视频后，我不确定我做错了什么。与我合作的开发人员正在使用 Svelte、TS 和 Tailwind CSS，否则我会尝试不同的方法。

Answer 1

由于您在

webapp

文件夹中有 Vite，因此就其构建/编译而言，这将是项目的“根”。考虑将

postcss.config.js

和

tailwind.config.cjs

移至

webapp

文件夹中。

然后，考虑将

content

中的

tailwind.config.cjs

路径更改为：

module.exports = {
  content: ['./src/**/*.{svelte,html,ts}'],

确保从

vite

文件夹中运行

webapp

命令。