Questions about the background of the extension (Tailwind)

import earth from "../assets/illus-earth.svg"
import astronaut from "../assets/illus-astronaut.svg"
import { useState } from "react"

<div className="w-[600px] h-[242px] bg-blue-dark">
  <div className="flex h-full">
    <div className="relative flex">
      <img src={earth} className="h-full w-full translate-x-1/2 overflow-hidden object-cover"/>
      <img src={astronaut} className="absolute h-[250px] bottom-[-15%] left-1/2 -translate-x-1/2"/>
    </div>
  </div>
</div>

@tailwind base;
@tailwind components;
@tailwind utilities;


#root {
  height: 100%;
  background: transparent;
}

body {
  background: transparent;
}