I have this code working but when I convert some over to tailwind, it breaks and I am not sure why
This works...
<style> .box { display: flex; align-items: center; justify-content: center; }</style><main class="main"><div class="flex w-full flex-auto flex-col box"><div class="container flex-auto px-4 py-8 min-h-screen flex flex-col sm:flex-row box"><div class="bg-red-400 basis-1/4 box h-64">02</div><div class="bg-green-400 basis-1/4 box h-64">02</div></div></div></main>This does not and I thought it would
<style> .box { @apply flex align-middle justify-center }</style><main class="main"><div class="flex w-full flex-auto flex-col box"><div class="container flex-auto px-4 py-8 min-h-screen flex flex-col sm:flex-row box"><div class="bg-red-400 basis-1/4 box h-64">02</div><div class="bg-green-400 basis-1/4 box h-64">02</div></div></div></main>I did the react starter tutorial to create new project, then did the steps on this pagehttps://tailwindcss.com/docs/installation
My changes above are in app.component.html and my index.html looks like this
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AngularTesting</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="./output.css" rel="stylesheet"></head><body><app-root></app-root></body></html>tailwind seems to work as my two div's above go from row based to column when I shrink to mobile size. I am not sure why @apply doesn't work AND when I move the items into the actual divs, it still has no effect.
Finding and replacing 'box' with 'flex align-middle justify-center' results in 'slightly' better results but still not correct in that the container is left aligned and results are centered in that container.
My endgoal is a responsive page nearly exactly like this one https://www.upwork.com/nx/signup/?dest=home
I tried the stuff I listed above.