Tailwind CSS 未使用 CLI 应用

Question

我正在尝试在我的项目中使用 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，字体就会改变，这反映了 tailwind 正在工作但如果我应用类，它根本不起作用。

我遵循的步骤：

使用 npm init -y
已安装 tailwind cli npm install -D tailwindcss
已创建 tailwind.config.js 个文件（根文件夹）
创建了 tailwind.css 文件并在该文件（根文件夹）中添加了 tailwind 指令
添加了一个 public 文件夹，其中有 index.html 和 styles.css 文件
为了构建 styles.css 文件，使用了 npx tailwindcss -i tailwind.css -o ./public/styles.css。
styles.css 文件现在包含一些 css ~400 行代码
在 index.html

Answer 1

yes i did run that command, also there's indeed some css written in styles.css (generated file)

这是默认的 CSS 重置，默认情况下随 Tailwind 一起提供。

回到问题

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

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

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

我还建议您查看 official documentation，在那里您可以找到更多关于如何 use/customize content 配置的示例。

Tailwind CSS 未使用 CLI 应用

Tailwind CSS not applying using CLI

javascript

css

tailwind-css

回到问题