[docs] How to integrate with tools like Postcss and Tailwind

[willsoto]

Is your feature request related to a problem? Please describe.

I would like to know how to integrate this tool with things like Postcss and Tailwind.

Describe the solution you'd like

It could be great to have an "Integrations" section or something similar so people understood the best way to integrate with other popular tools in the ecosystem

Describe alternatives you've considered
N/A

Additional context
N/A

keywords: postcss, tailwind, autoprefixer

[peduarte]

@willsoto hey! I dont understand, sorry. Can you explain what you mean by "integrate"?

[willsoto]

@peduarte Sure. The reason I ask at all is because I see several Tailwind threads each implying that there was some package that integrated Stitches with Tailwind. Based on that, I assume it's not as straightforward as configuring postcss?

Asked another way: If I configure Webpack/Postcss/Tailwind according to their documentation, can I do something like this with Stitches:

const Button = styled('button', {
  '@apply': 'flex more tailwind properties', // Will this part be processed correctly?
});

[peduarte]

@willsoto ooh, yes. That was an old feature of Stitches that has been deprecated. We no longer support a tailwind integration. Sorry for the confusion.

[willsoto]

@peduarte Sorry, I feel like my question is getting muddled from the context. I understand the integration is deprecated and that is fine.

I am wondering how I can use tools like Postcss with this library, is it possible?

[peduarte]

@willsoto Ok, I've re-opened the issue. I'm sorry I still dont follow what youre trying to achieve.

"Using Stitches with Postcss" is a bit too vague for me to understand what youre trying to accomplish.

Think of Stitches as an alternative to styled-component or emotion. It's a CSS in JS library. It has its own syntax for things that arent supported in CSS yet, like abstracting media queries, variants, etc. We then convert that to CSS that browsers understand.

If you're after something specific, please dont hesitate to ask! One of the maintainers of Stitches, @jonathantneal , is also a maintainer of postcss and various of its plugins

[willsoto]

Ok let me ask a different question: If I setup Postcss with Autoprefixer, will the CSS I write via Stitches be prefixed correctly when it gets built?

[peduarte]

@willsoto only during server-side rendering. Example here

[willsoto]

I saw that, thank you.

So are there any plans to make this possible if you are not doing SSR? As an example, astroturf has a special Webpack loader which I assume is what allows it to integrate with that whole toolchain outside of SSR.

[jonathantneal]

I’m moving this over to a discussion, since we can’t necessarily take action from within this repo.