Why i can't fill my screen with background with Tailwind-CodePudding

Please help me, i don't have web dev experience, and i work in my friend project. I follow a tutorial from youtube about tailwind and react. In the video, he can fill his whole screen using this code:

So i try it in my Dashboard function:

import React from "react";

function Dashboard(props) {
  return (
    <div>
      <main>
        <section className=" bg-slate-700 min-h-screen">
          hello
        </section>
      </main>
    </div>
  );
}

export default Dashboard;

but i get:

This is my project structure looks like:

Why can't i get the same result as the tutorial?

CodePudding user response：

Its because you are using inside a tag which has not to much content in it If you want to apply the color on the full screen you have to use the class "w-screen and min-h-screen" by which that tag gets the full width of the screen and full height