Tailwind CSS 复选框样式不起作用

Question

我的 Next.js 项目中有一个复选框，添加一些 Tailwind 实用程序类后，除了更改宽度、高度和光标之外，没有任何效果。颜色、背景、边框等不起作用。

        <div className="flex py-4 m-auto w-2/3 justify-between items-start">
          <div className="w-1/7">
            <div className="border-b pb-4">
              <h1 className="mb-2 font-medium">Filter 1</h1>
              <label htmlFor="c1">
                <div className="flex group active:ring-2 ring-black rounded">
                  <input
                    id="c1"
                    type="checkbox"
                    className="rounded-full h-8 w-8 cursor-pointer bg-red-100 border-red-300 text-red-600 focus:ring-red-200"
                  />
                  <p className="pl-2 text-reg cursor-pointer group-hover:underline decoration-solid">
                    Subfilter 1
                  </p>
                </div>
              </label>
            </div>
          </div>
        </div>

cursor-pointer

、

h-8

和

w-8

是唯一在复选框中工作的实用程序类。

color

仍然默认为蓝色，焦点上没有出现圆环，并且

bg

仍然是白色。

示例代码中的其他元素（如

p

、

div

和

h1

）工作正常。

Answer 1

将

tailwindcss/forms

添加到您的

config

文件中：

module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

您可以在 docs 和 GitHub 存储库 中阅读更多相关信息。

这里是 Tailwind Play 中的一个工作示例。

Answer 2

这里的关键是 appearance CSS 属性 - 将其设置为

none

可以重置默认浏览器样式

外观 CSS 属性用于控制基于操作系统主题的 UI 控件的本机外观

在 Tailwind 中它是

appearance-none

实用性

使用appearance-none重置元素上任何浏览器特定的样式。

<input
  type="checkbox"
  class="appearance-none ..."
/>

演示

Answer 3

对于那些想要在选中复选框时快速更改背景颜色的人，Tailwind 提供了一个宏伟的类

accent-color

用作

<input type="checkbox" class="accent-pink-500" checked>

，仅在CSS中使用重音颜色规则