Vue+TailwindCSS单选按钮样式失效问题及正确实现咨询

我正在制作一个Vue单选按钮组件，通过props控制样式，参考了Flowbite的单选按钮实现开发。以下是添加自定义样式前的代码片段：

<template>
  <div class="flex items-center mb-4">

    <div class="flex items-center mb-4">
      <input :id="id" type="radio" :value="value" :name="name"
             class="
             w-4 h-4 text-blue-600 bg-gray-100 border-gray-300
             focus:ring-blue-500
             dark:focus:ring-blue-600 dark:ring-offset-gray-800
             focus:ring-2 dark:bg-gray-700 dark:border-gray-600
    ">
      <label :for="id" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Default radio</label>
    </div>
  </div>
</template>

<script setup lang="ts">

import {Color} from "../composables/useColor.ts";

const props = withDefaults(
    defineProps<{
      name: string
      id: string
      value: string
      checked: boolean
      primaryColor: Color
      secondaryColor: Color
    }>(), {
      value: "",
      secondaryColor: "gray",
      primaryColor: "azure",
      checked: false

    }
)

</script>

实际渲染效果与示例不符，样式未生效，即使修改灰色系样式为红色也无变化。怀疑是浏览器默认样式覆盖TailwindCSS样式，或是Tailwind配置遗漏。现提出以下问题：

1. 如何避免浏览器默认样式覆盖TailwindCSS样式？
2. 如何使用TailwindCSS正确设置单选按钮样式？
3. 当前代码存在哪些问题？

问题解答 #

1. 如何避免浏览器默认样式覆盖TailwindCSS样式？ #

• 启用Tailwind Preflight：Preflight是Tailwind内置的样式重置工具，替代了Normalize.css，能统一浏览器默认样式。默认情况下Tailwind会自动启用，若你手动关闭了，需在tailwind.config.js中开启：

  module.exports = {
    corePlugins: {
      preflight: true,
    },
  }
  

• 提升样式优先级：尽量避免使用!important，优先通过调整类顺序、增加选择器特异性解决。比如给input添加父类限定，或者使用Tailwind的!变体（如!w-4）作为临时方案。
• 检查全局样式冲突：排查项目中是否存在全局CSS（如自定义的input样式），这类样式可能会覆盖组件内的Tailwind类，确保全局样式不会影响组件内的表单元素。

2. 如何使用TailwindCSS正确设置单选按钮样式？ #

• 安装并启用@tailwindcss/forms插件：这个插件专门处理表单元素，能重置原生表单样式，让Tailwind类生效。安装后在tailwind.config.js中配置：

  module.exports = {
    plugins: [
      require('@tailwindcss/forms'),
    ],
  }
  

• 采用“隐藏原生input+模拟样式”方案：原生radio的样式修改受限，通常的做法是隐藏原生input，用label的伪元素模拟视觉样式，通过:checked伪类关联状态：

  <template>
    <div class="flex items-center mb-4">
      <input 
        :id="id" 
        type="radio" 
        :value="value" 
        :name="name"
        :checked="checked"
        class="absolute opacity-0 peer"
      >
      <label 
        :for="id" 
        class="flex items-center cursor-pointer"
      >
        <span class="w-4 h-4 rounded-full border-2 border-gray-300 mr-2 peer-checked:bg-blue-600 peer-checked:border-blue-600"></span>
        <span class="text-sm font-medium text-gray-900 dark:text-gray-300">Custom radio</span>
      </label>
    </div>
  </template>
  

• 动态绑定props样式：根据props中的颜色值生成对应的Tailwind类，比如：

  <span 
    :class="[
      'w-4 h-4 rounded-full border-2 mr-2',
      `border-${secondaryColor}-300`,
      `peer-checked:bg-${primaryColor}-600`,
      `peer-checked:border-${primaryColor}-600`
    ]"
  ></span>
  

3. 当前代码存在哪些问题？ #

• 布局冗余：外层和内层div都使用了flex items-center mb-4，导致margin重复，存在多余嵌套。
• 未绑定checked状态：props中定义了checked属性，但input标签未绑定:checked="checked"，无法控制单选按钮的选中状态。
• 未启用Tailwind表单插件：缺少@tailwindcss/forms插件时，原生radio的默认样式难以被Tailwind类覆盖，导致样式不生效。
• 动态样式未实现：props中的primaryColor和secondaryColor未实际应用到class中，仍使用写死的blue、gray类，无法实现自定义样式控制。
• 缺少选中状态样式：未添加checked状态下的样式，无法直观反馈选中状态。

内容的提问来源于stack exchange，提问作者Kid A