Theo's Typesafe Cult•3y ago

Odd Tailwind behaviour, unable to apply certain rules

I am doing ordinary flexbox stuff using tailwind. I wanted to apply justify-around to a div, but it doesn't apply. I open devtools, see that the classname is correct. I check the styles tab in the devtools, the property has not been applied, eg. no mention of justify-content: space-around I try to apply a different property this time as a sanity check, this time it's justify-center. It works, I use the devtools to manually change the value from center to space-around. It works as expected. I switch back the justify-around classname, the justify-content: <your_value> property disappears from the styles tab. I tried other classnames (justify-<evenly | start | end | between) some work, others don't and I have no idea why. If I manually change them in the devtools all of them work.

5 Replies

Sean Cassiere•3y ago

Its justify-around https://tailwindcss.com/docs/justify-content

Justify Content - Tailwind CSS

Utilities for controlling how flex and grid items are positioned along a container's main axis.

Vincent Udén•3y ago

Sounds like you're doing stuff the right way. By any chance are you using any conditional logic or string interpolation in the className? That has tripped my tailwind up a few times

Mordi•3y ago

I was editing a footer, as per usual the footer is a part of a layout file (basically following this: https://nextjs.org/docs/basic-features/layouts, using per-page layout and not single shared layout). I was able to fix the issue by moving the footer file to another folder. I don't know why this fixes the issue though. I can now move the footer file to its original folder and it works. afaik these folder & layout things should not trip up tailwind as badly as it did. No, plain jsx with just classnames, no ternaries or any special logic. in fact here is the whole footer:

<footer className="bg-gray-800 py-4">
      <div className="flex justify-around">
        <div className="flex flex-col">
          <Link href="/faq">
            <a>FAQ</a>
          </Link>
          <Link href="/about">
            <a>About</a>
          </Link>
        </div>
        <div className="flex flex-col">
          <Link href="/terms-of-service">
            <a>Terms of Service</a>
          </Link>
          <Link href="/contact">
            <a>Contact</a>
          </Link>
        </div>
        <div className="flex flex-col">
          <Link href="/privacy-policy">
            <a>Privacy Policy</a>
          </Link>
          <Link href="/#">
            <a>GitHub</a>
          </Link>
        </div>
      </div>
    </footer>

<footer className="bg-gray-800 py-4">
      <div className="flex justify-around">
        <div className="flex flex-col">
          <Link href="/faq">
            <a>FAQ</a>
          </Link>
          <Link href="/about">
            <a>About</a>
          </Link>
        </div>
        <div className="flex flex-col">
          <Link href="/terms-of-service">
            <a>Terms of Service</a>
          </Link>
          <Link href="/contact">
            <a>Contact</a>
          </Link>
        </div>
        <div className="flex flex-col">
          <Link href="/privacy-policy">
            <a>Privacy Policy</a>
          </Link>
          <Link href="/#">
            <a>GitHub</a>
          </Link>
        </div>
      </div>
    </footer>

Vincent Udén•3y ago

Huh, that is really strange. The thing is, tailwind probably managed to understand your use of justify-around and includes it into the css which is sent to the browser. Then, after you move your file back to its previous location, there might be a residual justify-around still present in the css since the stylesheet is cached by your browser. So it might still be broken if you try restarting your server and hard reloading Similar trip-ups has happened to me before, although not related to moving files

Mordi•3y ago

Yeah, this was weird

Gaming

Programming

Odd Tailwind behaviour, unable to apply certain rules