Responsive tailwind css (padding and flex-direction) not applied to large screens

Issue

Im trying to get some advice on Tailwind with div positioning using custom media breaks. Currently at screens over 350px(xs) the homepage layout is flex with flex-col direction. Yet when I set it to flex-row (flex) for large screens over 1100px(lg), it remains as flex-col and one of the flex children is hiding the other.

When I test to see if my custom screens work by changing font-color at each break (xs-lg), it works. Meaning my screens are set up fine. It just seems like its not registering changes in positioning particularly with flex but also with padding interestingly.

Sorry if this is obvious but I have read the tailwind docs and since they work with color changes It means the breaks are set up right. So I'm probably just missing something obvious.

```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]'
}

Solution

At first I was stumped until I realized that the flex-col on HeroText wasn't doing anything without it being a flex container. Now that I'm looking at it and your example, I think that is the problem.

Your flex direction classes are on the container which is just setting the flex direction on the HeroText div. You need to move those flex direction utilities to HeroText. Here's a Tailwind Play example: https://play.tailwindcss.com/MmfOrXgVa0 (OLD LINK)

You probably also want to rethink the styles on HeroImage. Seems like you'd want to absolutely position that.

---

---

UPDATE BASED ON COMMENTS:

Your comment changes things. The flex-direction was being updated with your with the code you had. You still had some extra classes, but that didn't stop it from working. I believe, the real issue was around using lg:bg-hero. Unless you added that as something in your config, that class wouldn't do anything, and it wouldn't be connected to the lg breakpoint.

Also, you are defining flex-1 and widths on the two elements, and these are conflicting with each other with the flex-1 winning. Because of this, when it was full screen, the background was only 50% wide, and since your content wasn't wide enough to wrap, you weren't seeing it.

If you fix those things, you should be good to go. Here is a working example in Tailwind Play: https://play.tailwindcss.com/kF7mi27UUC

Also, here would be some updated classes for your JS. I added a few classes to the HeroImage class so that it would show up:

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]',
}

Answered By - davidleininger