为什么 tailwind css 没有效果？

Question

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

Answer 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 首先运行s Tailwind 插件，然后处理 @imports。这可以解释为什么 PostCSS 没有处理导入的 CSS 文件中的 @tailwind 指令（因为它已经运行 Tailwind 插件）。

为什么 tailwind css 没有效果？

Why is tailwind css having no effect?

parceljs

tailwind-css