Vue Tailwind Datepicker：如何修改选中日期圆角及配置兼容颜色？

1. 调整选中日期的圆角样式 #

组件选中日期的默认圆角由.vtd-selected类控制，可通过以下方式修改为更方正的样式：

• 全局CSS覆盖
  在全局样式文件（如src/assets/css/main.css）中添加：

.vtd-selected {
  border-radius: 0.125rem !important; /* 对应Tailwind的rounded-sm，接近方正；用border-radius: 0则为完全直角 */
}

如果启用了Tailwind的CSS层叠，也可以这样写：

@layer components {
  .vtd-selected {
    @apply rounded-sm;
  }
}

• 组件内局部穿透样式
  在使用日期选择器的Vue组件中，用:deep()（Vue3）或::v-deep（Vue2）修改：

<template>
  <VueTailwindDatepicker />
</template>

<style scoped>
:deep(.vtd-selected) {
  border-radius: 0; /* 完全直角样式 */
}
</style>

2. 配置vtd-primary颜色生效 #

在tailwind.config.js中，需要在主题扩展里定义vtd-primary颜色，同时确保组件路径被纳入扫描范围，避免样式被Purge：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/vue-tailwind-datepicker/**/*.js" // 必须添加此路径
  ],
  theme: {
    extend: {
      colors: {
        // 可以定义完整的色阶，也只定义单一主色
        "vtd-primary": {
          50: "#eff6ff",
          100: "#dbeafe",
          200: "#bfdbfe",
          300: "#93c5fd",
          400: "#60a5fa",
          500: "#3b82f6", // 核心主色
          600: "#2563eb",
          700: "#1d4ed8",
          800: "#1e40af",
          900: "#1e3a8a"
        }
      }
    }
  },
  plugins: []
}

如果只需要单一自定义颜色，简化写法：

colors: {
  "vtd-primary": "#your-hex-color"
}

配置完成后重启开发服务器，组件即可加载自定义的vtd-primary颜色。

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