Tailwind CSS Hover не изменяет цвет текста ⇐ CSS

[Anonymous]

Я совершенно новичок в этом Tailwindcss, и я застрял в этой проблеме в течение всего дня. Я так разочарован. Вот мой код < /p>

Some Text Here

< /code>
Чего я хочу достичь, это изменить цвет текста, когда кнопка падает, текущий цвет текста белый, и я хочу, чтобы он изменился на черный. Это не сработало. Когда я использую инструмент chrome oscoard, я обнаружил, что у белого цвета текст, что я не знаю, как это произошло. Я не определил это, даже не знаю, как. Что еще хуже, так это то, что я могу изменить цвет текста на любой цвет, когда он завис, если его оригинальный цвет не белый. Я могу иметь еще один цвет изначально, кроме белого, и изменить его на любой цвет, который мне нравится.
Как вы можете видеть, это очень просто. Я могу сделать это с чистыми CSS за 10 с, не нужно целый день.
Пожалуйста, помогите мне здесь.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