Tailwind CSS在项目中样式不生效，如何正确配置？

首次使用Tailwind CSS，遇到样式无法被识别的问题，操作步骤及问题如下：

1. 执行npx tailwindcss init生成tailwind.config.js，配置内容：

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

2. 创建src/input.css，内容：

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

3. 执行npx tailwindcss -i ./src/input.css -o ./templates/css/style.css生成style.css，但VS Code将其识别为纯文本而非CSS文件。
4. 相关HTML代码：

• 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>

5. 执行npx tailwindcss -i ./src/input.css -o ./templates/css/style.css --watch后，收到警告：

Rebuilding...
warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS 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？是否还有其他问题？

1. 修正tailwind.config.js的content配置 #

你的content路径仅匹配templates目录下直接的HTML文件，未包含app1、app2子文件夹内的文件，Tailwind无法扫描到这些文件中的类名，因此触发警告。修改为递归匹配所有子目录的HTML文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./templates/**/*.html'], // 双星号递归匹配所有子目录
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 解决VS Code识别style.css为纯文本的问题 #

• 临时处理：打开style.css，点击VS Code右下角的「纯文本」选项，选择「CSS」即可。
• 永久设置：打开VS Code设置（快捷键Ctrl+,），搜索「文件关联」，添加规则："files.associations": {"style.css": "css"}。

3. 修正HTML结构错误 #

你的base.html在<head>结束后直接引入header.html，但header.html包含<body>标签，导致HTML结构混乱，浏览器无法正确解析样式。调整如下：

• 修改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>
<body>
{% include 'header.html' %}

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

{% include 'footer.html' %}
</body>
</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>

4. 重新构建CSS #

重新执行watch命令：

npx tailwindcss -i ./src/input.css -o ./templates/css/style.css --watch

此时警告应该消失，style.css会生成你用到的Tailwind类样式，页面也能正确显示样式。

内容的提问来源于stack exchange，提问作者Alba Casillas