VitePressでTailwind CSSを使う

VitePressでTailwind CSSを利用するための設定方法です。

確認環境

• Tailwind CSS 3.3.5
• VitePress 1.0.0-rc.29
• autoprefixer 10.4.16
• PostCSS 8.4.31

Tailwind CSSのインストールと設定

前提条件

• VitePressはインストール済みとします。
• VitePressのテーマはデフォルトテーマを利用します。

Tailwind CSSをインストールする

Tailwind CSSのインストールをします。
公式サイト

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

PostCSSを設定する

PostCSSの設定ファイル(postcss.config.js)にTailwindを追記します。postcss.config.jsはVitePressプロジェクトディレクトリの直下に作成します。

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Tailwind CSSを設定する

Tailwindの設定ファイル(tailwind.config.js)にTailwindを適用するファイルのパスを設定します。以下はdocsディレクトリにマークダウンファイルを格納している場合の例です。

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./docs/**/*.{html,js,md}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

カスタムCSSを追加する

VitePressのデフォルトテーマにCSSを追加します。

// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import './custom.css'

export default DefaultTheme

カスタムCSSを追加します。

/* .vitepress/theme/custom.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

稼働確認

ローカル開発サーバを起動して確認をします。

npm run docs:dev