顺风tailwind.config.js内容属性

Question

我试图了解tailwind.config.js文件是如何工作的。我有一个简单的带有顺风类的index.html文件，它可以工作！但我不明白怎么可能，因为tailwind.config.js的content属性正在./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/

Answer 1

我看你已经开始使用postcss了。这里您定义了输入CSS文件和输出文件。尾风The配置文件配置其他东西。使用例如: npm运行构建之类的命令，您可以构建应用程序。在这里，配置文件给出了该做什么的说明。

当然，您可以在index.html中使用输出css！

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

Answer 2

顺风CSS的工作方式是扫描所有HTML、JavaScript和类名的任何其他模板文件，然后为这些样式生成所有对应的CSS。

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

• 使用*来匹配除斜杠和隐藏文件以外的任何内容，
• 使用**来匹配零或多个{}之间的逗号值，以匹配选项列表

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

我希望我能解决你的问题