为什么Tailwind CSS没有效果？

Question

为什么Tailwind CSS没有效果？

3

没有错误，但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将源代码构建为应用程序。

- Richard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matias Kinnunen · Accepted Answer

不要从node_modules目录导入Tailwind的CSS文件，按照Tailwind文档中包含Tailwind在你的CSS中一节所述使用@tailwind指令：

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

那么它应该可以工作-我刚在我的计算机上确认了。 (尽管您的构建命令对我无效，所以我使用npx parcel src/index.html代替。)

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