CSS styling inside wrapper does not render in ReactJs

I am using ReactJs and TailwindCSS, there are no problems in the VScode terminal or console.

When I deploy to localhost:3000, "Header, Main, Transaction History" do not respond to the styling and are in plain bold black text, with a white background.

This a new app, and I have not had problems with CSS styling before. I installed the app with:

npm create next-app -e with-tailwindcss

This is my index.js file where the CSS styling does not work:

import Head from 'next/head'
import Header from '/Users/dcarav77/all my apps/pizza-swap-dapp/pages/components.js/Header.js'

const style = {
  wrapper: `h-screen max-h-screen h-min-screen w-screen bg-[#2D242F] text-white select-none flex flex-col justify-between`,
}

export default function Home () {
  return (
    <div className = { style.wrapper}>
      <h2>Header</h2>
      <h2>Main</h2>
      <h2>Transaction History</h2>
      </div>
  )
}