Cant migrate old tailwind.config.js to new CSS configuration

[fedorinoGore]

I'm trying to migrate my old config from tailwind.config.js

...
theme: {
  container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px' 
    }
  }
}
...

And I have zero clue how to express this in CSS variables style...
My first attempt was something like that:

@theme {
    --container-padding: 2rem;
    --container-mx: auto;
    --container-2xl: 1400px;
}

But sure it doesn't worked out.
Will appreciate any suggestion how to migrate this config.

[wongjn]

You'd use the @utility directive, applying the configuration as CSS: https://play.tailwindcss.com/qTir8k1ljq?file=css