Vuepress 2 and Tailwind CSS

Question

I'm trying to use Tailwind CSS with Vuepress 2.
I have installed npm install -D tailwindcss@latest postcss@latest autoprefixer@latest.

In my .vuepress/config.js file I have:

import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'

export default {
  title: 'Frontend Library',
  port: 8081,
  ...
  bundlerConfig: {
    viteOptions: {
      css: {
        postcss: {
          plugins: [tailwindcss, autoprefixer]
        }
      }
    }
  }
}

I have also docs/.vuepress/styles/index.scss file:

@tailwind base;
@tailwind components;
@tailwind utilities;

There is no error, but Tailwind styles are not applied though..
Any ideas?
Thanks

Answer 1

Suppose you've already got the answer to work through it.

The plugins should be called instead of just put them in the array.

bundler: viteBundler({
viteOptions: {
    css: {
        postcss: {
            plugins: [
                autoprefixer(),
                tailwindcss()
            ]
        }
    }
}

})

It works for me. Hope it can help you.