Наведение CSS Tailwind не меняет цвет текста ⇐ CSS

[Anonymous]

Я совершенно новичок в этом попутном ветру и застрял над этой проблемой целый день. Я так расстроен. Вот мой код

Some Text Here


Я хочу изменить цвет текста при наведении курсора на кнопку, текущий цвет текста — белый, и я хочу, чтобы он изменился на черный. Это не сработало. Когда я использовал инструмент проверки Chrome, я обнаружил, что белый цвет текста имеет значение !important, и я не знаю, как это произошло. Я не определил это, даже не знаю как. Что еще хуже, я могу изменить цвет текста на любой цвет при наведении курсора, если его исходный цвет не белый. Изначально я могу выбрать другой цвет, отличный от белого, и изменить его на любой цвет, который мне нравится.
Как видите, это очень просто. Я могу сделать это с помощью чистого CSS примерно за 10 секунд, нет необходимости в течение целого дня.
Пожалуйста, помогите мне здесь.
Вот файл Tailwind.config, если это необходимо,
const colors = require("tailwindcss/colors");

module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
boxShadow: {
sm: "0 1px 5px #65656599",
},
extend: {
fontFamily: {
body: ["Poppins"],
},
colors: {
black: {
hakkei: "#1a1a1a",
DEFAULT: "#000",
},
current: "currentColor",
gray: colors.blueGray,
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
blue: colors.blue,
black: "#333",
white: "#fff",
aqua: {
DEFAULT: "#99ced3",
dark: "#8abbbf",
},
navy: {
light: "#99ced3",
DEFAULT: "#2f415d",
dark: "#1d2a3d",
sky: "#00afffc2",
},
purple: colors.purple,
},
borderRadius: {
"5xl": "5rem",
"10xl": "10rem",
"20xl": "50%",
},
height: {
120: "32rem",
150: "40rem",
},
},
},
variants: {
textColor: ["responsive", "hover", "focus", "group-hover"],
},

plugins: [
"gatsby-plugin-postcss",
//require('@tailwindcss/forms'),
"@tailwindcss-neumorphism",
],
};



Подробнее здесь: https://stackoverflow.com/questions/684 ... text-color