chriship/globals.css

## globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: green;
}

## index.js
import Head from 'next/head'

function TestComponent({ }) {
  return (
      <>
          <Head>
              <style>{`
                  body {
                      background-color: blue;
                  }
              `}</style>
          </Head>
          <div></div>
      </>
  )
}

export default function Home() {
  return (
    <>
      <Head>
        <style>{`
          body {
            background-color: red;
          }
        `}</style>
      </Head>
      <div>
        <TestComponent />
        <div>I would expect 'TestComponent' to override the background color but the one from globals.css is prioritized but it rendering green from globals.css</div>
      </div>
    </>
  )
}
	@tailwind base;
	@tailwind components;
	@tailwind utilities;

	body {
	background-color: green;
	}
	import Head from 'next/head'

	function TestComponent({ }) {
	return (
	<>
	<Head>
	<style>{`
	body {
	background-color: blue;
	}
	`}</style>
	</Head>
	<div></div>
	</>
	)
	}

	export default function Home() {
	return (
	<>
	<Head>
	<style>{`
	body {
	background-color: red;
	}
	`}</style>
	</Head>
	<div>
	<TestComponent />
	<div>I would expect 'TestComponent' to override the background color but the one from globals.css is prioritized but it rendering green from globals.css</div>
	</div>
	</>
	)
	}