How to configure material-icons, primereact and tailwind in my NextJs project?

Question

I am trying to configure material-icons, primereact and tailwind in my NextJs project. But styling icons are proving to be an issue. The material-icons css has higher priority than tailwind and is overriding tailwind classes that I am applying to the icons. I want to be able to change color and size of my material icons.

This is my .scss file:

@import 'variables';
@import 'material-icons/iconfont/material-icons.css';
@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

This is my code:

import { Metadata } from "next";
import { Card } from "primereact/card";

export const metadata: Metadata = {
  title: "GigSky WebClient Next"
}

export default function Web() {
  const LP_GRID_ITEMS = [
    {
      title: "Next.js",
      description: "Fast by default, with config optimized for performance.",
      icon: (
        <span className="material-icons-outlined text-4xl text-yellow-400">lightbulb</span>
      ),
    },
    {
      title: "Tailwind CSS",
      description: "A utility-first CSS framework for rapid UI development.",
      icon: (
        <span className="material-icons-outlined text-2xl">settings</span>
      ),
    }
  ]

  return (
    <>
      <section className="bg-sky-50 dark:bg-gray-900">
        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16 lg:h-96">
          <div className="mx-auto place-self-center">
            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight dark:text-white md:text-5xl xl:text-6xl">
              <Card className="p-3 m-3 text-purple-400">
                Hello world
              </Card> 
            </h1>
          </div>
        </div>
      </section>
      <section className="bg-white dark:bg-gray-900">
        <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6">
          <div className="justify-center space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0 lg:grid-cols-3">
            {LP_GRID_ITEMS.map((singleItem) => (
              <div key={singleItem.title} className="flex flex-col items-center justify-center text-center">
                <div className="mb-4 flex size-10 items-center justify-center rounded-full bg-primary-100 p-1.5 text-blue-700 dark:bg-primary-900 lg:size-12">
                  {singleItem.icon}
                </div>
                <h3 className="mb-2 text-xl font-bold dark:text-white">{singleItem.title}</h3>
                <p className="text-gray-500 dark:text-gray-400">{singleItem.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  )
}

1 - picture

As you can see the styles are getting overridden. How to ensure that text-4xl is applied for lightbulb?