Tailwind CSS: Make a pill-shaped button

Question

I have this button:

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

I'd like to see something like this: https://tailwindcss.com/docs/border-radius#pill-buttons

However, I don't get the pill-shaped button:

index.css

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

tailwind.config.js

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

Answer 1

In order to see the "pill" shape, your button needs a border or background color. You could try something like this:

Delete

Sandbox example:https://play.tailwindcss.com/j6K2e6ZL0J