概要

VitePress で Tailwind CSS を使う手順を解説します。

Tailwind CSS とは

Tailwind CSS は、CSS フレームワークの 1 つで、クラス名を使ってスタイルを適用することができます。

VitePress での Tailwind CSS の設定手順

VitePress で Tailwind CSS を使うためには、以下の手順を実施します。

インストール

まずは、Tailwind CSS をインストールします。

npm install -D tailwindcss postcss autoprefixer

設定ファイルの作成

次に、Tailwind CSS の設定ファイルを作成します。

npx tailwindcss init -p

実行後、プロジェクト直下にtailwind.config.jsとpostcss.config.js が作成されます。

設定ファイルの編集

まずpostcss.config.js ファイルに pulugins を追加します。

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

次に、tailwind.config.js ファイルを編集します。 content に tailwind css を適用するファイルを指定します。

export default {
  content: ["./docs/.vitepress/**/*.vue"],
  theme: {
    extend: {},
  },
  plugins: [],
};

CSS での適用

.vitepress 直下の CSS ファイルに以下を追加します。(例: .vitepress/custom.css)

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

最後に theme（index.ts）の設定をします。

// .vitepress/theme/index.ts
import DefaultTheme from "vitepress/theme";
import "./custom.css"; // この行を追加

export default DefaultTheme;

以上で、VitePress で Tailwind CSS を使用する準備は完了です。

使用例

VitePress で Tailwind CSS が使用できることを確認します。

<template>
  <div>
    <p class="text-3xl font-bold underline">{{ title }}</p>
  </div>
</template>

<script setup lang="ts">
const title = "Hello, VitePress!";
</script>

build 時のエラー対応

VitePress のローカルサーバーの実行時やビルド時に以下のエラーが発生する場合があります。

(node:2366) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

このエラーが出た場合は、package.json に以下の設定を追加するか、postcss.config.js ファイルの拡張子を.mjsに変更します。

{
  "type": "module"
}

まとめ

以上で、VitePress で Tailwind CSS を使う手順を解説しました。