如題，因為專案是要開發手機用的WebApp，但有時又會需要用PC開起來，所以構想是用一個主要的Layout把內容區包起來，假設主流手機的寬度都不超過1280px，那Layout的背景就不會顯示(為了內容區不跑板，寬度固定1280px)，當用PC或其他大型螢幕顯示時，才會顯示Layout的背景(Layout的寬度是100vw, Taiwind裡是w-screen)，並且給背景一個顏色美化．如下圖

但是我發現內容div的寬度我用'w-1280px'他不會有效果，試了一下好像只有一部分Tailwind CSS默認class會生效，這樣就沒法設定min-w和min-w了．

code如下，有什麼方式可以做到Layout是寬高維持100vw & 100vh ，內容的div寬度可以在320px~1280px式螢幕大小變化呢？

Code如下：
Layout:

const Layout = (props: LayoutProps) => {
  return (
    <div className='flex justify-center w-screen h-screen bg-red-200'>
      {props.children}
    </div>
  )
}

export default Layout

內容的：

function App() {
  return (
    <div className="App">
      <Layout>
        <div className='flex justify-center w-1280px h-screen bg-white'>
          <h1 className='text-3xl text-red-400 font-bold'>
            Hi
          </h1>
        </div>
      </Layout>
    </div>
  );
}

export default App;

還請各位大大幫忙，感激不盡～