tailwind-cssvuepresstailwind-3vuepress2

Vuepress 2 and Tailwind CSS


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


Solution

  • 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.