I just want this theme extension to apply to this single element in page.tsx. I've attached the resulting page as an image. The theme extension is not being applied to the h2 element. I do not understand why :(

Here is my app/globals.css:

/* globals.css */

@import "tailwindcss";

/* Overrides default theming */
@theme {
  --color-*:initial;
  --color-airbnb: #FF385C;
  --color-airbnb-dark: #d50027;
}

Here is my page.tsx

import './globals.css'
export default function Home() {
  return (
    <main>
      Words
      <h2 className="text-color-airbnb">Bees</h2>
    </main> 
  );
}