我正在尝试改变我的p标签文本的颜色，但由于某种原因，它不起作用。我是非常新的编码，所以任何建议都会有帮助。

import React from 'react'
import { SocialIcon } from 'react-social-icons';

type Props = {}

export default function Header({}: Props) {
  return (
    <header className="sticky top-0 flex items-start justify-between max-w-7xl mx-auto z-20 xl:items-center">
        <div className="flex flex-row items-center">
            {/* Social Icons */}
            <SocialIcon 
                url="https://" 
                fgColor="gray" 
                bgColor="transparent"
            />
            <SocialIcon 
                url="https://" 
                fgColor="gray" 
                bgColor="transparent"
            />
        </div>

        <div className="flex flex-row items-center text-gray-300 cursor-pointer">
            <SocialIcon 
                className="cursor-pointer"
                network="email" 
                fgColor="gray" 
                bgColor="transparent"
            />
            <p className="text-gray-400">Why wont this work</p>
        </div>
    </header>
  );
}

**tailwind.config.js**

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./compnents/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

这行代码为什么不工作
不执行任何操作，只是将文本保留为黑色
老实说，我不知道该怎么做。我想其他的div类名可能会影响到p标签，所以我试着删除它们，但也不起作用。下面我附上了一张它的图片作为证明。
enter image description here