A question about using with tailwind

[lana-k]

Hi, I have a couple of questions about using pinceau with tailwind (if it's possible):

• can I use design tokens from tailwind (tailwind.config.js) instead of tokens.config.ts?
• how can I use pinceau with @apply?

Generally, I like the idea to move logic related to styling out from script tag, but I can't figure out how to use it in a project with tailwind. How can I rewrite this using pinceau?

<template>
    <button :class="buttonClass">Example</button>
</template

<script>
...
computed () {
    buttonClass () {
       return this.isPrimary ? `primary` : `secondary`
     }
}
...
</script>

<style scoped>
.primary {
  @apply bg-red-500;
}

.secondary {
  @apply bg-slate-500;
}
</style>

In other words, how can I move logic to style and have one dynamic class? Something like this?:

<style scoped>
css({
  '.btn' {
    '@apply':  ({props}) => props.isPrimary ? 'bg-red-500' : 'bg-slate-500';
  }
})
</style>

[SGAMERyu]

The Variants System section in the Pinceau documentation should be able to answer your question. https://pinceau.dev/styling/variants