#Is there a way to make arbitrary tailwind work with layouts?

1 messages · Page 1 of 1 (latest)

remote rampart
#

Arbitrary elements work properly when done in the same file but not when using through slots.

Example

—- Fails —-
—- MyLayout
<div class=“[&>*]:text-center”>
<slot />
</div>

—- MyPage
<MyLayout>
<h1>Does not get centered</h1>
<p>Does not get centered</p>
</MyLayout>

—- DesiredBehavior —-
<div class=“[&>*]:text-center”>
<h1>I am centered</h1>
<p>I am also centered</p>
</div>

The behavior I am going for doesn’t make sense to put inside of the page and would save a lot of duplication.

Is there maybe a more “Astro” way to achieve this that I don’t know?

Thanks in advance!

teal wasp
#

What do the styles look like in the browser dev tools? I tried reproducing this locally but it worked for me

remote rampart
#

Odd. I will reply when I can check again. Could it be a bun specific thing? “bun run dev” Didn’t even consider it when making the post.

Anyways. I will share when I get my pc on again tomorrow sometime.

#

It may also be worth noting that that this is a nested layout in actual use.

—- MyLayout
—-
import BaseLayout from ‘./BaseLayout.astro’
—-
<BaseLayout title=“Title”
<div class=“[&>*]:…”>
<slot />
</div>
</BaseLayout>

If that would affect anything. All of the flexes work as expected (through the slots even).

Also, do you know if there is a better way to list items like “[&>*]:[text-center text-xl]” instead of having to prefix each individually?

remote rampart
#

Oh wow. I’m dumb. I see it now. I’m importing from the BaseLayout I just changed what I was calling it. -.-

teal wasp
#

Sorry, I was not able to get to this until just now, but I am glad you found a fix! 💚