Example Tailwind Vue SFC

Child.vue

<template>
    <div>
        <p class="bg-blue">Hello World 2</p>
    </div>
</template>

<script>
    export default {};
</script>

Example.vue

<template>
    <div>
        <p class="bg-red">Hello World</p>
        <p class="custom-class">One</p>
        <child-component>
    </div>
</template>

<style tailwind lang="less" scoped>
    @tailwind preflight;
    @tailwind components;
    @tailwind utilities;
    
    .custom-class {
        color: @apply .text-white;

        h1 {
            font-size: 24px;
        }
    }
</style>

<script>
    import Child from 'Child';
    
    export default {
        components: {
            'child-component': Child,
        },
    };
</script>

This will work but if you add those @tailwind directives in a bunch of components you are gonna end up with a 50gb CSS file, haha... You'll definitely want to use purgecss, but that might be risky on a legacy project. It will also be extremely slow if you have to purge 10 components that all duplicate the same styles.

As far as the PostCSS config, just something like this will be fine:

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss')(),
    require('autoprefixer')
  ]
}