为什么顺风css没有效果？答案

【问题标题】：Why is tailwind css having no effect?为什么顺风css没有效果？
【发布时间】：2021-04-17 09:11:21
【问题描述】：

没有错误，但 Tailwind 不应用任何样式：

package.json

"dependencies": {
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "vue": "^3.0.5"
},
"devDependencies": {
    "autoprefixer": "^9.8.6",
    "parcel-bundler": "^1.12.4",
    "postcss": "^7.0.35",
    "@vue/cli": "^5.0.0-alpha.2"
},

postcss.config.js

module.exports = 
{
    plugins: 
    {
        tailwindcss: {},
        autoprefixer: {}
    }
}

tailwind.config.js

module.exports = 
{
  purge: [],
  darkMode: 'class', // or 'media' or 'class'
  theme: 
  {
    extend: {},
  },
  variants: 
  {
    extend: {},
  },
  plugins: [],
}

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/main.css">
</head>
<body class="dark bg-gray-100">  
    <div class='app' id='app' class="bg-red-500">
        <div class="text-gray-50">hello world</div>
    </div>
</body>
</html>

main.css

@import "../../node_modules/tailwindcss/base.css";
@import "../../node_modules/tailwindcss/components.css";
@import "../../node_modules/tailwindcss/utilities.css";

使用：node ./node_modules/.bin/parcel src/index.html

【问题讨论】：

标签： tailwind-css parceljs

【解决方案1】：

不要从node_modules 目录导入Tailwind 的CSS 文件，而是按照Include Tailwind in your CSS section in the Tailwind docs 中的说明使用@tailwind 指令：

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

那么它应该可以工作了——我刚刚在我的机器上确认了它。（虽然你的构建命令对我不起作用，所以我改用npx parcel src/index.html。）

如果您查看您正在导入的 CSS 文件，您会发现它们包含我上面提到的相同的 @tailwind 指令。我不确定，但我认为 PostCSS 首先运行 Tailwind 插件，然后处理 @imports。这可以解释为什么 PostCSS 没有处理导入的 CSS 文件中的 @tailwind 指令（因为它已经运行了 Tailwind 插件）。

【讨论】：

非常感谢您的帮助！虽然还没有工作，仍然没有样式，由于某种原因它仍然没有看到 Tailwind 文件。例如，在我的 css 文件中：@tailwind "NoNSeNsE"; 构建时没有错误。 @tailwind "../../node_modules/tailwindcss/base"; 和 @tailwind "base"; 也是如此。是否有一种详细的方法来调试 Tailwind 或 Parcel，以便我可以准确地看到它要查找的文件？
哦，哈哈，我有 " 引号，而你没有。现在可以了。谢谢你的好心先生！