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 都能正常工作。

- César Valencia

Answer 1

将 tailwindcss/forms 添加到您的 config 文件中：

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

您可以在文档和GitHub存储库中了解更多信息。

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

- ChenBr

---

非常感谢！我是Tailwind的新手，不知道需要安装表单才能为一些基本的HTML元素设置样式，希望这不会改变我的应用程序中的其他样式，但至少现在复选框是可自定义的了。 - César Valencia

很高兴它对你有用 :) 你可以在以下链接中查看使用该插件添加的所有表单元素：https://github.com/tailwindlabs/tailwindcss-forms#basic-usage - ChenBr

Answer 2

这里的关键在于CSS属性appearance——将其设置为none，可以重置默认浏览器样式。

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

在Tailwind中，它是appearance-none实用工具。

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

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

DEMO

- Ihar Aliakseyenka

---

感谢分享这个解决方案，它非常有用，而且我甚至不知道它的存在。我仍然想尝试使用Tailwind表单来使用其中一些实用程序，但是这个简单的解决方案不会影响其他代码，我一定会考虑采纳它。 - César Valencia