使用Tailwind CSS创建胶囊按钮未生效，求解决方案

问题原因 #

你的按钮仅使用了rounded-full类，但缺少**内边距（padding）**来支撑按钮尺寸，导致圆角无法呈现胶囊形状；另外text-red类在Tailwind V3默认主题中不存在，需替换为具体的红色色值类。

修复方案 #

修改按钮类名，补充内边距并修正颜色类：

<button onClick={() => removeTask(task)} class="text-xs text-red-500 rounded-full px-3 py-1">Delete</button>

关键调整说明 #

• 添加px-3 py-1：设置水平/垂直内边距，让按钮具备足够高度和宽度，rounded-full的全圆角就能展现出胶囊效果
• 替换text-red为text-red-500：Tailwind V3默认主题无text-red这类简写色值类，需使用带权重的颜色类（如red-400/red-600等，可按需选择）

配置验证 #

你的tailwind.config.js和index.css配置是正确的，无需额外修改，确保项目已正确编译Tailwind样式即可。

内容的提问来源于stack exchange，提问作者code-8