使用Tailwind CSS创建药丸按钮

shstlldc  于 2023-01-18  发布在  其他
关注(0)|答案(1)|浏览(145)

我有这个按钮:

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

我希望看到这样的东西:www.example.comhttps://tailwindcss.com/docs/border-radius#pill-buttons
然而,我没有得到药丸形状的按钮:

    • 索引. css**
@tailwind base;
    @tailwind components;
    @tailwind utilities;
    • 顺风配置js**
module.exports = {
      content: ["./src/**/*.{html,js,jsx}"],
      theme: {
        extend: {},
      },
      plugins: [],
    };
wgx48brx

wgx48brx1#

要看到“药丸”形状,您的按钮需要边框或背景色。您可以尝试以下操作:

<button class="rounded-full text-xs font-bold text-white bg-red-500 py-1 px-2">Delete</button>

沙盒示例如下:https://play.tailwindcss.com/j6K2e6ZL0J

相关问题