Tailwind CSS：制作药丸形状的按钮

Question

我有这个按钮：

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

我希望看到类似的东西： https://tailwindcss.com/docs/border-radius#pill-buttons

但是，我没有得到药丸形状的按钮：

index.css

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

tailwind.config.js

    module.exports = {
      content: ["./src/**/*.{html,js,jsx}"],
      theme: {
        extend: {},
      },
      plugins: [],
    };

Answer 1

为了看到“药丸”形状，您的按钮需要边框或背景颜色。你可以尝试这样的事情：

Delete

沙盒示例：https://play.tai​​lwindcss.com/j6K2e6ZL0J