Tailwind CSS 元素内边距失效：MPTT评论回复系统缩进不生效

我正在用MPTT构建评论/回复系统，打算通过缩进明确区分回复评论的层级。我利用comment.level属性设置内边距类：level为0的父评论用pl-0，层级1的回复用pl-1，层级2的回复用pl-2，以此实现缩进效果。

加载回复的模板代码 #

{% load mptt_tags %}
        {% if not node.is_leaf_node %}
            {% for comment in comments %}
                {% if comment.level > 0 and comment.tree_id == tree_id %}
                    <div class="pl-{{ comment.level }} mt-2">
                        <div class="relative grid grid-cols-1 gap-4 p-4 mb-4 border rounded-lg bg-white shadow-lg">
                            <div class="relative flex gap-4">
                                <div class="flex flex-col w-full">
                                    <div class="flex flex-row justify-between">
                                        {% if not comment.deleted %}
                                            <p class="relative text-xl whitespace-nowrap truncate overflow-hidden">{{ comment.level }}</p>
                                        {% else %}
                                            <p class="relative text-xl whitespace-nowrap truncate overflow-hidden">[deleted]</p>
                                        {% endif %}
                                        <a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
                                    </div>
                                        <p class="text-gray-400 text-sm">{{ comment.date_added }}</p>
                                </div>
                            </div>
                            {% if not comment.deleted %}
                                <p class="-mt-4 text-gray-500">{{ comment.body }}</p>
                            {% else %}
                                <p class="-mt-4 text-gray-500">[deleted]</p>
                            {% endif %}
                            <div class="relative">
                                {% if user == comment.author and not comment.deleted %}
                                    <button hx-delete="{% url 'posts:delete_comment' comment.id post %}" hx-confirm="Are you sure you want to delete your comment?" class="-mt-4 text-gray-500">delete</button>
                                {% endif %}
                                <button hx-get="{% url 'posts:comment_reply' id=comment.id pk=post %}" hx-swap="afterend" class="mr-auto -mt-4 text-gray-500">reply</button>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        {% endif %}

问题描述 #

内边距设置被忽略：DOM中能看到回复带有pl-3等正确的类名，但视觉上完全没有缩进效果。我推测是父级div限制了内边距生效，但找不到具体原因。

点击下方模板中的「see replies...」按钮，会通过AJAX加载上面的回复代码：

触发加载的模板代码 #

{% if comments %}
        {% load mptt_tags %}
            {% recursetree comments %}
                <div class="relative grid grid-cols-1 gap-4 p-4 mb-4 border rounded-lg bg-white shadow-lg">
                    <div class="relative flex gap-4">
                        <div class="flex flex-col w-full">
                            <div class="flex flex-row justify-between">
                                {% if not node.deleted %}
                                    <p class="relative text-xl whitespace-nowrap truncate overflow-hidden">{{ node.level }}</p>
                                {% else %}
                                    <p class="relative text-xl whitespace-nowrap truncate overflow-hidden">[deleted]</p>
                                {% endif %}
                                <a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
                            </div>
                                <p class="text-gray-400 text-sm">{{ node.date_added }}</p>
                        </div>
                    </div>
                    {% if not node.deleted %}
                        <p class="-mt-4 text-gray-500">{{ node.body }}</p>
                    {% else %}
                        <p class="-mt-4 text-gray-500">[deleted]</p>
                    {% endif %}
                    <div class="relative">
                        {% if user == node.author and not node.deleted %}
                            <button hx-delete="{% url 'posts:delete_comment' node.id post.pk %}" hx-confirm="Are you sure you want to delete your comment?" class="-mt-4 text-gray-500">delete</button>
                        {% endif %}
                        <button hx-get="{% url 'posts:comment_reply' id=node.id pk=post.pk %}" hx-swap="afterend" class="mr-auto -mt-4 text-gray-500">reply</button>
                        <button onclick="this.disabled = true" hx-get="{% url 'posts:load_replies' id=node.tree_id pk=post.pk %}" hx-swap="afterend" class="absolute right-0 text-gray-500">see replies...</button>
                    </div>
                </div>
            {% endrecursetree %}
    {% else %}
        <p>No comments</p>
{% endif %}

效果截图 #

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