Tailwind -- 项目中未识别CSS

Question

这是我第一次使用 Tailwind CSS。出于某种原因，我尝试应用的样式没有被识别。

我运行了 npx tailwindcss init，生成了一个 tailwind.config.js 文件。现在我的文件是这样的：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./templates/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

我创建了一个 src/input.css 文件，里面有以下内容：

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

然后，我运行了这个命令：npx tailwindcss -i ./src/input.css -o ./templates/css/style.css

这样就生成了一个 style.css 文件 [但是，我注意到我的 Visual Studio Code 把它识别为普通文本文件，而不是 css 文件]

现在，这是我的 templates/base.html 文件的代码：

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="css/style.css">
</head>
{% include 'header.html' %}

    <main>
        {% block content %}
        {% endblock %}
    </main>

{% include 'footer.html' %}

还有 templates/header.html 的代码：

<body> 
  <header class="bg-purple-100 sticky top-0 z-10 flex justify-between items-center px-4 py-2">
    <a href="{% url 'home' %}" class="text-white">HELLO WORLD</a>
    <div class="flex justify-between items-center space-x-4">
        <a href="" class="text-white">Search</a>
        <a href="" class="text-white">Airing</a>
        <a href="" class="text-white">Site theme</a>
        {% if user.is_authenticated %}
        <div class="dropdown">
            <button onclick="toggleDropdown()" class="dropbtn text-white">Profile</button>
            <div id="myDropdown" class="dropdown-content">
                <a href="{% url 'profile' %}">Profile</a>
                <a href="{% url 'settings' %}">Settings</a>
                <a href="{% url 'notifications' %}">Notifications</a>
            </div>
        </div>
        {% endif %}
    </div>
</header>

在运行命令：npx tailwindcss -i ./src/input.css -o ./templates/css/style.css --watch 后，我得到了以下输出：

**正在重建...

警告 - 在你的源文件中没有检测到任何工具类。如果这让你感到意外，请仔细检查你的 Tailwind CSS 配置中的 content 选项。

警告 - https://tailwindcss.com/docs/content-configuration`**

这是我的文件夹结构，如果有帮助的话：

├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── input.css
├── templates
│   ├── app1
│   │   ├── app1_1.html
│   │   ├── app1_2.html
│   │   └── app1_3.html
│   ├── css
│   │   └── style.css
│   ├── app2
│   │   └── app2_1.html
│   ├── base.html
│   ├── header.html
│   ├── footer.html
├── tailwind.config.js

我需要如何正确配置我的 Tailwind CSS 配置文件？或者还有其他问题吗？

提前谢谢你 :)

文件结构 web 开发样式表前端开发 tailwind css css 配置视觉工作室代码工具类

Tailwind -- 项目中未识别CSS

1 个回答

撰写回答