Next.js 13.5.3中Tailwind样式被未知样式覆盖致日历标记异常

我正在开发一款可标记指定事件日期的日历应用，事件日期的标记颜色根据事件类型而定，使用的是Next.js 13.5.3版本。样式规则和事件日期、类型信息都定义在data.ts文件中，文件内容如下：

import { EventType, IEvent, TEventTypeStyles } from "./types";

export const eventsData: { date: string; type: EventType }[] = [
  { date: "2023-09-12", type: "Abs" },
  { date: "2023-09-20", type: "Ejc" },
  { date: "2023-01-11", type: "Rty" },
];

export const events: IEvent[] = eventsData.map((eventData) => ({
  ...eventData,
  date: new Date(eventData.date),
}));

export const eventTypeStyles: TEventTypeStyles = {
  Ejc: {
    borderColor: "border-orange-600",
    hoverBorderColor: "hover:border-orange-300",
  },
  Abs: {
    borderColor: "border-green-600",
    hoverBorderColor: "hover:border-green-300",
  },
  Rty: {
    borderColor: "border-red-600",
    hoverBorderColor: "hover:border-red-300",
  },
};

客户端组件Calendar.tsx的代码如下：

"use client";

import { CalendarProps } from "@/types";
import React, { useState } from "react";
import { isSameDay } from "@/lib/isSameDay";
import { eventTypeStyles, events } from "@/data";

export default function Calendar({ currentDate }: CalendarProps) {
  // console.log("event", eventTypeStyles);
  const [currentDateState, setCurrentDateState] = useState(currentDate);
  const today = new Date();

  const specialEvents = events;

  const daysInMonth = new Date(
    currentDateState.getFullYear(),
    currentDateState.getMonth() + 1,
    0
  ).getDate();

  const firstDay = new Date(
    currentDateState.getFullYear(),
    currentDateState.getMonth(),
    1
  ).getDay();

  const weeks = [];
  let currentWeek = [];
  for (let i = 0; i < firstDay; i++) {
    currentWeek.push(null);
  }
  for (let day = 1; day <= daysInMonth; day++) {
    if (currentWeek.length === 7) {
      weeks.push(currentWeek);
      currentWeek = [];
    }
    currentWeek.push(day);
  }
  if (currentWeek.length > 0) {
    while (currentWeek.length < 7) {
      currentWeek.push(null);
    }
    weeks.push(currentWeek);
  }

  const prevMonth = () => {
    const previousMonthDate = new Date(
      currentDateState.getFullYear(),
      currentDateState.getMonth() - 1,
      1
    );
    setCurrentDateState(previousMonthDate);
  };

  const nextMonth = () => {
    const nextMonthDate = new Date(
      currentDateState.getFullYear(),
      currentDateState.getMonth() + 1,
      1
    );
    setCurrentDateState(nextMonthDate);
  };

  return (
    <div>
      <div className="flex justify-between mb-2">
        <button onClick={prevMonth}>Previous</button>
        <h1 className="text-xl font-semibold">
          {currentDateState.toLocaleDateString("en-US", {
            month: "long",
            year: "numeric",
          })}
        </h1>
        <button onClick={nextMonth}>Next</button>
      </div>
      <table className="table-auto">
        <thead>
          <tr>
            {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
              <th key={day} className="text-center p-2">
                {day}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {weeks.map((week, weekIndex) => (
            <tr key={weekIndex}>
              {week.map((day, dayIndex) => {
                // Ensure 'day' is a number and not null
                if (typeof day !== "number") {
                  return <td key={dayIndex} className={`text-center p-2`}></td>;
                }

                const todayDate = new Date(
                  currentDateState.getFullYear(),
                  currentDateState.getMonth(),
                  day
                );

                const specialEvent = specialEvents.find((event) =>
                  isSameDay(event.date, todayDate)
                );

                const isSpecialEventDate = !!specialEvent;

                const isToday =
                  todayDate.getDate() === today.getDate() &&
                  todayDate.getMonth() === today.getMonth() &&
                  todayDate.getFullYear() === today.getFullYear();

                return (
                  <td
                    key={dayIndex}
                    className={`text-center p-2 ${
                      isSpecialEventDate
                        ? `border-b-4 ${
                            eventTypeStyles[specialEvent.type].borderColor
                          } ${
                            eventTypeStyles[specialEvent.type].hoverBorderColor
                          }`
                        : isToday
                        ? "bg-yellow-300"
                        : "hover:bg-gray-200"
                    }`}
                  >
                    {day}
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

目前遇到的问题是：事件日期没有按照设定的颜色标记，而是显示灰色。通过Chrome开发者工具查看发现，自定义样式已经被应用，但被一段未知来源的全局样式覆盖，这段样式代码是：

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

我并没有添加过任何全局CSS。

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