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 page
https://tailwindcss.com/docs/installation
My changes above are in app.component.html and my index.html looks like this
<!doctype html>
AngularTesting
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.
I tried the stuff I listed above.