Flex Not Working...Any Ideas?

[danielbirch]

Hey everyone,

I'm new to Tailwind, however not new to CSS. I've just started putting a layout together and the flex property is not working as expected. The expected behaviour is for the div's to line up in a row, however they are not. This is the code:

<div class="flex flex-row w-screen">
    <div class="flex-auto w-1/4">Logo</div>
    <div class="flex-auto w-2/4">
      <nav>
        <a href="#">About Me</a>
        <a href="#">Skills</a>
        <a href="#">Explore Portfolio</a>
        <a href="#">Resources</a>
      </nav>
    </div>
    <div class="flex-auto w-1/4">Contact Btn</div>
  </div>

And this is the output:

Any help would be greatly appreciated, I'm not sure what I'm missing. Tailwind is integrated properly, other utility classes are recognised, but flex and flex-row don't seem to be doing anything.

[wongjn]

Despite your assertion, it seems like Tailwind is not integrated properly for this piece of DOM. Consider checking that the content file globs in the Tailwind configuration sufficiently cover the file that the code resides in. Otherwise, consider providing a remotely-hosted git repository that reproduces the unexpected behavior.

[danielbirch]

Thanks for the prompt response. Yeah I actually just discovered that I didn't have the CLI build process running. 🤪

[keshav-15151]

The same error occurs for me too, flex isn't working on the tailwind css code. Any suggestions?

[Dubey145]

@keshav-15151 you need to check the contents in tailwind.config.ts. The file in which you are using tailwind should be included in the contents section