Tailwinds .config.js内容属性

Question

我试图理解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/

Answer 1

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

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

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

Answer 2

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

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

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

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

我希望我能解决你的问题

Answer 3

你完全正确。顺风不应该扫描你的index.html。它应该只扫描内容数组中列出的文件。我猜你可能漏掉了什么。可能是您按照安装指南错误地编译并链接了输出文件到index.html。