使用 build 命令后 TailwindCSS 的输出文件为空答案

【问题标题】：TailwindCSS's output file is empty after using the build command使用 build 命令后 TailwindCSS 的输出文件为空
【发布时间】：2022-06-18 05:15:46
【问题描述】：

我尝试在 MacOS 上使用 TailwindCSS。我使用以下命令安装它：

npm install -D tailwindcss

然后为了创建配置文件，我运行了以下命令：

npx tailwindcss init

然后我将我的配置文件（tailwind.config.js）配置为以下代码：

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加一些文件后，我的资源管理器如下所示：

最后，我运行了以下命令，期望在我的output.css 文件中出现一些 CSS：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

我检查了我的output.css 文件，它是空的。顺便说一句，在我的input.css 文件中，我输入了以下代码行：

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

但是在运行上一条命令后，在我的终端中看到以下消息：

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

有谁知道为什么这不起作用？

【问题讨论】：

您使用什么模块打包工具？或任何框架？
我什至不知道我是否在使用模块捆绑器。如果 Node.js 很重要，那么我正在使用它。
module bundler 是 webpack, vite, parcel,... 你可以用它们来制作静态站点
我不记得使用过任何一个。

标签： css npm tailwind-css

【解决方案1】：

您似乎正在将输出 CSS 导出到您的 src 文件夹中。试试把tailwind.config.js改成下面的代码

module.exports = {
  content: ["./dist/**/*.{html,css ,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

【讨论】：