使用Tailwind CSS+Flexbox时，如何让标签不随描述内容拉伸？

问题根源在于标签元素默认是块级元素，会继承被长描述撑开的父容器宽度。只需给标签添加Tailwind的宽度自适应类，就能让它只匹配自身内容宽度：

修改后的代码：

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex items-center">
    <div>block</div>

    <div class="ml-6">
        <p>
            Title
        </p>
        
        <p class="bg-blue-500">
            Description long long long long long long long long long long long long long 
        </p> 

        <div class="px-2 py-1 bg-red-500 rounded-xl text-xs text-gray-700 w-fit">
            Label...
        </div>
    </div>
</div>

关键说明： #

• w-fit 类：让元素宽度自动适配内部内容，不会被父容器的宽度强制拉伸，完美解决标签被拉长的问题。
• 替代方案：也可以用 inline-block 类，同样能让标签以内容宽度显示，效果一致。

如果需要让标签在父容器内居中（同时保持自身宽度），可以额外添加 mx-auto 类：

<div class="px-2 py-1 bg-red-500 rounded-xl text-xs text-gray-700 w-fit mx-auto">
    Label...
</div>

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