移出文件夹时 index.html 不起作用答案

【问题标题】：index.html not working when moved outside the folder移出文件夹时 index.html 不起作用
【发布时间】：2022-01-08 01:53:20
【问题描述】：

我对 tailwindcss 还很陌生。我得到了他们的安装文件工作，但我想在 dir 文件中进行更改。我希望我的index.html 位于src 文件夹之外，但每次我将它移到src 之外时，tailwind 类都不起作用。

这是我的directory tree

package.json

  "devDependencies": {
    "tailwindcss": "^3.0.12"
  }
}

tailwind.config.js

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

index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold text-purple-700">
    안녕하세요
  </h1>
</body>
</html>

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您需要更改 tailwind.config.js 文件中的 content 字段。在您当前的项目设置中，html 和 js 源文件应位于目录 {project_directory}/src/ 中。在你当前的设置下，项目目录结构应该如下：

project_directory/
   |
   |--- tailwind.config.js
   |
   |--- dist/
   |       | 
   |       |--- output.css 
   |
   |--- src/ 
           |
           |--- input.css
           |
           |--- index.html
           |
           |--- main.js

您可以通过更新文件 tailwind.config.js 中的字段 content 将源文件移动到不同的目录。在下面的例子中，tailwind.config.js文件中content字段中的定义是为了表明index.html文件可以定位到项目中根目录。有关更多信息，请阅读参考部分中的文档。

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './index.html',
  ]
}

如果要将 index.html 文件移动到项目根目录，请更新 tailwind.config.js 文件中的content 字段，如下所示：

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

参考文献

Configuring Source Path - Pattern Recommendations

【讨论】：

我想问一下，因为我没有得到任何关于这个答案的反馈。我建议的解决方案对您有用吗？

【解决方案2】：

使用 chrome 检查器工具控制台，检查 css 文件是否已加载。如果显示 404 错误，则您的 css 文件链接错误。

【讨论】：