Tailwind断点下宽度设置无效，网格两列无法转为垂直排列

你之前的思路不对——Tailwind Grid的列布局是由容器的grid-cols-*类控制的，靠子元素设置宽度没法改变网格的列数。给子元素加w-screen不会让第二列换行，因为网格已经固定了2列，子元素会被限制在各自的网格单元里。

正确的做法是用响应式网格列数类，结合Tailwind移动端优先的设计逻辑，直接在容器上定义不同断点的列数：

修改后的代码 #

<div className="grid grid-cols-1 md:grid-cols-2 h-screen">
    <div className="justify-center items-center flex flex-col">
        <h1 id="elsoszoveg-cim" className="text-5xl tracking-wide font-medium text-center pb-9">...Mi Pixie?</h1>
        <p className="text-center text-2xl">
            Pixie egy személyes projekt, amelyet azért fejlesztettem, 
            hogy a különböző elfoglaltságaimat egyesíteni tudjam.
        </p>
    </div>
    <div className="bg-sky-100">
    </div>
</div>

核心逻辑说明 #

• grid-cols-1：默认（小屏幕/移动端）时，网格仅1列，两部分自动垂直排列
• md:grid-cols-2：当屏幕宽度达到md断点（默认768px）时，网格切换为2列，两部分水平并排
• 删掉了子元素里的lg:w-screen和md:w-screen，这些属性对网格布局无效，还可能导致溢出问题

如果你的需求是在更大的断点（比如lg）才切换为两列，只需把md:grid-cols-2改成lg:grid-cols-2。反之，若想在某个断点以上变回垂直排列，就写grid grid-cols-2 lg:grid-cols-1。

内容的提问来源于stack exchange，提问作者Rollixa