VPB Tailwind Configuration

VitePress Blog uses Tailwind CSS, version >= 4.0.0.

VPB Tailwind is processed with the official Vite plugin @tailwindcss/vite.

For specific code, please refer to vitepress-blogs-theme-template.

Add Tailwind to your VitePress config

Install the required packages:

pnpm add tailwindcss @tailwindcss/vite

Then register the Vite plugin in .vitepress/config.js:

.vitepress/config.js

import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vitepress'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})

Once the plugin is enabled, @import "tailwindcss"; inside your theme stylesheet will be compiled automatically.