VuePressにTailwind CSSを導入する方法

最低限トップページをVuePressで表示させる

VuePressでトップページを表示させる手順は公式ドキュメントに沿って行ってください。

VuePress 公式ドキュメント

この時点でのディレクトリ構成は以下の通りです。

.
├── docs
│   ├── README.md
├── package.json

Tailwind CSSの導入

手順は基本的にTailswind CSSの公式ドキュメントに記載された通りです。

Tailwind CSS 公式ドキュメント

1. npm or yarnでTailwind CSSをインストールする

ルートディレクトリで以下コマンドを実行

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

1. ./docs/.vuepress/styles/index.styl を作成

mkdir ./docs/.vuepress
mkdir ./docs/.vuepress/styles
touch ./docs/.vuepress/styles/index.styl

ちなみに、上記ディレクトリ構成でindex.stylを配置すると、vuepressが自動的にindex.stylを認識、デフォルトのCSSファイルとして扱ってくれます。

この時点でのディレクトリ構成は以下の通りです。

.
├── docs
    ├── README.md
    ├── .vuepress
        ├── styles
            ├── index.styl
├── package.json

1. ./docs/.vuepress/styles/index.styl に Tailwind CSSの設定を追加

./docs/.vuepress/styles/index.styl に以下を追加

@tailwind base;
@tailwind components;
@tailwind utilities;

自分で全体に効かせるCSSを書きたいときは、
@tailwind components; と @tailwind utilities; の間に記述しましょう。

@tailwind base;
@tailwind components;

（ここにCSSを記述）

@tailwind utilities;

1. ./docs/.vuepress/config.js を作成して設定を追加

touch ./docs/.vuepress/config.js

./docs/.vuepress/config.js の内容を以下の通りにします。

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

この時点でのディレクトリ構成は以下の通りです。

.
├── docs
    ├── README.md
    ├── .vuepress
        ├── styles
            ├── index.styl
        ├── config.js
├── package.json

1. サーバーを再起動して確認

もしサーバーを起動している状態なら再起動しましょう。

これでVuePressでTailwind CSSが使えるようになりました！