响应式 tailwind css（padding 和 flex-direction）不适用于大屏幕

Question

我试图通过使用自定义媒体中断的 div 定位获得有关 Tailwind 的一些建议。目前在超过 350px(xs) 的屏幕上，主页布局是 flex 和 flex-col 方向。然而，当我将它设置为 flex-row (flex) 用于超过 1100px(lg) 的大屏幕时，它仍然是 flex-col 并且其中一个 flex 子项隐藏了另一个。

当我通过在每次中断时更改字体颜色 (xs-lg) 来测试我的自定义屏幕是否工作时，它工作正常。这意味着我的屏幕设置正常。它似乎没有记录定位的变化，尤其是 flex，但有趣的是，填充也没有。

抱歉，如果这很明显，但我已经阅读了 tailwind 文档，因为它们可以处理颜色变化，这意味着中断设置正确。所以我可能只是遗漏了一些明显的东西。

```javascript
export default function HomeHero(){
    return(

        <div className={styles.HeroContainer}>
            <div className={styles.HeroText}>
                <div className={styles.title}>Stay connected off-grid</div>
                <div className={styles.text}>paragraph text</div>
                <form  className={styles.form} action="/send-data-here" method="post">
                    
                    <input type="text" className={styles.input} name="first" placeholder="Email   Address"/>
                    <input type="text" className={styles.input} name="last" placeholder="Password"/>
                    <div className={styles.Button}><button type="submit">Log In</button></div>
                    <div className={styles.forgot}><Link  href="/forgotpassword">Forgot your password?</Link></div>

                </form>    
                
            </div>
            <div className={styles.HeroImage}></div>
        </div>
    )
}
const styles = {
    HeroContainer: 'flex xs:flex-col lg:flex-col lg:min-h-screen',
    HeroText: 'flex flex-col border-2 text-left xs:p-10 md:p-24 w-1/3 lg:mt-12 lg:pr-36 lg:pl-36',
    HeroImage: 'flex w-2/3 bg-hero bg-center bg-contain bg-no-repeat bg-top-32 self-stretch min-h-[500px]'
}

Answer 1

起初我很困惑，直到我意识到 HeroText 上的 flex-col 在没有弹性容器的情况下什么也做不了。现在我正在看它和你的例子，我认为这就是问题所在。

您的弹性方向类在容器上，它只是在 HeroText div 上设置弹性方向。您需要将那些 flex direction 实用程序移动到 HeroText。这是一个 Tailwind Play 示例：https://play.tailwindcss.com/MmfOrXgVa0（旧链接）

您可能还想重新考虑HeroImage 上的样式。似乎您想绝对定位它。

---

---

根据评论更新：

你的评论改变了一切。 flex-direction 正在使用您拥有的代码进行更新。你还有一些额外的课程，但这并没有阻止它的工作。我相信，真正的问题在于使用lg:bg-hero。除非您将其添加为配置中的内容，否则该类不会执行任何操作，并且不会连接到 lg 断点。

此外，您在这两个元素上定义了 flex-1 和宽度，并且这些元素相互冲突，而 flex-1 获胜。正因为如此，当它全屏时，背景只有 50% 宽，并且由于您的内容不够宽无法环绕，所以您看不到它。

如果你解决了这些问题，你就可以开始了。这是 Tailwind Play 中的一个工作示例：https://play.tailwindcss.com/kF7mi27UUC

此外，这里会为您的 JS 提供一些更新的类。我在 HeroImage 类中添加了几个类，这样它就会显示出来：

const styles = {
    HeroContainer: 'flex flex-col lg:flex-row lg:min-h-screen',
    HeroText: 'flex flex-col text-left xs:p-10 md:p-24 lg:w-1/3 lg:mt-12 lg:pr-24 lg:pl-24',
    HeroImage: 'lg:w-2/3 bg-center border-2 bg-cover bg-top-32 self-stretch bg-black min-h-[200px]',
}