Tailwind CSS 未使用 CLI 应用答案

【问题标题】：Tailwind CSS not applying using CLITailwind CSS 未使用 CLI 应用
【发布时间】：2022-01-05 20:14:48
【问题描述】：

我正在尝试在我的项目中使用tailwind css，似乎只是字体更改，但对使用类没有影响。

我在 vs 代码上使用实时服务器扩展。

package.json

{
  "name": "testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npx tailwindcss -i tailwind.css -o ./public/styles.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.0.9"
  }
}

tailwind.config.js

module.exports = {
  content: [
    '*'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.css

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div class="w-full bg-purple-900">
        <h1 class="text-green-100">
            <div class="bg-pink-500">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quidem voluptas facilis expedita sequi molestiae mollitia nobis doloremque tempora, suscipit illo voluptatum, totam ex maiores! Quaerat fugit laborum incidunt voluptate!</p>
            </div>
        </h1>
    </div>
</body>

</html>

所以如果我注释掉styles.css 的链接，我看不到任何效果。一旦我使用styles.css，字体就会发生变化，这反映了顺风正在工作但如果我申请课程，它根本不起作用。

我遵循的步骤：

使用npm init -y 创建了package.json
安装顺风cli npm install -D tailwindcss
创建tailwind.config.js 文件（根文件夹）
创建tailwind.css 文件并在该文件（根文件夹）中添加tailwind 指令
添加了一个公共文件夹，其中包含 index.html 和 styles.css 文件
用于构建styles.css 文件，使用npx tailwindcss -i tailwind.css -o ./public/styles.css。
styles.css 文件现在包含大约 400 行代码的一些 css
index.html 中的链接 styles.css 文件

【问题讨论】：

你是否运行了npm run dev，同时检查你生成的css文件里面有什么？
是的，我确实运行了那个命令，而且确实有一些css写在styles.css（生成的文件）中
然后检查您是否包含正确的文件路径，并通过检查元素检查它是否真的有效
我已经仔细检查了路径，它是正确的。我仍然不知道问题出在哪里。作为参考，我在问题中添加了“我遵循的步骤”

标签： javascript css tailwind-css

【解决方案1】：

是的，我确实运行了该命令，而且确实有一些 css 写在 styles.css（生成文件）中

这是默认情况下随 tailwind 提供的默认 CSS 重置。

回到问题

对我来说，当我将 tailwind 配置文件更改为以下内容时，dev 命令有效：

module.exports = {
    content: [
        './public/*'
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

我确保，tailwind 正在从 public 目录中的所有文件中查找必须使用的类（tailwind.css 文件包含在 npm 命令中）。

我还建议您查看official documentation，在那里您可以找到更多有关如何使用/自定义content 配置的示例。

【讨论】：