Where to apply basic styles (Nuxt 3)

[galaxyblur]

Thanks for the interesting tool! I'm intrigued by the concept and looking forward to playing with it in my app.

I'm developing a new Nuxt 3 app and I've gotten as far as having the CSS variables available in the browser. I'm confused by what to do now -- should I be setting up the base CSS rules in something like app.vue? For example, my app's fontFamily? Apologies if I missed this somewhere in the docs.

[MrHBS]

Same question here

[SGAMERyu]

pinceau can distinguish between style logic and code logic in different blocks, and we often have such code in our applications

<template>
 <div :style={ color: props. color } class="test"></div>
</template>

<script lang="ts" setup>
defineProps<{ color: string}>()
</script>

<style>
.test {
....
}
</style>

pinceau provides a solution that provides all dynamic styles in a style block

<template>
 <div class="test"></div>
</template>

<script lang="ts" setup>
defineProps<{ color: string}>()
</script>

<style lang="ts">
.test {
color: () => props.color
}

I think this solves the problem of having too much style in the logic of the component, allowing developers to switch between focusing on style and focusing on logic

[galaxyblur]

@SGAMERyu yes, I see the value in this tool. But what is the suggested pattern for setting up default/global styles in a Nuxt 3 app?