How are you guys using panda css and tailwind css together?

[HanCheo]

i think is not good panda using with tailwind. cus '@tailwind base' make unlayered reset css.
panda always make css in layer. that mean layer css override from tailwind reset css. ( like below image )

The image above overrides the border color.

two way using with tailwind.

1. tailwind preflight make false.
2. panda css using with important.

i think panda css provide unlayer css...
How are you using it?

unsing panda reset and tailwind preflight off. is best way?
I'm wondering if I'm going in the wrong direction.

[anubra266]

@HanCheo Panda lets you rename the layers
https://panda-css.com/docs/references/config#layers

[anubra266]

@HanCheo That's because unlayered css have higher specificity, it's not a panda specific limitation

[HanCheo]

@anubra266

If I want to use Tailwind and Panda together, is it best to off tailwind preflight?
this is my question.

what is best way use panda with tailwind.

[anubra266]

@HanCheo I don't see the need for two preflights, so you should probably off one of them. But in general, I'm not sure what's the best way to use Panda with tailwind. Whichever way works best for you I guess.

[HanCheo]

hmm.. ok i understand it. thx for reply !

[benjaminpreiss]

Hey @HanCheo, how did you solve your problem?

I am curious :)

[benjaminpreiss]

@astahmer continuing our discussion from twitter

I can't make tailwind and panda work together by setting just a prefix option in the panda config. Do I additionally have to set the layers in the config?

Edit

I got it working. One has to apply the tailwind styles within layers:

app.css

@layer tailwind.base {
	@tailwind base;
}

@layer tailwind.components {
	@tailwind components;
}

@layer tailwind.utilities {
	@tailwind utilities;
}

@layer reset, base, tokens, recipes, utilities;

I am not sure though ...

• Which reset I should keep (tailwind or panda).
• Whether I should still add a prefix to tailwind or panda.

REPL

Second Edit

I think the order of the layers has to be different, as certain tailwind styles will stop working in this order. Also, it seems that the @tailwind directive should be used nevertheless.

@layer reset, base, tokens, recipes, utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;

[astahmer]

I thought the layers customization was needed, iirc using the same names as custom at-rules from tw caused some issues in their side, so we added that config option

you don't need to use prefix, but it might make sense as I think some className will clash otherwise
just tried making an example repo using tw + panda and I couldnt reproduce the layers issue in this example, so I guess it's not always needed

https://github.com/astahmer/panda-tw
https://panda-tw.vercel.app/

[benjaminpreiss]

Hmmm, okey - so what would you recommend?

• Adding a prefix on tailwind side?
• Or adding a prefix on panda side?

[astahmer]

both are fine but I think it should be easier to change the panda prefix as it's just a line in the config, you don't need to manually change every classes usage

[galarus]

@benjaminpreiss @HanCheo
All I had to do was set

corePlugins: {
        preflight: false
    },

inside of tailwind.config.js

and then setting border properties with panda works again.

[HanCheo]

Yes, I think this is the best way to using both. =]

[journaux]

agree https://tailwindcss.com/docs/preflight

[DustinJSilk]

As I'm migrating from tailwind to Pandacss, I wanted pandacss to take priority. This was the solution that worked for me, simply adding a tailwind layer early in the pandacss stack:

@layer reset, tailwind, base, tokens, recipes, utilities;

@layer tailwind {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}

[coopbri]

I was able to get this working by prefixing the Panda layers (e.g. panda_reset), but also tried @DustinJSilk's solution above and it's cleaner + nicer DX imo. Thanks Dustin!

Has anyone figured out a clean way to share theme/design tokens between Panda and Tailwind? It would be really cool if the Panda config + any Panda presets could sync with the Tailwind theme. I understand this is potentially a very tricky problem, I was imagining a mapper utility that bridges the tokens, maybe a codegen tool that modifies tailwind.config.ts. It would be awesome if the same CSS would be output for e.g. a custom design token called brand.primary.500 whether you set that as a Panda class/prop or as a TW class. I'm going to try working on this myself, just curious if anyone knows prior art