为什么tailwind css没有效果？

如何解决为什么tailwind css没有效果？

没有错误，但 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

解决方法

不要从 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 插件）。