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