在顺风 css 示例中设置单选按钮样式不起作用

Posted 2023-03-07

【中文标题】在顺风 css 示例中设置单选按钮样式不起作用

【英文标题】：Styling radio buttons in tailwind css example does not work

【发布时间】：2021-07-21 18:24:13

【问题描述】：

tailwindcss.com 上的第 4 个示例（在认真地构建任何你想要的东西（截至 2021 年 4 月）之后）是一张卡片，第一个类型是简单 卡片的标题是Classic Utility Jacket。

此示例包含一个单选组，您可以在其中选择夹克的尺寸，范围从“XS”到“XL”。

这些单选按钮的样式是不显示单选圆的，所选按钮有一个圆角矩形，标签位于圆角矩形的中心。

但是，当我自己尝试示例时，将示例代码复制并粘贴到我的项目中时，单选按钮看起来与示例中的任何内容都不一样。

在顺风操场上也会发生同样的情况，下面是示例（不要介意图片丢失）： https://play.tailwindcss.com/tOv207BJPm

我尝试安装和使用 $tailwindcss/forms 插件，但没有多大帮助。

为了使示例正常工作，我缺少什么？

【问题讨论】：

检查更新的顺风游乐场：play.tailwindcss.com/AYmTc4ISfn

谢谢，但它看起来不像tailwindcss他们自己的原始示例。这是他们网页上的样子：i.imgur.com/cq3Lg1w.jpg - 问题是，因为它是一个原始的顺风示例，我认为我设置顺风的方式一定有问题，缺少某种设置 pr 插件。

【参考方案1】：

我认为您可能需要@tailwindcss/forms 插件。

观看来自 Tailwind Lab 的 https://youtu.be/pONeWAzDsQg 视频