How the container padding will use in Tailwind CSS v4

Question

In Tailwind CSS v3 there was a file tailwind.config.js where we could declare different padding for different screens like this:

theme:{
    container: {
       center: true,
       padding: {
          DEFAULT: `10px`,
           sm : `20px`,
           lg : `80px`,
           xl : `120px`
       }
    }
}

Now there is no tailwind.config.js.
We have to use global CSS.
How to put those padding in container as there is no way/scope it.
Even though they have @container but now way to put these padding variables which could take their padding size auto.

I tried using

@container {}

@utility container{}

@layers {
  @media container (){}
}

Answer 1

You'd use @utility to extend it:

@utility container {
  …
}

Add the DEFAULT case in the root of the at-rule:

@utility container {
  padding-inline: 10px;
  margin-inline: auto;
}

Use nested @variant rules inside per screen variant name:

@utility container {
  padding-inline: 10px;
  margin-inline: auto;
  
  @variant sm {
    padding-inline: 20px;
  }
  
  @variant lg {
    padding-inline: 80px;
  }
  
  @variant xl {
    padding-inline: 120px;
  }
}

<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>

<style type="text/tailwindcss">
@utility container {
  padding-inline: 10px;
  margin-inline: auto;
  
  @variant sm {
    padding-inline: 20px;
  }
  
  @variant lg {
    padding-inline: 80px;
  }
  
  @variant xl {
    padding-inline: 120px;
  }
}
</style>

<div class="container bg-red-400">
  <div class="bg-green-400 h-10"></div>
</div>