tailwind flex classes not showing up

Question

I'm trying to setup tailwind. When I use classnames of flex I expect the flex css property to show up in the element styles. All other element styles show up, but the flex related ones don't. This is in a new react app. Why is this happening? I setup tailwind using the tailwind cli with npx.

<div className="flex flex-row justify-between mx-auto bg-gray-200 shadow border p-8 m-10">
   <h1> Trending </h1>
   <h1> My Faves </h1>
</div>

my index.css file has the

@tailwind base;
@tailwind components;
@tailwind utilities;

Is flex not a part of tailwind or something?

Answer 1

I have used your code, and i don't see error in there:

my pakage.js file:

{
  "name": "option-1",
  "version": "0.1.0",
  },
  "dependencies": {
    "autoprefixer": "^9.6.5",
    "react": "16.10.2",
    "react-dom": "16.10.2",
    "tailwindcss": "3.0.24"
  }
}

my taidwind.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

.scrollbar-none {
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

my index.js file:

const Index = () => (
  <div className="flex flex-row justify-between mx-auto bg-gray-200 shadow border p-8 m-10">
    <h1> Trending </h1>
    <h1> My Faves </h1>
  </div>
);

export default Index;