Tailwinds tailwind.config.js 内容属性答案

【问题标题】：Tailwinds tailwind.config.js content propertyTailwinds tailwind.config.js 内容属性
【发布时间】：2022-07-07 00:42:01
【问题描述】：

我正在尝试了解 tailwind.config.js 文件的工作原理。我有一个带有尾风类的简单 index.html 文件，它可以工作！但我不明白这怎么可能，因为 tailwind.config.js 的内容属性正在 ./src 文件夹中查找 html 模板，对吗？

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

  theme: {
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
    },
    extend: {
      colors: {
        midnight: "#121063",
      },
    },
  },
  plugins: [],
}

由于某种原因，它也会读取/检测根目录中的文件（在 src 文件夹之外），这有什么原因吗？谢谢。

项目结构

node_modules
index.html
package.json
tailwind.config.js
postcss.config
vite.config
src/
   css/
   js/

【问题讨论】：

标签： tailwind-css

【解决方案1】：

我看到你已经在使用 postcss。在这里定义输入 CSS 文件和输出文件。 tailwindcss 配置文件配置其他东西。使用例如命令： npm run build 你构建你的应用程序。这里的配置文件给出了做什么的说明。

当然，然后在 index.html 中使用输出 css！

您也可以使用 npx 命令构建 tailwindcss 输出文件。 npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

【讨论】：

好的，谢谢你的回答，但是我还是不明白，内容是什么：["./src/**/*.{html,js}"], for?
@R0bertinski ["./src/**/*.{html,js}"]，这意味着 Tailwind 在构建时只会遍历 /src 文件夹中的 html 和 javascript 文件，以查看使用了哪些样式。从此顺风生成新的 CSS 文件，其中仅包含您真正使用的样式。此过程也称为清除。
这就是为什么我不明白，因为 index.html 它不在 src 文件夹中，但是当我更改 index.html 文件中的某些类时，css 会更新。我不确定我自己的解释是否正确。
@R0bertinski 我认为你在理解顺风方面有一点问题。更多问题：1）如何触发顺风的构建？ 2）您的输出顺风样式文件有多大？ 3) 你能在你的问题中包含你的 package.json 吗？
在我的理解中，tailwind 会扫描 html 源并将 trasile（或转换）到 css 类，对吧？但正如我上面提到的，该文件不在我在 tailwind.config.js 文件中配置的文件夹中。构建是通过 "npm run dev" "scripts": { "dev": "vite", "test": "echo \"Error: no test specified\" && exit 1" } 触发的，我使用 vite 作为好吧。

【解决方案2】：

Tailwind CSS 的工作原理是扫描所有 HTML、JavaScript 和任何其他模板文件以查找类名，然后为这些样式生成所有相应的 CSS。

因此，您在 content 中定义的路径 ./src/**/*.{html,js} 意味着 src 之后包含任何名称的 html 和 js 文件的任何目录都没有关系，TilwindCSS 会检查它们。

使用* 匹配除斜线和隐藏文件之外的任何内容
使用** 匹配零个或多个目录
在{} 之间使用逗号分隔值来匹配选项列表

有关详细信息，请参阅以下链接： https://tailwindcss.com/docs/content-configuration

希望我能解决你的问题

【讨论】：